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

別踩白塊有很多玩法，經典/街機/禪/極速，這裏只實現經典模式，其他模式只需要控制一下白塊產生的方式應該可以很快實現。