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

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

今天我们将完成我们第一个完整的游戏--打砖块。这次教程中，将展示怎样进行基本的碰撞检测和使用HTML5的本地存储。你可以使用鼠标和键盘来操作挡板，上一次游戏的持续时间和分数将会保存。

第一步：HTML

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>HTML5 Game Development - Lesson 7 | 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 7</h2>
13             <a href="http://www.script-tutorials.com/html5-game-development-lesson-7/" 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样式文件

css/main.css

 1 /* page layout styles */
 2 *{
 3     margin:0;
 4     padding:0;
 5 }
 6 body {
 7     background-color:#eee;
 8     color:#fff;
 9     font:14px/1.3 Arial,sans-serif;
10 }
11 header {
12     background-color:#212121;
13     box-shadow: 0 -1px 2px #111111;
14     display:block;
15     height:70px;
16     position:relative;
17     width:100%;
18     z-index:100;
19 }
20 header h2{
21     font-size:22px;
22     font-weight:normal;
23     left:50%;
24     margin-left:-400px;
25     padding:22px 0;
26     position:absolute;
27     width:540px;
28 }
29 header a.stuts,a.stuts:visited{
30     border:none;
31     text-decoration:none;
32     color:#fcfcfc;
33     font-size:14px;
34     left:50%;
35     line-height:31px;
36     margin:23px 0 0 110px;
37     position:absolute;
38     top:0;
39 }
40 header .stuts span {
41     font-size:22px;
42     font-weight:bold;
43     margin-left:5px;
44 }
45 .container {
46     margin: 20px auto;
47     overflow: hidden;
48     position: relative;
49     width: 800px;
50 }

第三步：JS

js/jquery-2.0.0.min.js (原文使用的是jquery-1.5.2.min.js)

