Приветствую Вас на 7 уроке HTML5. В этот раз мы создадим всем известную игру — арканоид. В этом уроке мы разберем, как следует определять столкновения объектов и как работать локальным хранилищем данных в HTML5. Управление будет реализовано с помощью мыши и клавиатуры (влево / вправо). В локальном хранилище будет находиться истекшее время предыдущей игры и количество битого кирпича.
С предыдущим уроком можно ознакомиться тут: Разработка игр на HTML5 — Урок 6
Шаг 1. HTML
index.html
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <title>Разработка игр на HTML5 — Урок 7 | officialplat-tt.ru</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.5.2.min.js"></script> <script src="js/script.js"></script> </head> <body> <header> <h2>Разработка игр на HTML5 — Урок 7</h2> <a href="http://officialplat-tt.ru/?p=1805" class="stuts">Вернуться обратно на <span>officialplat-tt.ru</span></a> </header> <div class="container"> <canvas id="scene" width="800" height="600"></canvas> </div> </body> </html>
Шаг 2. CSS
css/main.css
*{ margin:0; padding:0; } body { background-color:#eee; color:#fff; font:14px/1.3 Arial,sans-serif; } header { background-color:#212121; box-shadow: 0 -1px 2px #111111; display:block; height:70px; position:relative; width:100%; z-index:100; } header h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px; } header a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0; } header .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } .container { margin: 20px auto; overflow: hidden; position: relative; width: 800px; }
Шаг 3. JS
js/jquery-1.5.2.min.js
Как и в прошлые разы мы используем jQuery. Следующий файл содержит основной функционал:
js/script.js
// внутренние переменные var canvas, ctx; var iStart = 0; var bRightBut = false; var bLeftBut = false; var oBall, oPadd, oBricks; var aSounds = []; var iPoints = 0; var iGameTimer; var iElapsed = iMin = iSec = 0; var sLastTime, sLastPoints; // объекты : function Ball(x, y, dx, dy, r) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.r = r; } function Padd(x, w, h, img) { this.x = x; this.w = w; this.h = h; this.img = img; } function Bricks(w, h, r, c, p) { this.w = w; this.h = h; this.r = r; // строки this.c = c; // колонки this.p = p; // управляемая площадка this.objs; this.colors = ['#9d9d9d', '#f80207', '#feff01', '#0072ff', '#fc01fc', '#03fe03']; // цвет блоков } // ------------------------------------------------------------- // функции отрисовки : function clear() { // функция очистки canvas ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // заполнить фон ctx.fillStyle = '#111'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); } function drawScene() { // функция отрисовки сцены clear(); // очистить canvas // отрисовка шарика (окружности) ctx.fillStyle = '#f66'; ctx.beginPath(); ctx.arc(oBall.x, oBall.y, oBall.r, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); if (bRightBut) oPadd.x += 5; else if (bLeftBut) oPadd.x -= 5; // отрисовука площадки (прямоугольник) ctx.drawImage(oPadd.img, oPadd.x, ctx.canvas.height - oPadd.h); // отрисовка блоков (из массива объектов) for (i=0; i < oBricks.r; i++) { ctx.fillStyle = oBricks.colors[i]; for (j=0; j < oBricks.c; j++) { if (oBricks.objs[i][j] == 1) { ctx.beginPath(); ctx.rect((j * (oBricks.w + oBricks.p)) + oBricks.p, (i * (oBricks.h + oBricks.p)) + oBricks.p, oBricks.w, oBricks.h); ctx.closePath(); ctx.fill(); } } } // обнаружение столкновения iRowH = oBricks.h + oBricks.p; iRow = Math.floor(oBall.y / iRowH); iCol = Math.floor(oBall.x / (oBricks.w + oBricks.p)); // отмечаем блок, как уничтоженный и изменяем направление шара if (oBall.y < oBricks.r * iRowH && iRow >= 0 && iCol >= 0 && oBricks.objs[iRow][iCol] == 1) { oBricks.objs[iRow][iCol] = 0; oBall.dy = -oBall.dy; iPoints++; aSounds[0].play(); // воспроизведения звука } // изменение X координаты шара if (oBall.x + oBall.dx + oBall.r > ctx.canvas.width || oBall.x + oBall.dx - oBall.r < 0) { oBall.dx = -oBall.dx; } if (oBall.y + oBall.dy - oBall.r < 0) { oBall.dy = -oBall.dy; } else if (oBall.y + oBall.dy + oBall.r > ctx.canvas.height - oPadd.h) { if (oBall.x > oPadd.x && oBall.x < oPadd.x + oPadd.w) { oBall.dx = 10 * ((oBall.x-(oPadd.x+oPadd.w/2))/oPadd.w); oBall.dy = -oBall.dy; aSounds[2].play(); // воспроизведения звука } else if (oBall.y + oBall.dy + oBall.r > ctx.canvas.height) { clearInterval(iStart); clearInterval(iGameTimer); // сохранение данных в локльное хранилище HTML5 localStorage.setItem('last-time', iMin + ':' + iSec); localStorage.setItem('last-points', iPoints); aSounds[1].play(); // воспроизведения звука } } oBall.x += oBall.dx; oBall.y += oBall.dy; ctx.font = '16px Verdana'; ctx.fillStyle = '#fff'; iMin = Math.floor(iElapsed / 60); iSec = iElapsed % 60; if (iMin < 10) iMin = "0" + iMin; if (iSec < 10) iSec = "0" + iSec; ctx.fillText('Time: ' + iMin + ':' + iSec, 600, 520); ctx.fillText('Points: ' + iPoints, 600, 550); if (sLastTime != null && sLastPoints != null) { ctx.fillText('Last Time: ' + sLastTime, 600, 460); ctx.fillText('Last Points: ' + sLastPoints, 600, 490); } } // инициализация $(function(){ canvas = document.getElementById('scene'); ctx = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; var padImg = new Image(); padImg.src = 'images/padd.png'; padImg.onload = function() {}; oBall = new Ball(width / 2, 550, 0.5, -5, 10); // новый объект шар oPadd = new Padd(width / 2, 120, 20, padImg); // новый объект площадка oBricks = new Bricks((width / 8) - 1, 20, 6, 8, 2); // новый объект блок oBricks.objs = new Array(oBricks.r); // заполнение блоков for (i=0; i < oBricks.r; i++) { oBricks.objs[i] = new Array(oBricks.c); for (j=0; j < oBricks.c; j++) { oBricks.objs[i][j] = 1; } } aSounds[0] = new Audio('media/snd1.wav'); aSounds[0].volume = 0.9; aSounds[1] = new Audio('media/snd2.wav'); aSounds[1].volume = 0.9; aSounds[2] = new Audio('media/snd3.wav'); aSounds[2].volume = 0.9; iStart = setInterval(drawScene, 10); // отрисовка сцены iGameTimer = setInterval(countTimer, 1000); // игровой таймер // получение данных из локального хранилища sLastTime = localStorage.getItem('last-time'); sLastPoints = localStorage.getItem('last-points'); $(window).keydown(function(event){ // бработчик события нажатия клавиш switch (event.keyCode) { case 37: // 'Лево' bLeftBut = true; break; case 39: // 'Право' bRightBut = true; break; } }); $(window).keyup(function(event){ // бработчик события отжатия клавиш switch (event.keyCode) { case 37: // 'Лево' bLeftBut = false; break; case 39: // 'Право' bRightBut = false; break; } }); var iCanvX1 = $(canvas).offset().left; var iCanvX2 = iCanvX1 + width; $('#scene').mousemove(function(e) { // обработчик события движения мыши if (e.pageX > iCanvX1 && e.pageX < iCanvX2) { oPadd.x = Math.max(e.pageX - iCanvX1 - (oPadd.w/2), 0); oPadd.x = Math.min(ctx.canvas.width - oPadd.w, oPadd.x); } }); }); function countTimer() { iElapsed++; }
Я оставил комментарии в коде, чтобы было понятнее. Обратите внимание на объект «localStorage», для сохранения данных я использую метод «SetItem», а для чтения из локального хранилища «GetItem». Так же обратите внимание на то, как рассчитываются столкновения между шаром и кирпичом.
Итог
Сегодня мы сделали игру Арканоид! Большая часть функционала уже присутствует в ней. Мы научились использовать локальное хранилище данных в HTML5 и рассчитывать столкновения объектов. Я буду рад если Вы поделитесь ссылкой на этот урок со своими друзьями и оставите комментарии. Удачи!
Получайте новые статьи блога прямо себе на почту
Супер, мне понрвилась сама игра и задумка)) круто) давайте ещё уроки:)
очень доступна , доходчиво , интересно
Отлично! Очень интересно!