Practice Set, Week 9, Keyboard Events

5.1.3

by russduza

HTML

<h3>Practice Set, Week 9, Keyboard Events</h3>

<p>This page contains a box with a "puck" in it. The javascript contains functions that will move the puck in each of four directions. Your task is to write an event handler that will respond to the keyboard - specifically, to allow the user to use the arrow keys to move the puck around.</p>
<p>You can attach an event handler to the window object, and have a conditional to see which key was pressed. The <a href="http://jsfiddle.net/cscie3/j1uLsvay/">keyCode utility</a> we referred to in Week 9, lesson 3 of the course may be helpful to you.</p>
<p>Also, when running your code in JSFiddle, you will have to give this HTML output frame focus (by clicking on it once) for your code to capture keyboard activity. </p>
<p>Hint - all you have to do is listen for keydown or keyup, and depending on which arrow key was pressed, call the appropriate function. </p>
<div id="container">
    <div id="output"></div>
    <div id="puck"></div>
</div>

CSS

#container{
    height: 200px;
    width: 400px;
    border: 1px solid black;
    background-color: #dddddd;
}
#puck{
    border: 1px solid red;
    height: 20px;
    width: 20px;
    background-color: red;
    position:relative;
    top: 90px;
    left: 190px;
}

JavaScript

document.addEventListener("keydown", x);

function x(evt) {
  if (evt.keyCode == "37") {
    mvleft();
  } else if (evt.keyCode == "38") {
    mvup();
  } else if (evt.keyCode == "39") {
    mvright();
  } else if (evt.keyCode == "40") {
    mvdown();
  }
};

// initial location of the puck, and step size
var step = 4;
var pTop = 90;
var pLeft = 190;

// utility functions that will move the puck

// get a reference to the puck and container
var puck = document.getElementById("puck");
var theIce = document.getElementById("container");

// get the width and height of the ice and puck
var iceWidth = theIce.clientWidth;
var iceHeight = theIce.clientHeight;
var puckWidth = puck.offsetWidth;
var puckHeight = puck.offsetHeight;

// added code to make sure puck doesn't move off the ice
function mvup() {
  if (pTop - step >= 0) {
    pTop -= step;
  } else {
    pTop = 0;
  }
  puck.style.top = pTop + "px";
}

function mvdown() {
  if (pTop + step < iceHeight - puckHeight) {
    pTop += step;
  } else {
    pTop = iceHeight - puckHeight;
  }
  puck.style.top = pTop + "px";
}

function mvleft() {
  if (pLeft - step >= 0) {
  	pLeft -= step;
	} else {
  	pLeft = 0;
  }
  puck.style.left = pLeft + "px";
}

function mvright() {
	if (pLeft + step < iceWidth - puckWidth){
  	pLeft += step;
  } else {
  	pLeft = iceWidth - puckWidth;
  }
  puck.style.left = pLeft + "px";
}