HTML5游戏开发系列教程6(译)

原文地址：http://www.script-tutorials.com/html5-game-development-lesson-6/

这是我们最新一篇HTML5游戏开发系列文章。我们将继续使用canvas来进行HTML5游戏开发系列的文章。这次是个完整的游戏例子，再现一款经典的电脑游戏--坦克大战。我将教你们使用交替的数组地图(alternative array-maps)，同时将说明如何检测活动对象(坦克)和周围环境之间的碰撞。

前一篇的的介绍在HTML5游戏开发系列教程5(译)。

第一步：HTML

index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>HTML5 Game Development - Lesson 6 | Script Tutorials</title>
 6         <link href="css/main.css" rel="stylesheet" type="text/css" />
 7         <script src="js/jquery-2.0.0.min.js"></script>
 8         <script src="js/script.js"></script>
 9     </head>
10     <body>
11         <header>
12             <h2>HTML5 Game Development - Lesson 6</h2>
13             <a href="http://www.script-tutorials.com/html5-game-development-lesson-6/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
14         </header>
15         <div class="container">
16             <canvas id="scene" width="800" height="600"></canvas>
17         </div>
18     </body>
19 </html>

第二步：CSS

css/main.css

我将不会把css文件内容发布出来，css文件里面仅仅是一些页面的层叠样式，你可以在源代码包中找到该文件。

第三步：JS

js/jquery-2.0.0.min.js(原文是1.5.2版本)

我们的代码使用了JQuery。JQuery文件在源代码包中。下面的js文件是最重要的对于我们的游戏，因为它实现了我们游戏所有的逻辑。

