Сегодня мы продолжаем серию статей о разработке игр в HTML5 с использованием canvas. В этот раз мы будем изучать анимацию спрайтов и работу со звуком. В демке вы можете увидеть летающего дракона. Звук крыльев будет слышен все время (звук будет зациклен), а другой звук — рёв дракона (по событию MouseUp). И, наконец, мы научим нашего дракона приближаться к мыши (при удерживании кнопки мыши).
Наши предыдущие статьи вы можете прочитать здесь: Урок 3. За основу мы берем скрипт сделанный на прошлом уроке и будем его улучшать.
Step 1. HTML
index.html
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="utf-8" />
<title>Разработка игр на HTML5 — Урок 4 | officialplat-tt.ru</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container">
<canvas id="scene" width="1000" height="600"></canvas>
</div>
<footer>
<h2>Разработка игр на HTML5 — Урок 4</h2>
<a href="http://officialplat-tt.ru/?p=1655" class="stuts">Вернуться на <span>officialplat-tt.ru</span></a>
</footer>
</body>
</html>
Шаг 2. CSS
css/main.css
Сегодня я не буду публиковать стили, так как это всего лишь макет страницы, ничего особенного. Файл стилей есть в исходниках.
Шаг 3. JS
js/script.js
// внутренние переменные
var canvas, ctx;
var backgroundImage;
var iBgShiftX = 100;
var dragon;
var dragonW = 75; // ширина дракона
var dragonH = 70; // высота дракона
var iSprPos = 0; // инициализация спрайтов
var iSprDir = 4; // начальное направление дракона
var dragonSound; // звук рёв дракона
var wingsSound; // звук крыльев
var bMouseDown = false; // состояние мыши
var iLastMouseX = 0;
var iLastMouseY = 0;
// -------------------------------------------------------------
// объекты :
function Dragon(x, y, w, h, image) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.image = image;
this.bDrag = false;
}
// -------------------------------------------------------------
// функции отрисовки :
function clear() { // функция очистки canvas
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // главная функция отрисовки
clear(); // очистить canvas
// отрисовка фона
iBgShiftX -= 4;
if (iBgShiftX <= 0) {
iBgShiftX = 1045;
}
ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1000, 940, 0, 0, 1000, 600);
// обновление позиций спрайтов
iSprPos++;
if (iSprPos >= 9) {
iSprPos = 0;
}
// перемещение дракона к месту нажатия мыши
if (bMouseDown) {
if (iLastMouseX > dragon.x) {
dragon.x += 5;
}
if (iLastMouseY > dragon.y) {
dragon.y += 5;
}
if (iLastMouseX < dragon.x) {
dragon.x -= 5;
}
if (iLastMouseY < dragon.y) {
dragon.y -= 5;
}
}
// отрисовка дракона
ctx.drawImage(dragon.image, iSprPos*dragon.w, iSprDir*dragon.h, dragon.w, dragon.h, dragon.x - dragon.w/2, dragon.y - dragon.h/2, dragon.w, dragon.h);
}
// -------------------------------------------------------------
// инициализация
$(function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// загрузка фонового изображения
backgroundImage = new Image();
backgroundImage.src = 'images/hell.jpg';
backgroundImage.onload = function() {
}
backgroundImage.onerror = function() {
console.log('Error loading the background image.');
}
// инициализация звука 'Рёв дракона'
dragonSound = new Audio('media/dragon.wav');
dragonSound.volume = 0.9;
// инициализация звука 'Крылья'
wingsSound = new Audio('media/wings.wav');
wingsSound.volume = 0.9;
wingsSound.addEventListener('ended', function() { // проигрывание звука крыльев
this.currentTime = 0;
this.play();
}, false);
wingsSound.play();
// инициализация дракона
var oDragonImage = new Image();
oDragonImage.src = 'images/dragon.gif';
oDragonImage.onload = function() {
}
dragon = new Dragon(400, 300, dragonW, dragonH, oDragonImage);
$('#scene').mousedown(function(e) { // привязываем событие нажатия мыши(для перетаскивания)
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
if(e.originalEvent.layerX) { // изменения jquery 1.7
mouseX = e.originalEvent.layerX;
mouseY = e.originalEvent.layerY;
}
bMouseDown = true;
if (mouseX > dragon.x- dragon.w/2 && mouseX < dragon.x- dragon.w/2 +dragon.w &&
mouseY > dragon.y- dragon.h/2 && mouseY < dragon.y-dragon.h/2 +dragon.h) {
dragon.bDrag = true;
dragon.x = mouseX;
dragon.y = mouseY;
}
});
$('#scene').mousemove(function(e) { // привязываем событие движения мыши
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
if(e.originalEvent.layerX) { // изменения jquery 1.7
mouseX = e.originalEvent.layerX;
mouseY = e.originalEvent.layerY;
}
// сохраняем последние координаты
iLastMouseX = mouseX;
iLastMouseY = mouseY;
// перетаскиваем дракона
if (dragon.bDrag) {
dragon.x = mouseX;
dragon.y = mouseY;
}
// изменить направление дракона (в зависимости от положения курсора мыши)
if (mouseX > dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) {
iSprDir = 0;
} else if (mouseX < dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) {
iSprDir = 4;
} else if (mouseY > dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) {
iSprDir = 2;
} else if (mouseY < dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) {
iSprDir = 6;
} else if (mouseY < dragon.y && mouseX < dragon.x) {
iSprDir = 5;
} else if (mouseY < dragon.y && mouseX > dragon.x) {
iSprDir = 7;
} else if (mouseY > dragon.y && mouseX < dragon.x) {
iSprDir = 3;
} else if (mouseY > dragon.y && mouseX > dragon.x) {
iSprDir = 1;
}
});
$('#scene').mouseup(function(e) { // привязываем событие отжатия мыши
dragon.bDrag = false;
bMouseDown = false;
// проигрываем звук рёва дракона
dragonSound.currentTime = 0;
dragonSound.play();
});
setInterval(drawScene, 30); // отрисовка сцены с заданным интервалом
});
Как это работает (коротко): Во-первых, мы определяем холст, после чего загружаем фоновое изображение и звуки, затем мы инициализируем нашего дракона и создаем обработчики событий мыши. В цикле главной функции отрисовки я прокручиваю фоновое изображение, после чего обновляю позицию спрайтов и рисую нашего дракона. В нашем коде вы можете найти несколько новых интересных методов:
1. Зацикленный фоновый звук
// инициализация звука 'Крылья'
wingsSound = new Audio('media/wings.wav');
wingsSound.volume = 0.9;
wingsSound.addEventListener('ended', function() { // проигрывание звука крыльев
this.currentTime = 0;
this.play();
}, false);
wingsSound.play();
2. Отрисовка спрайтов
var oDragonImage = new Image();
oDragonImage.src = 'images/dragon.gif';
oDragonImage.onload = function() {
}
....
// обновление позиций спрайтов
iSprPos++;
if (iSprPos >= 9) {
iSprPos = 0;
}
// отрисовка дракона
ctx.drawImage(dragon.image, iSprPos*dragon.w, iSprDir*dragon.h, dragon.w, dragon.h, dragon.x - dragon.w/2, dragon.y - dragon.h/2, dragon.w, dragon.h);
Сначала мы загружаем все изображение полностью, после чего рисуем только его часть в цикле.
Шаг 4. Дополнительные файлы
images/dragon.gif, images/hell.jpg, media/dragon.wav and media/wings.wav
Все файлы есть в исходниках.
Понравился ли Вам наш новый ручной дракон? 
Я буду рад, если вы поделитесь ссылкой на урок с друзьями и оставите комментарии. Удачи!
Получайте новые статьи блога прямо себе на почту
Звук раздражает. А так, классный урок