[转载]html5全接触（二）–BounceBall小游戏简易教程-Mikel

[转载]html5全接触（二）–BounceBall小游戏简易教程 – 叶落为重生每片落下的叶子都是为了下一次的涅槃…^_^ – 博客园.

最近一段时间都比较忙，好久没更新博客了，遵循着“时间就像那啥，挤挤总会有的”的原则，承接着上一篇html5先关的博文，继续我们的趣味html5之旅。

前一段时间很流行用html5写小游戏，当了解了一些常用的api之后，你会发现，写一些简单的小游戏自娱自乐也不会那么困难，当然，做逻辑和界面复杂的游戏除外。以下会提供一个弹球小游戏的简单教程，希望感兴趣的朋友能在编码中找到一点乐趣。

<!– 注：以下demo木有神马高深的东东，大牛们觉得无味请略过。同时，由于砖块厚度与弹球的纵向变换单元的比例不协调，故没做砖块的侧向碰撞监测.. –>

<!DOCTYPE html> <html> <head> <style> body {margin:0; position:absolute; width:100%; height:100%} canvas {display: block; margin: 20px auto; border: 2px solid #333} .info {width: 600px; margin: 0 auto; color: #666; text-align:center} </style> <script> var Bombule = function () { var ctx, x = 295, y = 385, dx = 2, dy = 4, W, H, rd = false, ld = false, pause = true, X, B = {}, rowColor = [“#FF1C0A”, “#FFFD0A”, “#00A308”, “#0008DB”, “#EB0093”, “#00A308”, “#0008DB”, “#EB0093″]; var init = function (id) { var canvas = document.getElementById(id); W = canvas.width || 600; H = canvas.height || 400; X = (W-100)/2; ctx = canvas.getContext(‘2d’); this.initBricks(8, 8); this.run(); this.evListen(); } init.prototype = { run : function () { var _this = this; this.st = setInterval(function () { _this.draw(); }, 16) }, draw : function () { this.clear(); this.circle(x, y, 8); if (rd && !pause && X < W-this.paddleW) {X += 10} else if (ld && !pause && X > 0) {X -= 10} this.paddle(X, 100); this.drawBricks(); this.hitBrick(x, y); if (x + dx > W || x + dx < 0) dx = -dx; if (y + dy < 0) {dy = -dy} else if (y + dy > H-10) { x > X-4 && x < X+this.paddleW+4 ? this.hitPaddle(x) : this.stop(); } if (!pause) { x += dx; y += dy; } }, clear : function () { ctx.clearRect(0, 0, W, H); }, circle : function (x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); }, rect : function (x, y, w, h) { ctx.beginPath(); ctx.rect(x, y, w, h); ctx.closePath(); ctx.fill(); }, stop : function () { clearInterval(this.st); this.showInfo(‘Game Over’) }, paddle : function (l, w) { this.paddleW = w; this.rect(l, H-10, w, 10); }, evListen : function () { document.addEventListener(‘keydown’, function (e) { if (e.keyCode == 39) rd = true; else if (e.keyCode == 37) ld = true; }, false); document.addEventListener(‘keyup’, function (e) { if (e.keyCode == 39) rd = false; else if (e.keyCode == 37) ld = false; else if (e.keyCode == 32) pause = !pause ? true : false; }, false); }, initBricks : function (row, col) { B.row = row; B.col = col; B.w = W/col – 1; B.h = 15; B.pad = 1; B.bricks = new Array(row); for (var i=0; i<row; i++) { B.bricks[i] = new Array(col); for (var j=0; j<col; j++) { B.bricks[i][j] = 1; } } }, drawBricks : function () { for (var i=0; i<B.row; i++) { ctx.fillStyle = rowColor[i]; for (var j=0; j<B.col; j++) { B.bricks[i][j] === 1 && this.rect(j*(B.w+B.pad) + B.pad, i*(B.h+B.pad)+B.pad, B.w, B.h); } } }, hitBrick : function (x, y) { var rh = B.h + B.pad, cw = B.w + B.pad, row = Math.floor(y/rh), col = Math.floor(x/cw); if (y < B.row*rh && row >= 0 && col >= 0 && B.bricks[row][col] === 1) { dy = -dy; B.bricks[row][col] = 0; } }, hitPaddle : function (x) { dy = -dy; dx = 10 * ((x-(X+this.paddleW/2))/this.paddleW); }, showInfo : function (text) { ctx.font = ’60pt Calibri’; ctx.fillStyle = ‘#999’; ctx.fillText(text, 130, 200); } } return init; }(); onload = function () { new Bombule(‘canvas’); } </script> </head> <body> <canvas id=”canvas” width=”600″ height=”400″>Your Broswer don’t support html5 canvas</canvas> <p class=”info”>空格-开始/暂停 | 方向键控制挡板左右</p> <!–<audio src=”http://www.w3schools.com/html5/horse.ogg” autoplay=”true”> Your browser does not support the audio element. </audio>–> </body> </html>

既然是教程，咱们还是一步一步来：（代码可以直接在textarea里看到，源码就不贴了）
【step 1】画个小球
<!DOCTYPE html> <html> <head> <style> body {margin:0; position:absolute; width:100%; height:100%} canvas {display: block; margin: 20px auto; border: 2px solid #333} </style> <script> var init = function () { var canvas = document.getElementById(‘canvas’), ctx = canvas.getContext(‘2d’); ctx.beginPath(); ctx.arc(200, 200, 8, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } onload = init; </script></head> <body> <canvas id=”canvas” width=”600″ height=”400″>Your Broswer don’t support html5 canvas<canvas> </body> </html>

【step 2】为了方便扩展以及养成良好的编码习惯，我们稍微做点封装和结构化；同时增加画矩形的方法rect和清除画布的方法clear
<!DOCTYPE html> <html> <head> <style> body {margin:0; position:absolute; width:100%; height:100%} canvas {display: block; margin: 20px auto; border: 2px solid #333} </style> <script> var BounceBall = function () { var ctx, W, H; var init = function (id) { var canvas = document.getElementById(id); ctx = canvas.getContext(‘2d’); W = canvas.width || 600; H = canvas.height || 400; this.circle(200, 300, 8); } init.prototype = { clear : function () { ctx.clearRect(0, 0, W, H); }, circle : function (x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); }, rect : function (x, y, w, h) { ctx.beginPath(); ctx.rect(x, y, w, h); ctx.closePath(); ctx.fill(); } } return init; }(); onload = function () { new BounceBall(‘canvas’) } </script></head> <body> <canvas id=”canvas” width=”600″ height=”400″>Your Broswer don’t support html5 canvas<canvas> </body> </html>

【step 3】让小球动起来，因为canvas是画布，想让小球动起来，最直接的想法莫过于通过定时器setInterval之类，每次先清除画布，然后重绘一个小球，定位到路径的下一点即可，视觉上连贯起来就动起来了。咱们还是上代码（我这个是低配版，所以每次的位置变化量我都写死的）
<!DOCTYPE html> <html> <head> <style> body {margin:0; position:absolute; width:100%; height:100%} canvas {display: block; margin: 20px auto; border: 2px solid #333} </style> <script> var BounceBall = function () { var ctx, W, H, dx = 2, dy = 4, x = 100, y = 200; var init = function (id) { var canvas = document.getElementById(id); ctx = canvas.getContext(‘2d’); W = canvas.width || 600; H = canvas.height || 400; this.run(); } init.prototype = { run: function () { var _this = this; this.st = setInterval(function () { _this.draw(); }, 16) }, draw: function () { this.clear(); //清除画布，以便重绘 this.circle(x, y, 8); //重绘小球 x += dx; // x 方向变化 y += dy; // y 方向变化 }, clear : function () { ctx.clearRect(0, 0, W, H); }, circle : function (x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); }, rect : function (x, y, w, h) { ctx.beginPath(); ctx.rect(x, y, w, h); ctx.closePath(); ctx.fill(); } } return init; }(); onload = function () { new BounceBall(‘canvas’) } </script></head> <body> <canvas id=”canvas” width=”600″ height=”400″>Your Broswer don’t support html5 canvas<canvas> </body> </html>

【step 4】做边界碰撞的反弹效果，也很简单，判断下小球的坐标x y,监测坐标与canvas高宽，在临界点让对应的变化量做反转即可，比如碰撞上下边界，就让dy = -dy即可。思路化为代码：

<!DOCTYPE html> <html> <head> <style> body {margin:0; position:absolute; width:100%; height:100%} canvas {display: block; margin: 20px auto; border: 2px solid #333} </style> <script> var BounceBall = function () { var ctx, W, H, dx = 2, dy = 4, x = 200, y = 200, X, rd = false; ld = false; var init = function (id) { var canvas = document.getElementById(id); ctx = canvas.getContext(‘2d’); W = canvas.width || 600; //画布总宽 H = canvas.height || 400; // 画布总高 X = (W-100)/2; //初始挡板x坐标 this.run(); this.evListen(); //绑定事件 } init.prototype = { run: function () { var _this = this; this.st = setInterval(function () { _this.draw(); }, 16) }, draw: function () { this.clear(); //清除画布，以便重绘 this.circle(x, y, 8); //重绘小球 this.paddle(X, 100); //重绘挡板 // 边界碰撞 if (x + dx > W || x + dx < 0) dx = -dx; if (y + dy > H || y + dy < 0) dy = -dy; // 挡板控制 if (rd && X < W-this.paddleW) {X += 10} else if (ld && X > 0) {X -= 10} x += dx; // x 方向变化 y += dy; // y 方向变化 }, clear : function () { ctx.clearRect(0, 0, W, H); }, circle : function (x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); }, rect : function (x, y, w, h) { ctx.beginPath(); ctx.rect(x, y, w, h); ctx.closePath(); ctx.fill(); }, // 绘制挡板 paddle : function (l, w) { this.paddleW = w; this.rect(l, H-10, w, 10); }, // 键盘事件绑定 evListen : function () { document.addEventListener(‘keydown’, function (e) { if (e.keyCode == 39) rd = true; else if (e.keyCode == 37) ld = true; }, false); document.addEventListener(‘keyup’, function (e) { if (e.keyCode == 39) rd = false; else if (e.keyCode == 37) ld = false; }, false); } } return init; }(); onload = function () { new BounceBall(‘canvas’) } </script></head> <body> <canvas id=”canvas” width=”600″ height=”400″>Your Broswer don’t support html5 canvas<canvas> </body> </html>
【step 6】修改碰撞监测，小球落在挡板内可以继续，落在挡板外游戏结束。只需要修改撞击下边界的条件。即当球的y坐标大于画布总高度减去挡板厚度时，判断此时球的x坐标是否在挡板范围内。如果是那么小球弹回，游戏继续，否则游戏结束。游戏结束也很简单，直接清掉计数器。

<!DOCTYPE html> <html> <head> <style> body {margin:0; position:absolute; width:100%; height:100%} canvas {display: block; margin: 20px auto; border: 2px solid #333} </style> <script> var BounceBall = function () { var ctx, W, H, dx = 2, dy = 4, x = 200, y = 200, X, rd = false; ld = false; var init = function (id) { var canvas = document.getElementById(id); ctx = canvas.getContext(‘2d’); W = canvas.width || 600; //画布总宽 H = canvas.height || 400; // 画布总高 X = (W-100)/2; //初始挡板x坐标 this.run(); this.evListen(); //绑定事件 } init.prototype = { run: function () { var _this = this; this.st = setInterval(function () { _this.draw(); }, 16) }, draw: function () { this.clear(); //清除画布，以便重绘 this.circle(x, y, 8); //重绘小球 this.paddle(X, 100); //重绘挡板 // 边界碰撞 if (x + dx > W || x + dx < 0) dx = -dx; if (y + dy < 0) {dy = -dy} else if (y + dy > H-10) { x > X-4 && x < X+this.paddleW+4 ? dy=-dy : this.stop(); } // 挡板控制 if (rd && X < W-this.paddleW) {X += 10} else if (ld && X > 0) {X -= 10} x += dx; // x 方向变化 y += dy; // y 方向变化 }, clear : function () { ctx.clearRect(0, 0, W, H); }, circle : function (x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); }, rect : function (x, y, w, h) { ctx.beginPath(); ctx.rect(x, y, w, h); ctx.closePath(); ctx.fill(); }, // 绘制挡板 paddle : function (l, w) { this.paddleW = w; this.rect(l, H-10, w, 10); }, // 键盘事件绑定 evListen : function () { document.addEventListener(‘keydown’, function (e) { if (e.keyCode == 39) rd = true; else if (e.keyCode == 37) ld = true; }, false); document.addEventListener(‘keyup’, function (e) { if (e.keyCode == 39) rd = false; else if (e.keyCode == 37) ld = false; }, false); }, stop : function () { clearInterval(this.st); } } return init; }(); onload = function () { new BounceBall(‘canvas’) } </script></head> <body> <canvas id=”canvas” width=”600″ height=”400″>Your Broswer don’t support html5 canvas<canvas> </body> </html>
【step 7】经过以上阶段，下面可以开始画砖块了，也很简单，定义一个二维的矩阵，根据行列数，算好每个砖块的宽度，通过之前写好的rect把这个二维矩阵转换成小方块就行了。

initBricks : function (row, col) {
B.row = row;
B.col = col;
B.w = W/col – 1;
B.h = 15;
B.pad = 1;
B.bricks = new Array(row);

for (var i=0; i<row; i++) {
B.bricks[i] = new Array(col);
for (var j=0; j<col; j++) {
B.bricks[i][j] = 1;
}
}
},
drawBricks : function () {
for (var i=0; i<B.row; i++) {
for (var j=0; j<B.col; j++) {
B.bricks[i][j] === 1 && this.rect(j*(B.w+B.pad) + B.pad, i*(B.h+B.pad)+B.pad, B.w, B.h);
}
}
},

<!DOCTYPE html> <html> <head> <style> body {margin:0; position:absolute; width:100%; height:100%} canvas {display: block; margin: 20px auto; border: 2px solid #333} </style> <script> var BounceBall = function () { var ctx, W, H, dx = 2, dy = 4, x = 200, y = 200, X, rd = false; ld = false, B = {}; var init = function (id) { var canvas = document.getElementById(id); ctx = canvas.getContext(‘2d’); W = canvas.width || 600; //画布总宽 H = canvas.height || 400; // 画布总高 X = (W-100)/2; //初始挡板x坐标 this.initBricks(8, 8); //初始化砖块的二位矩阵 this.run(); this.evListen(); //绑定事件 } init.prototype = { run: function () { var _this = this; this.st = setInterval(function () { _this.draw(); }, 16) }, draw: function () { this.clear(); //清除画布，以便重绘 this.circle(x, y, 8); //重绘小球 this.paddle(X, 100); //重绘挡板 this.drawBricks(); //重绘砖块 // 边界碰撞 if (x + dx > W || x + dx < 0) dx = -dx; if (y + dy < 0) {dy = -dy} else if (y + dy > H-10) { x > X-4 && x < X+this.paddleW+4 ? dy=-dy : this.stop(); } // 挡板控制 if (rd && X < W-this.paddleW) {X += 10} else if (ld && X > 0) {X -= 10} x += dx; // x 方向变化 y += dy; // y 方向变化 }, clear : function () { ctx.clearRect(0, 0, W, H); }, circle : function (x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); }, rect : function (x, y, w, h) { ctx.beginPath(); ctx.rect(x, y, w, h); ctx.closePath(); ctx.fill(); }, // 绘制挡板 paddle : function (l, w) { this.paddleW = w; this.rect(l, H-10, w, 10); }, // 键盘事件绑定 evListen : function () { document.addEventListener(‘keydown’, function (e) { if (e.keyCode == 39) rd = true; else if (e.keyCode == 37) ld = true; }, false); document.addEventListener(‘keyup’, function (e) { if (e.keyCode == 39) rd = false; else if (e.keyCode == 37) ld = false; }, false); }, stop : function () { clearInterval(this.st); }, initBricks : function (row, col) { B.row = row; B.col = col; B.w = W/col – 1; B.h = 15; B.pad = 1; B.bricks = new Array(row); for (var i=0; i<row; i++) { B.bricks[i] = new Array(col); for (var j=0; j<col; j++) { B.bricks[i][j] = 1; } } }, drawBricks : function () { for (var i=0; i<B.row; i++) { for (var j=0; j<B.col; j++) { B.bricks[i][j] === 1 && this.rect(j*(B.w+B.pad) + B.pad, i*(B.h+B.pad)+B.pad, B.w, B.h); } } } } return init; }(); onload = function () { new BounceBall(‘canvas’) } </script></head> <body> <canvas id=”canvas” width=”600″ height=”400″>Your Broswer don’t support html5 canvas<canvas> </body> </html>
【step 8】砖块碰撞。这里只做粗糙的碰撞监测，而且由于砖块厚度太低，dy都比砖块厚度更大，所以侧向的碰撞这里没做考虑。考虑纵向的碰撞的话，简单点，可以实时监控小球的y坐标，当满足小球坐标在砖块区并且砖块存在，那么就表示小球有和砖块碰撞，那么清除当前碰撞砖块，小球反向即可。

hitBrick : function (x, y) {
var rh = B.h + B.pad,
cw = B.w + B.pad,
row = Math.floor(y/rh),
col = Math.floor(x/cw);
if (y < B.row*rh && row >= 0 && col >= 0 && B.bricks[row][col] === 1) {
dy = –dy;
B.bricks[row][col] = 0;
}
},

<!DOCTYPE html> <html> <head> <style> body {margin:0; position:absolute; width:100%; height:100%} canvas {display: block; margin: 20px auto; border: 2px solid #333} </style> <script> var BounceBall = function () { var ctx, W, H, dx = 2, dy = 4, x = 200, y = 200, X, rd = false; ld = false, B = {}; var init = function (id) { var canvas = document.getElementById(id); ctx = canvas.getContext(‘2d’); W = canvas.width || 600; //画布总宽 H = canvas.height || 400; // 画布总高 X = (W-100)/2; //初始挡板x坐标 this.initBricks(8, 8); //初始化砖块的二位矩阵 this.run(); this.evListen(); //绑定事件 } init.prototype = { run: function () { var _this = this; this.st = setInterval(function () { _this.draw(); }, 16) }, draw: function () { this.clear(); //清除画布，以便重绘 this.circle(x, y, 8); //重绘小球 this.paddle(X, 100); //重绘挡板 this.drawBricks(); //重绘砖块 this.hitBrick(x, y); //砖块碰撞 // 边界碰撞 if (x + dx > W || x + dx < 0) dx = -dx; if (y + dy < 0) {dy = -dy} else if (y + dy > H-10) { x > X-4 && x < X+this.paddleW+4 ? dy=-dy : this.stop(); } // 挡板控制 if (rd && X < W-this.paddleW) {X += 10} else if (ld && X > 0) {X -= 10} x += dx; // x 方向变化 y += dy; // y 方向变化 }, clear : function () { ctx.clearRect(0, 0, W, H); }, circle : function (x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); }, rect : function (x, y, w, h) { ctx.beginPath(); ctx.rect(x, y, w, h); ctx.closePath(); ctx.fill(); }, // 绘制挡板 paddle : function (l, w) { this.paddleW = w; this.rect(l, H-10, w, 10); }, // 键盘事件绑定 evListen : function () { document.addEventListener(‘keydown’, function (e) { if (e.keyCode == 39) rd = true; else if (e.keyCode == 37) ld = true; }, false); document.addEventListener(‘keyup’, function (e) { if (e.keyCode == 39) rd = false; else if (e.keyCode == 37) ld = false; }, false); }, stop : function () { clearInterval(this.st); }, initBricks : function (row, col) { B.row = row; B.col = col; B.w = W/col – 1; B.h = 15; B.pad = 1; B.bricks = new Array(row); for (var i=0; i<row; i++) { B.bricks[i] = new Array(col); for (var j=0; j<col; j++) { B.bricks[i][j] = 1; } } }, drawBricks : function () { for (var i=0; i<B.row; i++) { for (var j=0; j<B.col; j++) { B.bricks[i][j] === 1 && this.rect(j*(B.w+B.pad) + B.pad, i*(B.h+B.pad)+B.pad, B.w, B.h); } } }, hitBrick : function (x, y) { var rh = B.h + B.pad, cw = B.w + B.pad, row = Math.floor(y/rh), col = Math.floor(x/cw); if (y < B.row*rh && row >= 0 && col >= 0 && B.bricks[row][col] === 1) { dy = -dy; B.bricks[row][col] = 0; } } } return init; }(); onload = function () { new BounceBall(‘canvas’) } </script></head> <body> <canvas id=”canvas” width=”600″ height=”400″>Your Broswer don’t support html5 canvas<canvas> </body> </html>

好了，其实到这里差不多可以结束了，算是一个最最基础的打砖块小游戏，当然，感兴趣的同学可以自己再加其他的元素，增加其可玩性，比如我最开始那个加了暂停功能，加了颜色，加了结束画面。甚至你可以自己去加砖块道具，设置不同关卡，增加不同砖块属性，增加各种玩法来增强其可玩性。
仅仅作为教程，我觉得基本目的达到了。由于篇幅原因，有些具体的细节没法一一讲清楚。请包涵。如果对canvas的api不是很熟悉的同学可以先去查阅下资料。

[转载]html5全接触（二）--BounceBall小游戏简易教程

相关推荐

热门标签

分类

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