html5制作消除游戏,HTML5 Canvas消除游戏

玩过微信“天天爱消除”游戏的人都应该了解这类游戏，尤其这类游戏常常受到许多妹子的喜欢，所以我还是花了周末一天的时间做做这个游戏。

我的这个游戏当然没有微信里的效果那么炫酷，只是完成了消除游戏一些核心的逻辑，包括消失、补全、交换这些。

仔细算下来，这好像已经是我的第7款小游戏了，这又让我开始憧憬大游戏的到来。

算了，反正小时候玩过那么多小游戏，先把那些记忆中的游戏写完再说。

这款游戏还是延续canvas的方案，主要的逻辑还是在判断消失和补全的部分，

核心代码如下：

[code]

/**

* 检查下落补缺的方块

*/

checkDropBlock: function() {

var len = 0, hasFade = false;

for(var i = 0; i < span.x; i++) {

hasFade = false;

for(var j = span.y - 1; j >= 0; j--) {

var m = matrix[j][i];

if(!hasFade && m.opacity <= 0) {

//垂直方向从下往上找，当找到第一个消失的方块时记录位置，

//后面就不用再记录了

hasFade = true;

len = j;

} else if(hasFade && m.opacity > 0) {

//遇到有效的方块则往下移动

matrix[len][i] = this.clone(m);

matrix[j][i].opacity = 0;

len--;

}

//当到达最顶部时，不够的选择随机的方块补充上，以此填满

if(j === 0 && m.opacity <= 0) {

while(len >= 0) {

matrix[len][i] = this.getRandomBlock();

len--;

}

}

}

}

}

/**