Как создать мини-игру с помощью HTML5

Новые технологии предназначены не только для создания красочного веб-дизайна, но с помощью их можно создать занимательные развлечения. И в самом деле, надо же когда-нибудь отдыхать и немного развлекаться. В данном уроке мы рассмотрим как создать простую игру с помощью html5. Суть игры состоит в том, что объекты движутся с различной скоростью, на вас, при этом есть возможность уклоняться используя курсор мыши. Также предоставляется возможность отстреливаться от врага. Все это представлено в шуточной форме, и все достаточно примитивно.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Для начала мы рассмотрим разметку с помощью HTML, в которой подключим некоторые скрипты, также будем использовать некоторые плагины с репозитория google, чтобы сократить загрузку игры.

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Как создать мини-игру с помощью HTML5 | Демонстрация для сайта RUDEBOX</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="js/jquery.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
    <br><br><br><br><br><br><br><br><br><br>

        <div class="container">
            <canvas id="scene" width="1000" height="600" tabindex="1"></canvas>
        </div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Как создать мини-игру с помощью HTML5 | Демонстрация для сайта RUDEBOX</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</div>

</body>

</html>

На стилях CSS мы не будем останавливаться, в стилях находится макет страницы, ничего интересного. Их можно просмотреть в исходниках.

Теперь рассмотрим скрипты, практически каждый параметр подписан в коде, в нем мы будем подключать звуковое сопровождение, скорость передвижение, и многое другое..

// Внутренние переменные

var canvas, ctx;
var backgroundImage;
var iBgShiftX = 100;

var dragon, enemy = null; // игровые объекты

var balls = [];
var enemies = [];

var dragonW = 75; / / ширина дракона
var dragonH = 70; / / дракона высотой
var iSprPos = 0, / / начальный кадр спрайта
var iSprDir = 0; / / начальное направление дракона
var iEnemyW = 128; / / ширина врага
var iEnemyH = 128; / / враг высоте
var iBallSpeed ??= 10; / / начальная скорость шара
var iEnemySpeed ??= 2, / / начальная скорость врага

var dragonSound; // звук дракона
var wingsSound; // звук крыльев
var explodeSound, explodeSound2; // звук взрывов
var laughtSound; // звук крыльев

var bMouseDown = false; // состояние мыши
var iLastMouseX = 0;
var iLastMouseY = 0;
var iScore = 0;
// -------------------------------------------------------------

// objects :
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 Ball(x, y, w, h, speed, image) {
 this.x = x;
 this.y = y;
 this.w = w;
 this.h = h;
 this.speed = speed;
 this.image = image;
}
function Enemy(x, y, w, h, speed, image) {
 this.x = x;
 this.y = y;
 this.w = w;
 this.h = h;
 this.speed = speed;
 this.image = image;
}
// -------------------------------------------------------------
/ / Получить случайное число между X и Y
function getRand(x, y) {
 return Math.floor(Math.random()*y)+x;
}

// / Рисуем функции:
function drawScene() { // основная функция DrawScene
 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // очищаем холст

// draw background
 iBgShiftX += 4;
 if (iBgShiftX >= 1045) {
 iBgShiftX = 0;
 }
 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); // Рисуем дополнения if (balls.length > 0) {
 for (var key in balls) {
 if (balls[key] != undefined) {
 ctx.drawImage(balls[key].image, balls[key].x, balls[key].y);
 balls[key].x += balls[key].speed;

if (balls[key].x > canvas.width) {
 delete balls[key];
 }
 }
 }
 }

// Рисуем врагов

