我们继续这一系列文章,使用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 });
结论
超级酷,不是吗?我会很高兴看到您的评论和意见。祝你好运!
转载请注明:HTML5游戏开发者社区 » html5游戏制作入门系列教程(五)
相关推荐
NULL 博文链接:https://justcoding.iteye.com/blog/2166578
NULL 博文链接:https://justcoding.iteye.com/blog/2166576
NULL 博文链接:https://justcoding.iteye.com/blog/2166903
NULL 博文链接:https://justcoding.iteye.com/blog/2166906
NULL 博文链接:https://justcoding.iteye.com/blog/2166907
NULL 博文链接:https://justcoding.iteye.com/blog/2166905
NULL 博文链接:https://justcoding.iteye.com/blog/2166577
Dreamweaver8 基础入门教程,TeliuTe系列教程之Dreamweaver8基础入门,一步一步教你学会Dreamweaver网页设计。 使用说明:解压后,请使用IE打开index.html即可。 1. 学习平台为Dreamweaver 8.0 中文版; 2. 本软件...
本套 《HTML5 零基础入门课程》,是专门面向未来的 web 开发人员打造的入门课程,零基础即可学习,从最简单的标签,一一讲解,不再纠结老式的 HTML4、XHTML1.0 的规范,直接上手 HTML5。为以后学习更深入的 web 开发...
系列文章 https://www.cnblogs.com/densen2014/p/16027851.html Blazor入门100天 演示地址:https://blazor.app1.es 1.使用JS隔离封装viewerjs库 2.使用JS隔离制作手写签名组件 3.使用JS隔离封装ZXing扫码 4.使用JS...
网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp(2000)的光盘,安装时候选R,修复! Windows XP(包括 Windows 2000)的控制台命令是在系统出现一些意外情况下的一种非常有效的...
HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,...
5-4-4 设定图表的数据系列格式 5-5 关于窗体与数据输入的二三事 自我突破练习 第6章 无人能敌的数据查询 6-1 数据记录的排序技巧 6-1-1 设置升序或降序排序 6-1-2 使用筛选窗口设置排序方式 6-1-3 取消和应用...
5-4-4 设定图表的数据系列格式 5-5 关于窗体与数据输入的二三事 自我突破练习 第6章 无人能敌的数据查询 6-1 数据记录的排序技巧 6-1-1 设置升序或降序排序 6-1-2 使用筛选窗口设置排序方式 6-1-3 取消和应用...
你只需要30分钟就可以将PHP的核心语言特点全部掌握,你可能已经非常了解HTML,甚至你已经知道怎样用编辑设计软件或者手工来制作好看的WEB站点。由于PHP代码能够无障碍的添加进你的站点,在你设计和维护站点的同时,...
在写作的同时我参考了网上jQuery的系列教程文章, 在博客园和Google上并没有找到让我满意的系列教程. 我喜欢将知识系统的,深入浅出的讲解.不喜欢写那种"学习笔记"式的文章. 同时本系列将很快全部写完(有工作压力就是...
常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试 在C#里把ArrayList转换为Array 或 把Array转换为ArrayList C# 2.0 在.NET 2.0中,让你的组件也可以绑定 .NET20 一种简单的窗口控件UI状态控制方法 翻译MSDN...