我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发。我们将要更新完善我们的第4课html5游戏制作入门系列教程(四)的游戏实例,并增加了火球,敌人和碰撞检测等功能模块。所以,现在我们的飞龙可以施放火球来杀死敌人(还有成绩统计)。现在,这个游戏的互动性更强了。你可以点击这里阅读这一系列教程的前一篇文章:html5游戏制作入门系列教程(六)。我们将基于之前的程序和代码进行开发。 这里有我们的演示和下载包: 在线演示 源码下载 好吧,下载所需文件,让我们开始编码! 步骤1:HTML…
April 29, 2015
html5游戏制作入门系列教程(五)
我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发。今天,这是相当完整的游戏例子 – 它会回顾经典的旧电脑游戏 – 坦克大战。我会教你使用阵列地图并教你如何检测活动对象(坦克)与环境(基于阵列的地图)的碰撞。
你可以点击这里阅读这一系列教程的前一篇文章: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=330" 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
今天就不把css样式贴出来了,和以前的一样,没有什么特别之处。你可以在下载包里找到它。
步骤3:JS
js/script.js
// inner variables var canvas, context; // canvas and context objects var imgBrick, imgSteel, imgWater, imgForest, imgTank; // images var aMap; // map array var oTank; // tank object var iCellSize = 24; // cell wide var iXCnt = 26; // amount of X cells var iYCnt = 26; // amount of Y cells // objects : function Tank(x, y, w, h, image) { this.x = x; this.y = y; this.w = w; this.h = h; this.i = 0; this.image = image; } // functions function clear() { // clear canvas function context.clearRect(0, 0, canvas.width, canvas.height); } function drawScene() { // main drawScene function clear(); // clear canvas // fill background context.fillStyle = '#111'; context.fillRect(0, 0, canvas.width, canvas.height); // save current context context.save(); // walk through our array for (var y = 0; y < iYCnt; y++) { for (var x = 0; x < iXCnt; x++) { switch (aMap[y][x]) { case 0: // skip break; case 1: // draw brick block context.drawImage(imgBrick, 0, 0, iCellSize, iCellSize, x*iCellSize, y*iCellSize, iCellSize, iCellSize); break; case 2: // draw steel block context.drawImage(imgSteel, 0, 0, iCellSize, iCellSize, x*iCellSize, y*iCellSize, iCellSize, iCellSize); break; case 3: // draw forest block context.drawImage(imgForest, 0, 0, iCellSize, iCellSize, x*iCellSize, y*iCellSize, iCellSize, iCellSize); break; case 4: // draw water block context.drawImage(imgWater, 0, 0, iCellSize, iCellSize, x*iCellSize, y*iCellSize, iCellSize, iCellSize); break; } } } // restore current context context.restore(); // draw tank context.drawImage(oTank.image, oTank.i*oTank.w, 0, oTank.w, oTank.h, oTank.x, oTank.y, oTank.w, oTank.h); } // ------------------------------------------------------------- // initialization $(function(){ canvas = document.getElementById('scene'); canvas.width = iXCnt * iCellSize; canvas.height = iYCnt * iCellSize; context = canvas.getContext('2d'); // main scene Map array aMap = ([ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0], [0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 4, 4, 4, 4, 1, 1, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0], [0, 0, 0, 0, 4, 4, 4, 4, 1, 1, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 1, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 1, 1, 0, 0, 0, 0], [0, 0, 2, 2, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 2, 2, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [3, 3, 3, 3, 1, 1, 0, 0, 4, 4, 4, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0], [3, 3, 3, 3, 1, 1, 0, 0, 4, 4, 4, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0], [3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 2, 2], [3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 2, 2], [0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [2, 2, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 0, 0, 1, 1, 0, 0], [2, 2, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 0, 0, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0], [0, 0, 0, 0, 0, 0, 2, 2, 3, 3, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0], [0, 0, 0, 0, 0, 0, 2, 2, 3, 3, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0], [0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 2, 2, 0, 0, 0, 0], [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 2, 2, 0, 0, 0, 0] ]); // load images imgBrick = new Image(); imgBrick.src = 'images/brick.png'; imgSteel = new Image(); imgSteel.src = 'images/steel.png'; imgWater = new Image(); imgWater.src = 'images/water.png'; imgForest = new Image(); imgForest.src = 'images/forest.png'; imgTank = new Image(); imgTank.src = 'images/tank.png'; oTank = new Tank(iCellSize*9, iCellSize*24, 48, 48, imgTank); $(window).keydown(function(event){ // keyboard alerts switch (event.keyCode) { case 38: // Up key oTank.i = 2; // checking collisions var iCurCelX = (2 * oTank.x) / 48; var iCurCelY = (2 * oTank.y) / 48; if (iCurCelY) { var iTest1 = aMap[iCurCelY-1][iCurCelX]; var iTest2 = aMap[iCurCelY-1][iCurCelX+1]; if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) { oTank.y-=24; if (oTank.y < 0) { oTank.y = 0; } } } break; case 40: // Down key oTank.i = 3; // checking collisions var iCurCelX = (2 * oTank.x) / 48; var iCurCelY = (2 * oTank.y) / 48; if (iCurCelY+2 < iYCnt) { var iTest1 = aMap[iCurCelY+2][iCurCelX]; var iTest2 = aMap[iCurCelY+2][iCurCelX+1]; if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) { oTank.y+=24; if (oTank.y > 576) { //iCellSize * (iYCnt-2) oTank.y = 576; } } } break; case 37: // Left key oTank.i = 1; // checking collisions var iCurCelX = (2 * oTank.x) / 48; var iCurCelY = (2 * oTank.y) / 48; var iTest1 = aMap[iCurCelY][iCurCelX-1]; var iTest2 = aMap[iCurCelY+1][iCurCelX-1]; if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) { oTank.x-=24; if (oTank.x < 0) { oTank.x = 0; } } break; case 39: // Right key oTank.i = 0; // checking collisions var iCurCelX = (2 * oTank.x) / 48; var iCurCelY = (2 * oTank.y) / 48; var iTest1 = aMap[iCurCelY][iCurCelX+2]; var iTest2 = aMap[iCurCelY+1][iCurCelX+2]; if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) { oTank.x+=24; if (oTank.x > 576) { //iCellSize * (iXCnt-2) oTank.x = 576; } } break; } }); setInterval(drawScene, 40); // loop drawScene });