我们继续这一系列文章，使用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游戏制作入门系列教程（五）
相关推荐
在本篇“html5游戏制作入门系列教程（三）”中，我们将深入探讨HTML5游戏开发的基本要素，以及如何利用这些元素创建一个简单的互动游戏。HTML5作为一种强大的Web开发语言，为游戏制作提供了新的可能性，尤其在移动...
HTML5游戏制作入门系列教程（一） HTML5作为现代网页技术的代表，为开发者提供了创建交互式、富媒体内容的强大工具。在这个入门系列教程中，我们将聚焦于如何使用HTML5来制作游戏，让读者逐步掌握游戏开发的基础...
《HTML5游戏制作入门系列教程（七）》 在这一篇教程中，我们将深入探讨HTML5游戏开发的基础知识，特别是如何利用HTML5的特性来创建交互式游戏。HTML5是现代网页开发的标准，其强大的Canvas API和WebGL使得在浏览器...
在“HTML5游戏制作入门系列教程（二）”中，我们将深入探讨HTML5技术如何用于创建引人入胜的游戏体验。HTML5作为一种强大的网页开发语言，不仅改进了原有的标记语言，还引入了许多新特性，使其成为游戏开发的新宠。...
【HTML5游戏制作入门系列教程（八）】是面向初学者的一份教程，旨在帮助学习者掌握使用HTML5技术制作游戏的基本技能。本教程可能是通过一个具体的实例或项目来逐步讲解，让学习者能实际动手操作，理解HTML5游戏开发...
HTML5游戏制作入门系列教程第四部分主要探讨了如何利用HTML5技术进行游戏开发，结合了源码和工具的使用，帮助初学者逐步掌握这一领域的基础知识。在这个教程中，我们可能会涉及以下几个关键知识点： 1. HTML5 ...
HTML5游戏制作入门系列教程（六）主要涵盖了利用HTML5技术进行游戏开发的基础知识和实践技巧。本教程可能包括以下几个核心知识点： 1. HTML5基础知识：HTML5是超文本标记语言的最新版本，它增强了对多媒体的支持，...
学习HTML语言.exe可能是这个教程的主程序或交互式学习平台，而其他文本文件（特别服务.txt、本站书籍制作章程.txt、书籍介绍.txt）可能包含了额外的信息，如教程的服务条款、制作过程的说明，以及书籍的详细介绍。...
缘正则表达式系列教程+例程源码【全套打包下载解压后3.7G】.rar 易语言辅助教程（爱易编程论坛讲师 24课+讲师：远航 9课+爱易编程论坛讲师：爱易、小Call 8课）.rar 时光论坛易语言全套教程【易语言零基础+易语言抓...
**SilverLight入门系列教程-1** SilverLight是微软推出的一款基于.NET Framework的浏览器插件，它主要用于构建丰富的、交互式的Web应用程序，特别是在多媒体、动画和图形处理方面具有强大的能力。本教程作为...
本教程旨在带你从零开始，逐步掌握HTML5的各项功能和应用，从而实现从入门到精通的过渡。 一、HTML5基础 HTML5的基础包括一系列新的标签、元素和API，它们旨在使网页结构更加清晰，内容更加语义化。例如，`<header>...
这个“HTML入门基础教程”旨在帮助初学者快速理解并掌握HTML的基本概念和语法，从而能够制作出自己的CHM电子书或者其他网页内容。 HTML由一系列元素组成，这些元素通过标签来定义。每个HTML元素都由开始标签和结束...
在网页制作中，HTML入门并不需要复杂的工具。实际上，一个最基本的文本编辑器如Windows的记事本或Linux的Pico，甚至是Mac的Simple Text，就足以开始你的HTML学习之旅。这些文本编辑器不会干扰你输入的内容，允许你...
本教程“HTML笔记,html零基础入门视频课程”是为初学者设计的一套系统学习资源，旨在帮助新手快速掌握HTML的基本概念和实际应用。 一、HTML基本结构 HTML文档由一系列的元素组成，这些元素通过标签来定义。每个HTML...
在“Web开发入门系列教程”中，我们主要探讨的是如何踏入Web开发的大门，这是一个针对初学者精心设计的教程集合。教程可能涵盖了从基础到进阶的各个环节，旨在帮助新手快速掌握网页制作的核心技能。虽然描述中没有...
《Html+Css+Javascript从入门到精通》是一本全面介绍了Web前端开发技术的教程。本书旨在帮助读者掌握Web开发的基础知识，并通过实践逐步深入理解HTML、CSS以及JavaScript这三种核心技术。以下是根据该书内容整理出的...
总的来说，"初学者从入门到精通网页制作实例教程"是一套全面的学习资源，涵盖了从互联网基础知识到HTML编程的各个方面。通过系统的理论学习与实践操作，你不仅可以掌握网页制作的基本技能，还能为将来深入学习...
这个"HTML教程软件（入门级）"显然旨在帮助初学者掌握这一基础的Web开发技术。下面将详细介绍HTML的一些核心概念、语法以及它在网页制作中的作用。 1. **HTML结构**：HTML文档由一系列元素组成，每个元素都有其特定...