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 objectvar 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游戏制作入门系列教程(五)
html5游戏制作入门系列教程(五)相关推荐
- html5游戏制作入门系列教程(八)
今天,我已经准备了一个新的游戏 – SkyWalker.基本上 – 这是用飞飞行模拟射击类游戏.我们的目标到达终点线.这个游戏还有其它一些特点,例如使用飞机运动动画和爆炸动画,多按键处理(例如同时移动 ...
- html5游戏制作入门系列教程(七)
我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发.我们将要更新完善我们的第4课html5游戏制作入门系列教程(四)的游戏实例,并增加了火球,敌人和碰撞检测等功能模块.所以,现在我们的 ...
- html5游戏制作入门系列教程(六)
我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发.今天,我们将创建我们的第一个完整的游戏 – 打砖块.在这一课中,我会告诉你如何检测基本的碰撞和HTML5的本地存储.您可以使用鼠标和 ...
- html5游戏制作入门系列教程(四)
今天,我们继续一系列文章,使用HTML5的canvas组件进行游戏开发.今天我们要学习下元素:声音控制与动画.在我们的演示中,你会 看到一个飞龙.我们会听到持续的翅膀拍打的声音(我们将循环这个声音), ...
- html5游戏制作入门系列教程(三)
今天,我们继续一系列文章,使用HTML5的canvas组件进行游戏开发.接下来,我们将开始学习如何添加动画以及一些更有趣的功能.我 们的演示将包括一艘太空船飞越时空,并使用一个新的游戏元素 – 对话框 ...
- html5游戏制作入门系列教程(二)
今天,我们继续html5游戏制作入门系列的系列文章.今天,我们将继续基础知识(也许甚至是高级技巧的基础).我要告诉你如何具有渐变颜色填充对象,绘制文本,使用自定义的字体绘制文本,基本的动画,以及最重要 ...
- html5游戏制作入门系列教程(一)
从今天开始,我们将开始HTML5游戏开发一系列的文章.在我们的第一篇文章中,我们将讲解在画布canvas上的基础工作,创建简单的对象,填充和事件处理程序.另外,要注意在这个阶段中,我们不会立即学习We ...
- 快节奏多人在线游戏网络入门系列教程(1):简介
简介 该系列教程主要讨论快节奏多人在线游戏的网络相关的技术和算法.这是该系列教程的第一章,如果你对多人在线游戏有一定了解,可以跳过本章. 开发任何一款游戏都是一个挑战性的任务.而多人在线游戏增加了更多 ...
- 快节奏多人在线游戏网络入门系列教程(2):客户端预测与服务器协调
简介 在上一篇文章中,我们简单介绍了权威服务器的体系.客户端发送交互信息给服务器,服务器周期性的更新游戏状态,然后返回游戏状态给客户端. 这个简单体系会导致用户发送命令时和屏幕渲染响应之间的延迟.产生 ...
最新文章
- 黑马lavarel教程---5、模型操作(AR模式)
- 存储空间_Tan分享 存储空间清理
- 什么是T4级数据中心
- 京东JIMI用户未来意图预测技术揭秘
- NLPIR智能语义技术从采集到分析一步到位
- centos 安装jdk_Centos7下安装一个或多个tomcat7完整
- publiccms实现首页菜单栏下拉的方法
- java运行环境_Windows系统java运行环境配置 | 吴文辉博客
- 中断函数 printf_嵌入式中断服务函数的一些特点
- 【华为大咖分享】4.反脆弱,高效能组织的能力构建(后附PPT下载地址)
- IntelliJ IDEA 新版本又来了,修复严重 bug!
- springmvc自定义类型转换
- 【TWVRP】基于matlab A_star算法求解带时间窗和任务软时间窗多车场多车型车辆路径问题【含Matlab源码 1561期】
- 基于Java的贪吃蛇游戏设计(含免费可用源代码)
- MCSA / Windows Server 2016各版本的功能及比较,安装需求及选项
- vray铺装材质参数设计蓝海创意云渲染
- Tianchi×Datawhale 零基础信贷模型预测 task04
- TensorFlow学习笔记12----Creating Estimators in tf.contrib.learn
- 苹果三代耳机_p360 AirPods Pro 苹果三代耳机
- Java ~ Reference
热门文章
- 字符串处理 —— 单模式匹配 —— 朴素的字符串匹配算法(BF 算法)
- 43 WM配置-作业-库存盘点-定义每种存储类型的类型
- python tkinter库函数详解_Python使用tkinter库进行GUI编程中常用事件处理方式汇总
- 一起学习C语言:初步进入编程世界(一)
- 如何执行一段java代码_V8 之 如何执行一段 JavaSscript 代码
- KNN K近邻算法学习
- 中文select 加载完成后再排序
- 20180917 - 机器学习与线性回归
- Linux定时任务:crontab安装与检查
- html 页面数据显示溢出bug? - 提问篇