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

baacloud免费翻墙vpn注册使用

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

最近一段时间都比较忙,好久没更新博客了,遵循着“时间就像那啥,挤挤总会有的”的原则,承接着上一篇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把这个二维矩阵转换成小方块就行了。

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);
}
}
},


【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;
}
},


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

赞(0) 打赏
分享到: 更多 (0)

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

支付宝扫一扫打赏

微信扫一扫打赏