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

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

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

<!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>

</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即可。思路化为代码：

【step 5】绘制弹板，并且绑定键盘事件，让挡板可以左右移动。绘制的方法很简单，直接用canvas的rect方法，前面已经写好了，绑定键盘事件，咱们直接绑在左右按钮上，监测keydown，keyup事件，判断keyCode，然后每次重绘的时候让挡板移位即可。

【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不是很熟悉的同学可以先去查阅下资料。

posted on 2011-03-07 18:49 岑安阅读(5951) 评论(11) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

叶落为重生每片落下的叶子都是为了下一次的涅槃...^_^

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

导航

公告