Путеводитель по играм HTML5 без слёз
Оригинал: http://www.html5rocks.com/en/tutorials/canvas/notearsgame/
Перевод: Влад Мержевич
Итак, вы хотите сделать игру с помощью Canvas и HTML5? Следуйте этому руководству и окажетесь на пути в кратчайший срок. Руководство предполагает, что у вас, по меньшей мере, средний уровень знаний по JavaScript.
Вы можете вначале сыграть в игру или перейти непосредственно к статье и просматривать исходный код игры.
Создание холста
Чтобы начать рисовать, нам нужно создать холст. Поскольку это путеводитель без слёз, то будем использовать jQuery.
var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;
var canvasElement = $("<canvas width='" + CANVAS_WIDTH +
"' height='" + CANVAS_HEIGHT + "'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');Для имитации плавного и непрерывного игрового процесса мы хотим обновлять игру и перерисовать экран быстрее, чем это воспринимает человеческий разум и глаз.
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);Пока мы можем оставить методы update и draw пустыми. Главное знаем, что setInterval() периодически их вызывает.
function update() { ... }
function draw() { ... }Здравствуй, мир
Теперь, когда мы имеем зацикленный геймплей, давайте обновим наш метод draw, нарисовав какой-нибудь текст на экране.
function draw() {
canvas.fillStyle = "#000"; // Устанавливаем цвет чёрным
canvas.fillText("Sup Bro!", 50, 50);
}Совет. Не забудьте запустить ваше приложение после внесения изменений. Если что-то пойдёт не так, то гораздо проще отследить, когда есть всего несколько строк.
Это очень классно для стационарного текста, но поскольку у нас уже имеется цикличность игры, мы должны легко заставить двигаться текст.
var textX = 50;
var textY = 50;
function update() {
textX += 1;
textY += 1;
}
function draw() {
canvas.fillStyle = "#000";
canvas.fillText("Sup Bro!", textX, textY);
}Теперь всё должно кружиться. Если проследовать вдоль движения, то на экране остаются рисунки от предыдущих раз. Попробуйте догадаться, почему это происходит. Потому что мы не очищаем экран. Итак, давайте добавим некий код очистки экрана в метод draw.
function draw() {
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
canvas.fillStyle = "#000";
canvas.fillText("Sup Bro!", textX, textY);
}Теперь, когда у вас есть некоторый движущийся по экрану текст, вы на полпути к реальной игре. Осталось добавить управление, улучшить геймплей, подправить графику... Ладно, может быть, 1/7 пути к реальной игре.
Создание игрока
Создаем объект для хранения данных игрока ответственный за вещи вроде рисования. Здесь мы создаём объект player с помощью простого литерального объекта для хранения всей информации.
var player = {
color: "#00A",
x: 220,
y: 270,
width: 32,
height: 32,
draw: function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
}
};Мы используем простой цветной прямоугольник для представления игрока в данный момент. Когда мы рисуем игру, то очищаем холст и рисуем игрока.
function draw() {
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
player.draw();
}Управление клавишами
Использование jQuery Hotkeys
Плагин jQuery Hotkeys намного упрощает обработку клавиш в разных браузерах. Вместо того, чтобы плакать над кроссбраузерной расшифровкой кода клавиш keyCode и charCode, мы можем сделать привязку клавиш следующим образом.
$(document).bind("keydown", "left", function() { ... });Это большой выигрыш, что не нужно беспокоиться о деталях, какая клавиша какой код имеет. Мы просто имеем возможность сказать вроде «когда игрок нажимает стрелку вверх что-то сделать». jQuery Hotkeys делает это хорошо.
Движения игрока
В JavaScript обработка событий клавиатуры возложена на механизм событий. Это означает, что нет встроенного события для проверки какая клавиша нажата, так что нам придётся использовать собственное событие.
Вы можете спросить: «Почему бы просто не использовать механизм событий для обработки клавиш?». Да потому что величина опроса клавиатуры зависит от системы и не привязана ко времени цикла игры, так что геймплей меняется от системы к системе.
Хорошая новость в том, что я включил 16-строчный интерфейс на JavaScript, который делает доступным события запросов. Он называется key_status.js и вы можете запросить статус клавиши в любой момент проверив keydown.left и др.
Теперь, когда у нас есть возможность запросить нажатые клавиши, вы можете использовать этот простой метод update для перемещения игрока.
function update() {
if (keydown.left) {
player.x -= 2;
}
if (keydown.right) {
player.x += 2;
}
}Идите и подвигайте его.
Вы можете заметить, что игрок может выйти за пределы экрана. Ограничим позицию игрока, чтобы держать его в рамках. Кроме того, игрок кажется медленным, так что заодно повысим ему скорость.
function update() {
if (keydown.left) {
player.x -= 5;
}
if (keydown.right) {
player.x += 5;
}
player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}Добавление большего числа клавиш довольно легко, так что добавим каких-нибудь снарядов.
function update() {
if (keydown.space) {
player.shoot();
}
if (keydown.left) {
player.x -= 5;
}
if (keydown.right) {
player.x += 5;
}
player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}
player.shoot = function() {
console.log("Пиу пиу");
// :) По крайней мере добавить привязку клавиш было легко
};Добавляем больше игровых объектов
Снаряды
Теперь добавим снаряды для реальности. Вначале нужна коллекция для их хранения:
var playerBullets = [];Далее нам нужен конструктор для создания экземпляра пули.
function Bullet(I) {
I.active = true;
I.xVelocity = 0;
I.yVelocity = -I.speed;
I.width = 3;
I.height = 3;
I.color = "#000";
I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
};
I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
};
I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity;
I.active = I.active && I.inBounds();
};
return I;
}Когда игрок стреляет, мы должны создать экземпляр пули и добавить его в коллекцию пуль.
player.shoot = function() {
var bulletPosition = this.midpoint();
playerBullets.push(Bullet({
speed: 5,
x: bulletPosition.x,
y: bulletPosition.y
}));
};
player.midpoint = function() {
return {
x: this.x + this.width/2,
y: this.y + this.height/2
};
};Теперь нам нужно добавить обновление пуль через пошаговую функцию update. Чтобы предотвратить коллекцию пуль от бесконечного заполнения, мы фильтруем список пуль, включая в него только активные пули. Это также позволяет нам убрать пули, которые столкнулись с врагом.
function update() {
...
playerBullets.forEach(function(bullet) {
bullet.update();
});
playerBullets = playerBullets.filter(function(bullet) {
return bullet.active;
});
}Финальный шаг отрисовывает пули.
function draw() {
...
playerBullets.forEach(function(bullet) {
bullet.draw();
});
}
Враги
Теперь пришло время добавить врагов тем же способом, каким мы добавили пули.
enemies = [];
function Enemy(I) {
I = I || {};
I.active = true;
I.age = Math.floor(Math.random() * 128);
I.color = "#A2B";
I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
I.y = 0;
I.xVelocity = 0
I.yVelocity = 2;
I.width = 32;
I.height = 32;
I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
};
I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
};
I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity;
I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);
I.age++;
I.active = I.active && I.inBounds();
};
return I;
};
function update() {
...
enemies.forEach(function(enemy) {
enemy.update();
});
enemies = enemies.filter(function(enemy) {
return enemy.active;
});
if(Math.random() < 0.1) {
enemies.push(Enemy());
}
};
function draw() {
...
enemies.forEach(function(enemy) {
enemy.draw();
});
}Загрузка и рисование изображений
Конечно круто наблюдать, как все эти коробки летают, но изображения для всего этого будут ещё лучше. Загрузка и отображение изображения на холсте, как правило, связано с печальным опытом. Во избежании этой боли и страданий мы можем использовать простой полезный класс.
player.sprite = Sprite("player");
player.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
};
function Enemy(I) {
...
I.sprite = Sprite("enemy");
I.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
};
...
}Обнаружение столкновения
У нас есть все эти летающие штучки на экране, но они не взаимодействуют друг с другом. Чтобы каждый знал, когда надо взорваться, нужно добавить нечто для обнаружения столкновения.
Будем использовать простой прямоугольный алгоритм определения столкновений:
function collides(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}Есть несколько видов столкновений, которые надо проверить:
- Пули игрока => вражеские корабли
- Игрок => вражеские корабли
Сделаем метод для обработки столкновений, который вызывается из метода update.
function handleCollisions() {
playerBullets.forEach(function(bullet) {
enemies.forEach(function(enemy) {
if (collides(bullet, enemy)) {
enemy.explode();
bullet.active = false;
}
});
});
enemies.forEach(function(enemy) {
if (collides(enemy, player)) {
enemy.explode();
player.explode();
}
});
}
function update() {
...
handleCollisions();
}Теперь нужно добавить метод explode к игроку и врагам. Это будет флаг их для удаления и добавления взрыва.
function Enemy(I) {
...
I.explode = function() {
this.active = false;
// Дополнительно: Добавляем графику для взрыва
};
return I;
};
player.explode = function() {
this.active = false;
// Дополнительно: Добавляем графику для взрыва и заканчиваем игру
};Звук
Чтобы завершить опыт, добавим некоторые приятные звуковые эффекты. Звуки, подобно изображениям, могут вызвать боль при использовании в HTML5, но спасибо нашей магической бесслёзной формуле sound.js, звуки можно делать суперпросто.
player.shoot = function() {
Sound.play("shoot");
...
}
function Enemy(I) {
...
I.explode = function() {
Sound.play("explode");
...
}
}Хотя API теперь без слёз, добавление звуков в настоящее время самый быстрый способ разрушить ваше приложение. Для звуков не редкость привести к зависанию или вылету вкладок браузера, так что готовьте ваши платочки.
На прощанье
Ещё раз. Вот рабочая версия игры. Вы можете скачать исходный код в zip.
Надеюсь, вам понравилось обучение основам создания простой игры в JavaScript и HTML5. При программировании на должном уровне абстракции мы можем оградить себя от наиболее сложных частей API, а также быть устойчивыми перед лицом будущих изменений.