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

Сегодня мы создадим врага для нашего персонажа (синего квадрата :) и оживим его. Начало тут и тут. Файл index.html мы трогать не будем. Будем дополнять файл game.js, который находится у нас в папке js. Заставим врага двигаться справа налево по координате X и исчезать, если он дошел до конца.

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 ACCELERATION = 1; //значение ускорения

var POWER = 0.2;
var YSPEED = 0;
var XSPEED = 0;

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); // и рисуем персонажа (пока прямоугольник)
}
}


var enemy = {
color: "#F00",
x: WIDTH,
y: Math.random() * (HEIGHT - HEIGHT_HERO),
width: WIDTH_HERO,
height: HEIGHT_HERO,
draw: function(){
ctx.fillStyle = this.color; // Определяем цвет
ctx.fillRect(this.x, this.y, this.width, this.height); // и рисуем противника (пока прямоугольник)

}
}


function update(){

// Если противник вышел с экрана, переносим его на начало
if (enemy.x < -WIDTH_HERO) {
enemy.x = WIDTH - WIDTH_HERO;
enemy.y = Math.random() * (HEIGHT - HEIGHT_HERO);
} else {
enemy.x -= SPEED; // Добавляем движение справа налево
}
}

function draw(){
ctx.clearRect(0, 0, WIDTH, HEIGHT); // Очищение Canvas

// Создаем персонаж
player.draw();

// Создаем противника
enemy.draw();
}

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

switch (event.keyCode) {
case 37: // Влево
player.x -= SPEED;
//alert(textX +"/" + textY);
break;
case 38: // Вверх
player.y -= SPEED;
break;
case 39: // Вправо
if (player.x > WIDTH - WIDTH_HERO){
//player.x -= SPEED;
player.x = textX;
} else {
player.x += SPEED;
}
break;
case 40: // Вниз
if(player.y > HEIGHT - HEIGHT_HERO){
player.y -= SPEED;
}else {
player.y += SPEED;
}
break;
}
});