js/script.js

  1 //内部变量
  2 var canvas, context;   //画布和其上下文对象
  3 var imgBrick, imgSteel, imgWater, imgForest, imgTank;  //各种实体的图片
  4 var aMap;  //地图数组
  5 var oTank;  //坦克对象
  6 
  7 var iCellSize = 24;  //地图单元格的大小
  8 var iXCnt = 26;
  9 var iYCnt = 26;
 10 
 11 /**
 12 * x: 坦克左上角x轴坐标
 13 * y: 坦克左上角y轴坐标
 14 * w: 坦克宽度
 15 * h: 坦克高度
 16 * image: 坦克图片
 17 */
 18 function Tank(x, y, w, h, image) {
 19     this.x = x;
 20     this.y = y;
 21     this.w = w;
 22     this.h = h;
 23     this.i = 0;
 24     this.image = image;
 25 }
 26 
 27 // 清除画布
 28 function clear() {
 29     context.clearRect(0, 0, canvas.width, canvas.height)
 30 }
 31 
 32 //重绘画布
 33 function drawScene() {
 34     clear();
 35     
 36     //填充背景
 37     context.fillStyle = '#111';
 38     context.fillRect(0, 0, canvas.width, canvas.height);
 39 
 40     context.save();
 41 
 42     //画障碍物
 43     for (var y = 0; y < iYCnt; y++) {
 44         for (var x = 0; x < iXCnt; x++) {
 45             switch (aMap[y][x]) {
 46                 case 0:
 47                     break;
 48                 case 1:
 49                     context.drawImage(imgBrick, 0, 0, iCellSize, iCellSize, x * iCellSize, y * iCellSize, iCellSize, iCellSize);
 50                     break;
 51                 case 2:
 52                     context.drawImage(imgSteel, 0, 0, iCellSize, iCellSize, x * iCellSize, y * iCellSize, iCellSize, iCellSize);
 53                     break;
 54                 case 3:
 55                     context.drawImage(imgForest, 0, 0, iCellSize, iCellSize, x * iCellSize, y * iCellSize, iCellSize, iCellSize);
 56                     break;
 57                 case 4:
 58                     context.drawImage(imgWater, 0, 0, iCellSize, iCellSize, x * iCellSize, y * iCellSize, iCellSize, iCellSize);
 59                     break;
 60             }
 61         }
 62     }
 63 
 64     context.restore();
 65 
 66     //画坦克 这里可以看出坦克占4个单元格
 67     context.drawImage(oTank.image, oTank.i * oTank.w, 0, oTank.w, oTank.h, oTank.x, oTank.y, oTank.w, oTank.h);
 68 }
 69 
 70 $(function() {
 71     canvas = document.getElementById('scene');
 72     canvas.width = iXCnt * iCellSize;
 73     canvas.height = iYCnt * iCellSize;
 74     context = canvas.getContext('2d');
 75 
 76     aMap = ([
 77           [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],
 78           [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],
 79           [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],
 80           [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],
 81           [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],
 82           [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],
 83           [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],
 84           [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],
 85           [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],
 86           [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],
 87           [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],
 88           [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],
 89           [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],
 90           [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],
 91           [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],
 92           [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],
 93           [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],
 94           [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],
 95           [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],
 96           [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],
 97           [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],
 98           [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],
 99           [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],
100           [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],
101           [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],
102           [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]
103     ]);
104 
105     //加载各个障碍物图片
106     imgBrick = new Image();
107     imgBrick.src = 'images/brick.png';
108     imgSteel = new Image();
109     imgSteel.src = 'images/steel.png';
110     imgWater = new Image();
111     imgWater.src = 'images/water.png';
112     imgForest = new Image();
113     imgForest.src = 'images/forest.png';
114 
115     //初始化坦克
116     imgTank = new Image();
117     imgTank.src = 'images/tank.png';
118     oTank = new Tank(iCellSize * 9, iCellSize * 24, 48, 48, imgTank);
119 
120     $(window).keydown(function(event) {
121         switch (event.keyCode) {
122             case 38:  // up key
123                 oTank.i = 2;
124 
125                 //碰撞检测
126                 var iCurCelX = (2 * oTank.x) / 48;  //得出目前坦克左上角所在的单元格
127                 var iCurCelY = (2 * oTank.y) / 48;
128                 if (iCurCelY) {
129                     var iTest1 = aMap[iCurCelY - 1][iCurCelX];
130                     var iTest2 = aMap[iCurCelY - 1][iCurCelX + 1];
131 
132                     if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) {
133                         oTank.y -= 24;
134                         if (oTank.y < 0) {
135                             oTank.y = 0;
136                         }
137                     }
138                 }
139                 break;
140             case 40:  //Down key
141                 oTank.i = 3;
142                 
143                 var iCurCelX = (2 * oTank.x) / 48;
144                 var iCurCelY = (2 * oTank.y) / 48;
145                 if (iCurCelY + 2 < iYCnt) {
146                     var iTest1 = aMap[iCurCelY + 2][iCurCelX];
147                     var iTest2 = aMap[iCurCelY + 2][iCurCelX + 1];
148 
149                     if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) {
150                         oTank.y += 24;
151                         if (oTank.y > 576) {  //576 = iCellSize * (iYCnt - 2)
152                             oTank.y = 576;
153                         }
154                     }
155                 }
156                 break;
157             case 37:   // Left key
158                 oTank.i = 1;
159 
160                 var iCurCelX = (2 * oTank.x) / 48;
161                 var iCurCelY = (2 * oTank.y) / 48;
162                 var iTest1 = aMap[iCurCelY][iCurCelX - 1];
163                 var iTest2 = aMap[iCurCelY + 1][iCurCelX - 1];
164 
165                 if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) {
166                     oTank.x -= 24;
167                     if (oTank.x < 0) {
168                         oTank.x = 0;
169                     }
170                 }
171                 break;
172             case 39:  //Right key
173                 oTank.i = 0;
174                 
175                 var iCurCelX = (2 * oTank.x) / 48;
176                 var iCurCelY = (2 * oTank.y) / 48;
177                 var iTest1 = aMap[iCurCelY][iCurCelX + 2];
178                 var iTest2 = aMap[iCurCelY + 1][iCurCelX + 2];
179 
180                 if ((iTest1 == 0 || iTest1 == 3) && (iTest2 == 0 || iTest2 == 3)) {
181                     oTank.x += 24;
182                     if (oTank.x > 576) {
183                         oTank.x = 576;
184                     }
185                 }
186                 break;
187         }
188     });
189     setInterval(drawScene, 40);
190 });

我在很多地方加上了注释，依此希望这代码是容易理解的。

结论：

这次我们开发了一个完整的HTML5的游戏--坦克大战。我非常乐意看见你的谢意和评论。好运！