if (enemies.length > 0) {
 for (var ekey in enemies) {
 if (enemies[ekey] != undefined) {
 ctx.drawImage(enemies[ekey].image, enemies[ekey].x, enemies[ekey].y);
 enemies[ekey].x += enemies[ekey].speed;

if (enemies[ekey].x < - iEnemyW) {  delete enemies[ekey]; / / Воспроизведения звука laughtSound.currentTime = 0;  laughtSound.play();  }  }  }  } / / Столкновений if (balls.length > 0) {
 for (var key in balls) {
 if (balls[key] != undefined) {

if (enemies.length > 0) {
 for (var ekey in enemies) {
 if (enemies[ekey] != undefined && balls[key] != undefined) {
 if (balls[key].x + balls[key].w > enemies[ekey].x && balls[key].y + balls[key].h > enemies[ekey].y && balls[key].y < enemies[ekey].y + enemies[ekey].h) {  delete enemies[ekey];  delete balls[key];  iScore++; / / Воспроизведения звука взрывов № 2 explodeSound2.currentTime = 0;  explodeSound2.play();  }  }  }  }  }  }  } / / / / Рисуем счет  ctx.font = '16px Verdana';  ctx.fillStyle = '#fff';  ctx.fillText('Score: ' + iScore * 10, 900, 580);  ctx.fillText('Plese click "1" to cast fireball', 100, 580); } // ------------------------------------------------------------- / / Инициализация $(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.');  } / / Музыка "Дракон" init, dragonSound = new Audio('media/dragon.wav');  dragonSound.volume = 0.9; / Музыка / "смеемются" init,  laughtSound = new Audio('media/laught.wav');  laughtSound.volume = 0.9; / / Звуки взрывов explodeSound = new Audio('media/explode1.wav');  explodeSound.volume = 0.9;  explodeSound2 = new Audio('media/explosion.wav');  explodeSound2.volume = 0.9; // 'Звуки крыльев  wingsSound = new Audio('media/wings.wav');  wingsSound.volume = 0.9;  wingsSound.addEventListener('ended', function() { // loop wings sound  this.currentTime = 0;  this.play();  }, false);  wingsSound.play(); // / / Инициализация шара var oBallImage = new Image();  oBallImage.src = 'images/fireball.png';  oBallImage.onload = function() { } // Инициализация врага var oEnemyImage = new Image();  oEnemyImage.src = 'images/enemy.png';  oEnemyImage.onload = function() { } // Инициализация дракона  var oDragonImage = new Image();  oDragonImage.src = 'images/dragon.gif';  oDragonImage.onload = function() {  dragon = new Dragon(400, 300, dragonW, dragonH, oDragonImage);  } $('#scene').mousedown(function(e) { // обязательным событием MouseDown (для перетаскивания)  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) { // обязательные MouseMove событие var mouseX = e.layerX || 0;  var mouseY = e.layerY || 0;  if(e.originalEvent.layerX) {  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) { // обязательным событием MouseUp

dragon.bDrag = false;
 bMouseDown = false;

// Воспроизведения звука дракона
 dragonSound.currentTime = 0;
 dragonSound.play();
 });

$(window).keydown(function(event){ // сообщения для клавиатуры
 switch (event.keyCode) {
 case 49: // '1' key
 balls.push(new Ball(dragon.x, dragon.y, 32, 32, iBallSpeed, oBallImage));

//Воспроизведения звука взрывов № 1

explodeSound.currentTime = 0;
 explodeSound.play();
 break;
 }
 });

setInterval(drawScene, 30); // цикл DrawScene
 // Создаем врагов случайно

var enTimer = null;
 function addEnemy() {
 clearInterval(enTimer);

var randY = getRand(0, canvas.height - iEnemyH);
 enemies.push(new Enemy(canvas.width, randY, iEnemyW, iEnemyH, - iEnemySpeed, oEnemyImage));

var interval = getRand(5000, 10000);
 enTimer = setInterval(addEnemy, interval); // loop drawScene
 }
 addEnemy();
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

// Внутренние переменные

var canvas, ctx;

var backgroundImage;

var iBgShiftX = 100;

var dragon, enemy = null; // игровые объекты

var balls = [];

var enemies = [];

var dragonW = 75; / / ширина дракона

var dragonH = 70; / / дракона высотой

var iSprPos = 0, / / начальный кадр спрайта

var iSprDir = 0; / / начальное направление дракона

var iEnemyW = 128; / / ширина врага

var iEnemyH = 128; / / враг высоте

