最近一段时间都比较忙，好久没更新博客了，遵循着“时间就像那啥，挤挤总会有的”的原则，承接着上一篇html5先关的博文，继续我们的趣味html5之旅。
前一段时间很流行用html5写小游戏，当了解了一些常用的api之后，你会发现，写一些简单的小游戏自娱自乐也不会那么困难，当然，做逻辑和界面复杂的游戏除外。以下会提供一个弹球小游戏的简单教程，希望感兴趣的朋友能在编码中找到一点乐趣。
<!-- 注：以下demo木有神马高深的东东，大牛们觉得无味请略过。同时，由于砖块厚度与弹球的纵向变换单元的比例不协调，故没做砖块的侧向碰撞监测.. -->
既然是教程，咱们还是一步一步来：（代码可以直接在textarea里看到，源码就不贴了）
【step 1】画个小球
【step 2】为了方便扩展以及养成良好的编码习惯，我们稍微做点封装和结构化；同时增加画矩形的方法rect和清除画布的方法clear
【step 3】让小球动起来，因为canvas是画布，想让小球动起来，最直接的想法莫过于通过定时器setInterval之类，每次先清除画布，然后重绘一个小球，定位到路径的下一点即可，视觉上连贯起来就动起来了。咱们还是上代码（我这个是低配版，所以每次的位置变化量我都写死的）
【step 4】做边界碰撞的反弹效果，也很简单，判断下小球的坐标x y,监测坐标与canvas高宽，在临界点让对应的变化量做反转即可，比如碰撞上下边界，就让dy = -dy即可。思路化为代码：
【step 5】绘制弹板，并且绑定键盘事件，让挡板可以左右移动。绘制的方法很简单，直接用canvas的rect方法，前面已经写好了，绑定键盘事件，咱们直接绑在左右按钮上，监测keydown，keyup事件，判断keyCode，然后每次重绘的时候让挡板移位即可。
【step 6】修改碰撞监测，小球落在挡板内可以继续，落在挡板外游戏结束。只需要修改撞击下边界的条件。即当球的y坐标大于画布总高度减去挡板厚度时，判断此时球的x坐标是否在挡板范围内。如果是那么小球弹回，游戏继续，否则游戏结束。游戏结束也很简单，直接清掉计数器。
【step 7】经过以上阶段，下面可以开始画砖块了，也很简单，定义一个二维的矩阵，根据行列数，算好每个砖块的宽度，通过之前写好的rect把这个二维矩阵转换成小方块就行了。
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);
}
}
},
【step 8】砖块碰撞。这里只做粗糙的碰撞监测，而且由于砖块厚度太低，dy都比砖块厚度更大，所以侧向的碰撞这里没做考虑。考虑纵向的碰撞的话，简单点，可以实时监控小球的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;
}
},
好了，其实到这里差不多可以结束了，算是一个最最基础的打砖块小游戏，当然，感兴趣的同学可以自己再加其他的元素，增加其可玩性，比如我最开始那个加了暂停功能，加了颜色，加了结束画面。甚至你可以自己去加砖块道具，设置不同关卡，增加不同砖块属性，增加各种玩法来增强其可玩性。
仅仅作为教程，我觉得基本目的达到了。由于篇幅原因，有些具体的细节没法一一讲清楚。请包涵。如果对canvas的api不是很熟悉的同学可以先去查阅下资料。