js/script.js

  1 //内部变量
  2 var canvas, ctx;
  3 
  4 var iStart = 0;
  5 var bRightBut = false;
  6 var bLeftBut = false;
  7 var oBall, oPadd, oBricks;
  8 var aSounds = [];
  9 var iPoints = 0;
 10 var iGameTimer;
 11 var iElapsed = iMin = iSec = 0;
 12 var sLastTime, sLastPoints;
 13 
 14 /**
 15 * @brief    球体对象
 16 *
 17 * @param    x   横坐标
 18 * @param    y   纵坐标
 19 * @param    dx  横坐标将要移动的距离 
 20 * @param    dy  纵坐标将要移动的距离
 21 * @param    r   半径
 22 *
 23 * @return   
 24 */
 25 function Ball(x, y, dx, dy, r) {
 26     this.x = x;
 27     this.y = y;
 28     this.dx = dx;
 29     this.dy = dy;
 30     this.r = r;
 31 }
 32 
 33 /**
 34 * @brief   挡板对象 
 35 *
 36 * @param    x   横坐标--纵坐标固定的
 37 * @param    w   宽端
 38 * @param    h   高度
 39 * @param    img 图片
 40 *
 41 * @return   
 42 */
 43 function Padd(x, w, h, img) {
 44     this.x = x;
 45     this.w = w;
 46     this.h = h;
 47     this.img = img;
 48 }
 49 
 50 /**
 51 * @brief    砖块对象
 52 *
 53 * @param    w   宽度
 54 * @param    h   高度
 55 * @param    r   row 第几排 
 56 * @param    c   column  第几列
 57 * @param    p   砖块之间的间隙
 58 *
 59 * @return   
 60 */
 61 function Bricks(w, h, r, c, p) {
 62     this.w = w;
 63     this.h = h;
 64     this.r = r;
 65     this.c = c;
 66     this.p = p;
 67     this.objs;
 68     this.colors = ['#9d9d9d', '#f80207', '#feff01', '#0072ff', '#fc01fc', '#03fe03'];
 69 }
 70 
 71 function clear() {
 72     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 73 
 74     ctx.fillStyle = '#111';
 75     ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 76 }
 77 
 78 function drawScene() {
 79     clear(); 
 80 
 81     //绘制球
 82     ctx.fillStyle = '#f66';
 83     ctx.beginPath();
 84     ctx.arc(oBall.x, oBall.y, oBall.r, 0, Math.PI * 2, true);
 85     ctx.closePath();
 86     ctx.fill();
 87 
 88     //padd左右移动
 89     if (bRightBut) {
 90         oPadd.x += 5;
 91     } else if (bLeftBut) {
 92         oPadd.x -= 5;
 93     }
 94 
 95     ctx.drawImage(oPadd.img, oPadd.x, ctx.canvas.height - oPadd.h);
 96 
 97     //绘制砖块
 98     for (i = 0; i < oBricks.r; i++) {
 99         ctx.fillStyle = oBricks.colors[i];
100         for (j = 0; j < oBricks.c; j++) {
101             if (oBricks.objs[i][j] == 1) {
102                 ctx.beginPath();
103                 ctx.rect((j * (oBricks.w + oBricks.p)) + oBricks.p, (i * (oBricks.h + oBricks.p)) + oBricks.p, oBricks.w, oBricks.h);
104                 ctx.closePath();
105                 ctx.fill();
106             }
107         }
108     }
109 
110     //处理碰撞检测
111     iRowH = oBricks.h + oBricks.p;
112     iRow = Math.floor(oBall.y / iRowH);
113     iCol = Math.floor(oBall.x / (oBricks.w + oBricks.p));
114 
115     if (oBall.y < oBricks.r * iRowH && iRow >= 0 && iCol >= 0 && oBricks.objs[iRow][iCol] == 1) {  //处理球碰到砖块
116         oBricks.objs[iRow][iCol] = 0;
117         oBall.dy = -oBall.dy;
118         iPoints++;
119 
120         aSounds[0].play();
121     }
122 
123     if (oBall.x + oBall.dx + oBall.r > ctx.canvas.width || oBall.x + oBall.dx - oBall.r < 0) { //处理左右边界
124         oBall.dx = -oBall.dx;
125     }
126 
127     if (oBall.y + oBall.dy - oBall.r < 0) {   //处理上边界
128         oBall.dy = -oBall.dy;
129     } else if (oBall.y + oBall.dy + oBall.r > ctx.canvas.height - oPadd.h) {   //处理下边界
130         if (oBall.x > oPadd.x && oBall.x < oPadd.x + oPadd.w) {  //球碰到挡板反弹
131             oBall.dx = 10 * ((oBall.x - (oPadd.x + oPadd.w / 2)) / oPadd.w);
132             oBall.dy = -oBall.dy;
133 
134             aSounds[2].play();
135         } else if (oBall.y + oBall.dy + oBall.r > ctx.canvas.height) { //失败
136             clearInterval(iStart);
137             clearInterval(iGameTimer);
138 
139             //在Local Storage中存持续时间和分数
140             localStorage.setItem('last-time', iMin + ':' + iSec);
141             localStorage.setItem('last-points', iPoints);
142 
143             aSounds[1].play();
144         }
145     }
146 
147     oBall.x += oBall.dx;
148     oBall.y += oBall.dy;
149 
150     //显示分数和时间
151     ctx.font = '16px Verdana';
152     ctx.fillStyle = '#fff';
153     iMin = Math.floor(iElapsed / 60);
154     iSec = iElapsed % 60;
155     if (iMin < 10) {
156         iMin = "0" + iMin;
157     }
158     if (iSec < 10) {
159         iSec = "0" + iSec;
160     }
161     ctx.fillText('Time: ' + iMin + ':' + iSec, 600, 520);
162     ctx.fillText('Points: ' + iPoints, 600, 550);
163 
164     if (sLastTime != null && sLastPoints != null) {
165         ctx.fillText('Last Time: ' + sLastTime, 600, 400);
166         ctx.fillText('Last Points: ' + sLastPoints, 600, 490);
167     }
168 }
169 
170 //初始化
171 $(function() {
172     canvas = document.getElementById('scene');
173     ctx = canvas.getContext('2d');
174 
175     var width = canvas.width;
176     var height = canvas.height;
177 
178     var padImg = new Image();
179     padImg.src = 'images/padd.png';
180     padImg.onload = function() {};
181 
182     oBall = new Ball(width / 2, 550, 0.5, -5, 10);
183     oPadd = new Padd(width / 2, 120, 20, padImg);
184     oBricks = new Bricks((width / 8) - 1, 20, 6, 8, 2); 
185 
186     oBricks.objs = new Array(oBricks.r);   //oBricks.objs  是个二维数组
187     for (i = 0; i <oBricks.r; i++) {
188         oBricks.objs[i] = new Array(oBricks.c);
189         for (j = 0; j < oBricks.c; j++) {
190             oBricks.objs[i][j] = 1;
191         }
192     }
193 
194     //声音
195     aSounds[0] = new Audio('media/snd1.wav');
196     aSounds[0].volume = 0.9;
197     aSounds[1] = new Audio('media/snd2.wav');
198     aSounds[1].volume = 0.9;
199     aSounds[2] = new Audio('media/snd3.wav');
200     aSounds[2].volume = 0.9;
201 
202     iStart = setInterval(drawScene, 10);  //重绘
203     iGameTimer = setInterval(countTimer, 1000);  //计数器
204 
205     sLastTime = localStorage.getItem('last-time');
206     sLastPoints = localStorage.getItem('last-points');
207 
208     $(window).keydown(function(event) {
209         switch (event.keyCode) {
210             case 37:
211                 bLeftBut = true;
212                 break;
213             case 39:
214                 bRightBut = true;
215                 break;
216         }
217     });
218     $(window).keyup(function(event) {
219         switch (event.keyCode) {
220             case 37:
221                 bLeftBut = false;
222                 break;
223             case 39:
224                 bRightBut = false;
225                 break;
226         }
227     });
228 
229     //处理挡板跟随鼠标移动
230     var iCanvX1 = $(canvas).offset().left;
231     var iCanvX2 = iCanvX1 + width;
232     $('#scene').mousemove(function(e) {
233         if (e.pageX > iCanvX1 && e.pageX < iCanvX2) {
234             oPadd.x = Math.max(e.pageX - iCanvX1 - (oPadd.w / 2), 0);
235             oPadd.x = Math.min(ctx.canvas.width - oPadd.w, oPadd.x);
236         }
237     });
238 });
239 
240 function countTimer() {
241     iElapsed++;
242 }

我在很多地方添加了注释，希望这些代码很容易理解。注意localStorage对象，并理解它在HTML5本地存储中是如果使用的(使用setItem方法来存储数据，使用getItem来取出数据)。同样，理解怎样处理球和砖块之间的碰撞检测将会很有趣。

结论：

这次我们编写了我们的第一个打砖块游戏。最重要的功能已经呈现了，并且学习了碰撞检测和HTML5的本地存储。我非常乐意看见你的谢意和评论。好运！