我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发。我们将要更新完善我们的第4课html5游戏制作入门系列教程(四)的游戏实例,并增加了火球,敌人和碰撞检测等功能模块。所以,现在我们的飞龙可以施放火球来杀死敌人(还有成绩统计)。现在,这个游戏的互动性更强了。你可以点击这里阅读这一系列教程的前一篇文章:html5游戏制作入门系列教程(六)。我们将基于之前的程序和代码进行开发。 这里有我们的演示和下载包: 在线演示 源码下载 好吧,下载所需文件,让我们开始编码! 步骤1:HTML…
April 29, 2015
html5游戏制作入门系列教程(六)
我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发。今天,我们将创建我们的第一个完整的游戏 – 打砖块。在这一课中,我会告诉你如何检测基本的碰撞和HTML5的本地存储。您可以使用鼠标和键盘(左/右按钮)来操作垫拍左右运动。我们将html5本 地存储技术存储经过历史的游戏时间和碎砖(点)的数据。
这里有我们的演示和下载包:
好吧,下载所需文件,让我们开始编码!
步骤1: HTML
这里是我演示的HTML,非常简单,对不对?
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>html5游戏制作入门系列教程(六)</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游戏制作入门系列教程(六)</h2> <a href="http://html5gamedev.org/?p=337" class="stuts">返回原文<span>HTML5GAME</span></a> </header> <div class="container"> <canvas id="scene" width="800" height="600"></canvas> </div> </body> </html>
步骤2:CSS
下面是使用CSS样式。
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; }
步骤3:JS
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++; }
我为主要的代码添加了注释,希望代码是容易理解的。请注意“的localStorage对象,以了解如何使用HTML5本地存储(我使用’SetItem的方法来存储的数据,使用’getItem方法’来读取本地存储的数据)。
结论
超级酷,不是吗?我会很高兴看到您的评论和意见。祝你好运!
转载请注明:HTML5游戏开发者社区 » html5游戏制作入门系列教程(六)