HTML5 Game Development - Lesson 7
Join the DZone community and get the full member experience.
Join For FreeToday we will create our first complete game – Arkanoid. In this lesson I
will show you how to detect basic collisions and work with HTML5 local
storage. You can operate using mouse and keyboard (left/right
buttons). We will store in local storage the elapsed time of previous games
and the amount of broken bricks (points).
Here you can read our previous lesson: Developing Your First HTML5 Game – Lesson 6.
Here are our demo and downloadable packages:
Live Demo
download in package
Ok, download the example files and lets start coding !
Step 1. HTML
Here is the source code of our seventh lesson:
index.html
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>HTML5 Game Development - Lesson 7 | Script Tutorials</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 Game Development - Lesson 7</h2> <a href="http://www.script-tutorials.com/html5-game-development-lesson-7/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </header> <div class="container"> <canvas id="scene" width="800" height="600"></canvas> </div> </body> </html>
Step 2. CSS
Here are used CSS styles.
css/main.css
/* page layout styles */ *{ 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; }
Step 3. JS
js/jquery-1.5.2.min.js
We use jQuery for our lesson. Available in package. This file is the most important (here all our html5 functionality is located):
js/script.js
// 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)" class="wp-smiley"> - 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++; }
I added my comments anywhere, hope that all code is pretty understandable. Please pay attention to ‘localStorage’ object to understand how to work with HTML5 Local storage (I use ‘setItem’ method to store something and ‘getItem’ to read this from local storage). Also, it can be also interesting to understand how to calculate collisions between the ball and bricks.
Live Demo
download in package
Conclusion
Today, we made our first arkanoid game. Most functionality are already here. We have implemented our first knowledge about collisions and HTML5 local storage too. I will be glad to see your thanks and comments. Good luck!
Source: http://www.script-tutorials.com/html5-game-development-lesson-7/
Opinions expressed by DZone contributors are their own.
Comments