Создаем персонажа в игре на HTML 5. Создаем игру. Часть 2

Сегодня мы рассмотрим движение нашего персонажа (синего прямоугольника :). Начало тут Создаем игру. Часть 1. Файл index.html мы трогать не будем. Все будем писать в файле game.js, который находится у нас в папке js. Добавим в игру параметр скорость и с помощью jQuery сделаем реакцию на события клавиатуры (onKeypress).

var WIDTH = 640; // Ширина Canvas
var HEIGHT = 480; // Высота Canvas

var WIDTH_HERO = 64; // Ширина персонажей
var HEIGHT_HERO = 64; // Высота персонажей

var textX = 50; // Начальная позиция персонажа
var textY = 50;

var SPEED = 5; // значение скорости

var FPS = 30; // Число FPS - кадры в секунду

var example = document.getElementById("example");
ctx     = example.getContext('2d');

setInterval(function() {
update();
draw();
}, 1000/FPS); // Обновление 1/FPS (число кадров в секунду/милисекунды)

var player = {
color: "#00A",
x: textX,
y: textY,
width: WIDTH_HERO,
height: HEIGHT_HERO,
draw: function(){
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}

function update(){

}

// Метод рисования на Canvas объектов
function draw(){
ctx.clearRect(0, 0, WIDTH, HEIGHT); // Очищение Canvas

player.draw();
}
// Создаем обработчик нажатий клавиш
$(window).keypress(function(event){

switch (event.keyCode) {
case 37: // Влево
player.x -= SPEED;
break;
case 38: // Вверх
player.y -= SPEED;
break;
case 39: // Вправо
player.x += SPEED;
break;
case 40: // Вниз
player.y += SPEED;
break;
}
});

Т.е. мы в основном добавили код:

$(window).keypress(function(event){

switch (event.keyCode) {
case 37: // Влево
player.x -= SPEED;
break;
case 38: // Вверх
player.y -= SPEED;
break;
case 39: // Вправо
player.x += SPEED;
break;
case 40: // Вниз
player.y += SPEED;
break;
}
});