GameBuilder开发游戏应用系列之100行代码实现别踩白块

在线预览：http://osgames.duapp.com/apprun.html?appid=osgames1-961421749977376

在线编辑：http://osgames.duapp.com/gamebuilder.php?appid=osgames1-961421749977376

微信扫描：

游戏截图：

别踩白块是一款非常流行的游戏，该游戏于2014年4月16日上线App Store。并在全球40多个国家、地区免费游戏榜登顶榜首[4] ，超过一百个国家或地区排名前十 ，5月份荣登全球游戏下载总榜（iOS + Android）第一宝座，游戏上线3个月累计下载达1亿。

别踩白块的实现方法在GameBuilder种的实现方式，主要靠一个UICanvas的控件，这里的UICanvas不同于Cantk本身基于的html5 canvas，它继承自Cantk将UIElement，只是将canvas的2d context接口暴露出来，由用户来决定需要绘制的内容和方式。

UICanvas有一个绘制事件借口onPaint，大部分的逻辑在此接口里面完成。主要逻辑如下：

1. 生成黑块列表（一行中四格种只有一个黑快）
2. 绘制黑白块方格
3. 判断点击事件

生成黑块列表

用一个随机数表示黑块位置，保存在行数组里面。

win.prepareBlock = function() {
    for(var raw = 0; raw < 1001; raw++) {
        var col = Math.floor(Math.random() * 4);
        win.blockList[raw] = col;
        //console.log("raw:" + raw + " col:" + col);
    }
};

绘制黑白块方格

代码写在UICanvas的onPaint事件里面。

1. 判断当前行是否已经点击过
2. 递增偏移量，根据偏移量，重新绘制游戏区域内的方块。这样做是为了有动画效果。

判断点击事件

1. 根据点换算成行列值
2. 在数组里查询当前行黑块所在列
3. 比较二者是否一致。

win.doOnClick = function(point) {
    var x = point.x;
    var y = point.y;
    var raw = Math.floor(win.curRaw + 1 - (this.h - y) / win.bsl);
    var col = Math.floor(x / win.bsl);
    if(win.blockList[raw] === col) {
        win.blockList[raw] = -1;
        win.score += 100;
        win.find("score").setValue(win.score);
    } else if(win.blockList[raw] === -1) {
        //do nothing;
    } else {
        this.gameover = true;
        this.openWindow("win-dlg-confirm", function(ret) {
            this.score = 0;
            win.find("score").setValue(win.score);},
            false, this.score
        );
        this.score = 0;
        this.replay();
    }
};

别踩白块有很多玩法，经典/街机/禅/极速，这里只实现经典模式，其他模式只需要控制一下白块产生的方式应该可以很快实现。