var iBallSpeed ??= 10; / / начальная скорость шара

var iEnemySpeed ??= 2, / / начальная скорость врага

var dragonSound; // звук дракона

var wingsSound; // звук крыльев

var explodeSound, explodeSound2; // звук взрывов

var laughtSound; // звук крыльев

var bMouseDown = false; // состояние мыши

var iLastMouseX = 0;

var iLastMouseY = 0;

var iScore = 0;

// -------------------------------------------------------------

// objects :

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 Ball(x, y, w, h, speed, image) {

this.x = x;

this.y = y;

this.w = w;

this.h = h;

this.speed = speed;

this.image = image;

}

function Enemy(x, y, w, h, speed, image) {

this.x = x;

this.y = y;

this.w = w;

this.h = h;

this.speed = speed;

this.image = image;

}

// -------------------------------------------------------------

/ / Получить случайное число между X и Y

function getRand(x, y) {

return Math.floor(Math.random()*y)+x;

}

// / Рисуем функции:

function drawScene() { // основная функция DrawScene

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // очищаем холст

// draw background

iBgShiftX += 4;

if (iBgShiftX >= 1045) {

iBgShiftX = 0;

}

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); // Рисуем дополнения if (balls.length > 0) {

for (var key in balls) {

if (balls[key] != undefined) {

ctx.drawImage(balls[key].image, balls[key].x, balls[key].y);

balls[key].x += balls[key].speed;

if (balls[key].x > canvas.width) {

delete balls[key];

}

// Рисуем врагов

if (enemies.length > 0) {

for (var ekey in enemies) {

if (enemies[ekey] != undefined) {

ctx.drawImage(enemies[ekey].image, enemies[ekey].x, enemies[ekey].y);

enemies[ekey].x += enemies[ekey].speed;

if (enemies[ekey].x < - iEnemyW) { delete enemies[ekey]; / / Воспроизведения звука laughtSound.currentTime = 0; laughtSound.play(); } } } } / / Столкновений if (balls.length > 0) {

for (var key in balls) {

if (balls[key] != undefined) {

if (enemies.length > 0) {

for (var ekey in enemies) {

if (enemies[ekey] != undefined && balls[key] != undefined) {

if (balls[key].x + balls[key].w > enemies[ekey].x && balls[key].y + balls[key].h > enemies[ekey].y && balls[key].y < enemies[ekey].y + enemies[ekey].h) { delete enemies[ekey]; delete balls[key]; iScore++; / / Воспроизведения звука взрывов № 2 explodeSound2.currentTime = 0; explodeSound2.play(); } } } } } } } / / / / Рисуем счет ctx.font = '16px Verdana'; ctx.fillStyle = '#fff'; ctx.fillText('Score: ' + iScore * 10, 900, 580); ctx.fillText('Plese click "1" to cast fireball', 100, 580); } // ------------------------------------------------------------- / / Инициализация $(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.'); } / / Музыка "Дракон" init, dragonSound = new Audio('media/dragon.wav'); dragonSound.volume = 0.9; / Музыка / "смеемются" init, laughtSound = new Audio('media/laught.wav'); laughtSound.volume = 0.9; / / Звуки взрывов explodeSound = new Audio('media/explode1.wav'); explodeSound.volume = 0.9; explodeSound2 = new Audio('media/explosion.wav'); explodeSound2.volume = 0.9; // 'Звуки крыльев wingsSound = new Audio('media/wings.wav'); wingsSound.volume = 0.9; wingsSound.addEventListener('ended', function() { // loop wings sound this.currentTime = 0; this.play(); }, false); wingsSound.play(); // / / Инициализация шара var oBallImage = new Image(); oBallImage.src = 'images/fireball.png'; oBallImage.onload = function() { } // Инициализация врага var oEnemyImage = new Image(); oEnemyImage.src = 'images/enemy.png'; oEnemyImage.onload = function() { } // Инициализация дракона var oDragonImage = new Image(); oDragonImage.src = 'images/dragon.gif'; oDragonImage.onload = function() { dragon = new Dragon(400, 300, dragonW, dragonH, oDragonImage); } $('#scene').mousedown(function(e) { // обязательным событием MouseDown (для перетаскивания) 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) { // обязательные MouseMove событие var mouseX = e.layerX || 0; var mouseY = e.layerY || 0; if(e.originalEvent.layerX) { 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) { // обязательным событием MouseUp

dragon.bDrag = false;

bMouseDown = false;

// Воспроизведения звука дракона

dragonSound.currentTime = 0;

dragonSound.play();

});

