move a square

by wared

HTML

<div id="square"></div>

CSS

#square {
  position: absolute;
  background: black;
  width: 30px;
  height: 30px;
}

JavaScript

var LEFT, UP, RIGHT, DOWN;
var fps, keys, key, square, x, y; 

keys = [
  LEFT  = 37,
  UP    = 38,
  RIGHT = 39,
  DOWN  = 40
];

x = 10; y = 10; // coordinates of the square
fps = 1000 / 30; // fps = frame per second
square = document.getElementById("square");
document.addEventListener("keydown", onKeyDown);
document.addEventListener("keyup", onKeyUp);
loop(); // start game

function loop () {
	update(); // update coordinates
  render(); // refresh the screen
  setTimeout(loop, fps); // start again
}

function update () {
	switch (key) {
  	case RIGHT : x = x + 5; break;
  	case LEFT  : x = x - 5; break;
  	case DOWN  : y = y + 5; break;
  	case UP    : y = y - 5; break;
  }
}

function render () {
	square.style.left = x + "px";
	square.style.top = y + "px";
}

function onKeyDown (ev) {
	if (keys.indexOf(ev.which) != -1) {
  	key = ev.which;
  }
}

function onKeyUp (ev) {
	if (key == ev.which) {
  	key = null;
  }
}