jQuery Simple Example

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div class="game-area">
  <div class="box"></div>
</div>

CSS

.game-area {
  width: 600px;
  height: 600px;
  border: 2px solid #333;
  background-color: yellow;
  position: relative;
}

.game-area .box {
  width: 50px;
  height: 50px;
  border: 1px solid #333;
  background-color: blue;
  position: absolute;
  top: 10px;
  left: 10px;
}

JavaScript

var keyCodes = {
  down: 40,
  right: 39,
  up: 38,
  left: 37
}
var $box = $(".box");
var gameAreaMaxIndexTop = $(".game-area").height() - $box.height();
var gameAreaMaxIndexLeft = $(".game-area").width() - $box.width();
var moveInterval = 5;

$(document).ready(function() {

  $(document).keydown(function(e) {
    $box.clearQueue();
    switch (e.keyCode) {
      case keyCodes.down:
        moveDown();
        break;
      case keyCodes.up:
        moveUp();
        break;
      case keyCodes.left:
        moveLeft();
        break;
      case keyCodes.right:
        moveRight();
        break;
      default:
        console.log("no keycode to map");
    }
  });

});

function moveDown() {
  if (canMove(keyCodes.down)) {
    $box.animate({
      top: '+=5px'
    }, 1);
  }
}

function moveUp() {
  if (canMove(keyCodes.up)) {
    $box.animate({
      top: '-=5px'
    }, 1);
  }
}

function moveLeft() {
  if (canMove(keyCodes.left)) {
    $box.animate({
      left: '-=5px'
    }, 1);
  }
}

function moveRight() {
  if (canMove(keyCodes.right)) {
    $box.animate({
      left: '+=5px'
    }, 1);
  }
}

function canMove(dir) {
  switch (dir) {
    case keyCodes.down:
      if ($box.position().top == gameAreaMaxIndexTop) {
        return false;
      }
      break;
    case keyCodes.up:
      if ($box.position().top == 0) {
        return false;
      }
      break;
    case keyCodes.left:
      if ($box.position().left == 0) {
        return false;
      }
      break;
    case keyCodes.right:
      if ($box.position().left == gameAreaMaxIndexLeft) {
        return false;
      }
      break;
    default:
      return true;
  }
  return true;
}