$(window).keydown(function(event){ // сообщения для клавиатуры

switch (event.keyCode) {

case 49: // '1' key

balls.push(new Ball(dragon.x, dragon.y, 32, 32, iBallSpeed, oBallImage));

//Воспроизведения звука взрывов № 1

explodeSound.currentTime = 0;

explodeSound.play();

break;

}

});

setInterval(drawScene, 30); // цикл DrawScene

// Создаем врагов случайно

var enTimer = null;

function addEnemy() {

clearInterval(enTimer);

var randY = getRand(0, canvas.height - iEnemyH);

enemies.push(new Enemy(canvas.width, randY, iEnemyW, iEnemyH, - iEnemySpeed, oEnemyImage));

var interval = getRand(5000, 10000);

enTimer = setInterval(addEnemy, interval); // loop drawScene

}

addEnemy();

});

В начале мы добавили два новых объекта: огненный шар и врагов. Каждый объект имеет свой набор атрибутов (например, положение, размер изображения, скорость). После того, как мы добавили шары и врагов для нашей «DrawScene» функции .Кроме того, в нижней части этой функции вы можете увидеть метод обнаружения столкновений:

// Столкновения
if (balls.length > 0) {
    for (var key in balls) {
        if (balls[key] != undefined) {

            if (enemies.length > 0) {
                for (var ekey in enemies) {
                    if (enemies[ekey] != undefined && balls[key] != undefined) {
                        if (balls[key].x + balls[key].w > enemies[ekey].x && balls[key].y + balls[key].h > enemies[ekey].y && balls[key].y < enemies[ekey].y + enemies[ekey].h) {
                            delete enemies[ekey];
                            delete balls[key];
                            iScore++;

                            // Звуки #2
                            explodeSound2.currentTime = 0;
                            explodeSound2.play();
                        }
                    }
                }
            }
        }
    }
}

// Столкновения

if (balls.length > 0) {

for (var key in balls) {

if (balls[key] != undefined) {

if (enemies.length > 0) {

for (var ekey in enemies) {

if (enemies[ekey] != undefined && balls[key] != undefined) {

if (balls[key].x + balls[key].w > enemies[ekey].x && balls[key].y + balls[key].h > enemies[ekey].y && balls[key].y < enemies[ekey].y + enemies[ekey].h) {

delete enemies[ekey];

delete balls[key];

iScore++;

// Звуки #2

explodeSound2.currentTime = 0;

explodeSound2.play();

}

И, наконец, мы должны добавить нашиx врагов в случайном порядке:

// Создаем случайных врагов
var enTimer = null;
function addEnemy() {
    clearInterval(enTimer);

    var randY = getRand(0, canvas.height - iEnemyH);
    enemies.push(new Enemy(canvas.width, randY, iEnemyW, iEnemyH, - iEnemySpeed, oEnemyImage));

    var interval = getRand(5000, 10000);
    enTimer = setInterval(addEnemy, interval); // loop drawScene
}
addEnemy();

// Создаем случайных врагов

var enTimer = null;

function addEnemy() {

clearInterval(enTimer);

var randY = getRand(0, canvas.height - iEnemyH);

enemies.push(new Enemy(canvas.width, randY, iEnemyW, iEnemyH, - iEnemySpeed, oEnemyImage));

var interval = getRand(5000, 10000);

enTimer = setInterval(addEnemy, interval); // loop drawScene

}

addEnemy();

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Как создать мини-игру с помощью HTML5

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Как создать мини-игру с помощью HTML5

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи