Как создать мини-игру с помощью HTML5
Новые технологии предназначены не только для создания красочного веб-дизайна, но с помощью их можно создать занимательные развлечения. И в самом деле, надо же когда-нибудь отдыхать и немного развлекаться. В данном уроке мы рассмотрим как создать простую игру с помощью html5. Суть игры состоит в том, что объекты движутся с различной скоростью, на вас, при этом есть возможность уклоняться используя курсор мыши. Также предоставляется возможность отстреливаться от врага. Все это представлено в шуточной форме, и все достаточно примитивно.
Для начала мы рассмотрим разметку с помощью HTML, в которой подключим некоторые скрипты, также будем использовать некоторые плагины с репозитория google, чтобы сократить загрузку игры.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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> |
На стилях CSS мы не будем останавливаться, в стилях находится макет страницы, ничего интересного. Их можно просмотреть в исходниках.
Теперь рассмотрим скрипты, практически каждый параметр подписан в коде, в нем мы будем подключать звуковое сопровождение, скорость передвижение, и многое другое..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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» функции .Кроме того, в нижней части этой функции вы можете увидеть метод обнаружения столкновений:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// Столкновения 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 врагов в случайном порядке:
1 2 3 4 5 6 7 8 9 10 11 12 |
// Создаем случайных врагов 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(); |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 20.05.2012 в 14:20, в категории Интересно. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |