Block breaker: мини-игра с помощью HTML5
Новые технологии не стоят на месте. с каждым днем можно встретить новые, креативные подходы к выполнению той или иной задачи. Если вы еще с времен прошлого века, то наверняка помните удивительную игру которая покорила сердца миллионов, а именно block breaker, главной целью которой было сбить блоки специальным шариком, который отскакивал от стенок тем самым менял траекторию полета. Вариантов данной игры достаточно много, но еще не было варианта данной казуалки созданной с помощью html5.
В данном уроке мы рассмотрим как создать мини-игру Block breaker при помощи html5. При помощи данной игры мы продемонстрируем возможности js и не только. И так, приступим.
Шаг 1. HTML
Для начала мы рассмотрим разметку, в которой мы подключим все необходимые скрипты и создадим контейнер с данной игрой, при этом мы зададим относительные параметры окна:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html lang="en" > <head> <meta charset="utf-8" /> <title>Block breaker: мини-игра с помощью HTML5 | Демонстрация для сайта RUDEBOX</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> <div class="container"> <canvas id="scene" width="800" height="600"></canvas> </div> </body> </html> |
Как вы заметили в разметке ничего сложного нет, далее мы рассмотрим стили.
Шаг 2. 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 |
*{ 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. JavaScript
Завершающим этапом будут скрипты, в которых мы будем создать отсчет времени с помощью параметра iSec, так же зададим подписи о счете и лучшем результате с помощью ctx.fillText, зададим цветовую гамму для полосок, скорость анимации шарика и манипуляций мышью.
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 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 |
// inner variables 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; // objects : 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; // rows this.c = c; // cols this.p = p; // padd this.objs; this.colors = ['#9d9d9d', '#f80207', '#feff01', '#0072ff', '#fc01fc', '#03fe03']; // colors for rows } // ------------------------------------------------------------- // draw functions : function clear() { // clear canvas function ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // fill background ctx.fillStyle = '#111'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); } function drawScene() { // main drawScene function clear(); // clear canvas // draw Ball (circle) 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; // draw Padd (rectangle) ctx.drawImage(oPadd.img, oPadd.x, ctx.canvas.height - oPadd.h); // draw bricks (from array of its objects) 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(); } } } // collision detection iRowH = oBricks.h + oBricks.p; iRow = Math.floor(oBall.y / iRowH); iCol = Math.floor(oBall.x / (oBricks.w + oBricks.p)); // mark brick as broken (empty) and reverse brick 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(); // play sound } // reverse X position of ball 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(); // play sound } else if (oBall.y + oBall.dy + oBall.r > ctx.canvas.height) { clearInterval(iStart); clearInterval(iGameTimer); // HTML5 Local storage - save values localStorage.setItem('last-time', iMin + ':' + iSec); localStorage.setItem('last-points', iPoints); aSounds[1].play(); // play sound } } 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); } } // initialization $(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); // new ball object oPadd = new Padd(width / 2, 120, 20, padImg); // new padd object oBricks = new Bricks((width / <img src="http://www.script-tutorials.com/wp-includes/images/smilies/icon_cool.gif" alt="8)"> - 1, 20, 6, 8, 2); // new bricks object oBricks.objs = new Array(oBricks.r); // fill-in bricks 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); // loop drawScene iGameTimer = setInterval(countTimer, 1000); // inner game timer // HTML5 Local storage - get values sLastTime = localStorage.getItem('last-time'); sLastPoints = localStorage.getItem('last-points'); $(window).keydown(function(event){ // keyboard-down alerts switch (event.keyCode) { case 37: // 'Left' key bLeftBut = true; break; case 39: // 'Right' key bRightBut = true; break; } }); $(window).keyup(function(event){ // keyboard-up alerts switch (event.keyCode) { case 37: // 'Left' key bLeftBut = false; break; case 39: // 'Right' key bRightBut = false; break; } }); var iCanvX1 = $(canvas).offset().left; var iCanvX2 = iCanvX1 + width; $('#scene').mousemove(function(e) { // binding mousemove event 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++; } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 07.08.2012 в 18:08, в категории Интересно. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |