GameBuilder遊戲開發系列之見縫插針(AA)，gamebuilder遊戲開發

GameBuilder遊戲開發系列之見縫插針(AA)，gamebuilder遊戲開發

今天介紹一款遊戲叫做《AA》，是在最近在IOS上剛剛流行起來的一款遊戲，非常虐心但有非常好玩，現在我們講它在tangide（GameBuilderV2.0）上的利用控制項UICanvas實現它。

線上運行：http://www.tangide.com/apprun.html?appid=preview721427350809280
線上編輯：http://www.tangide.com/gamebuilder.php?appid=preview721427350809280
上玩可以掃描二維碼：

遊戲：

遊戲編輯介面：

從遊戲可以看到，遊戲的畫面很簡潔！簡單的介面配上黑白色的旋轉球體，遊戲的目的讓人一目瞭然！遊戲以闖關形式進行，越到後面的關卡越有種眩暈的感覺，好像高空彈跳！遊戲玩法簡單，一點就通！最開始的關卡，大球上會掛著小球，你只需把下方帶有數位小球黏在大球上，一直到小球黏完遊戲就勝利了！如果你不幸在粘球的過程中碰撞到旁邊的球體，那麼遊戲結束！隨著關卡的遞進，原本附帶的球體會越來越多，你需要粘上的小球也越來越多，這樣就導致中間的縫隙越來越小，因此你碰上別的球的幾率也越來越高了！喜歡的玩家不妨看看自己能闖多少關。

遊戲中有三種球，中間大球，轉動球，等待球。

curLevel.balls = []; //轉動球curLevel.waitingBalls = []; //等待球

兩種數字，大球上的數字表示關卡，小球的數字表示序號，關卡預設的小球沒有數字。

小球發射

這裡選擇情境的onPointerDown事件為發射時機，而不是onClick，因為使用者兩次快速點擊時，會觸發onDoubleClick事件，而不是兩次onClick。

粘黏判斷

小球發射之後，等候的球有個整體向上位移動作，當最上的一個等候球移動到與中心球距離一段距離時，則可以判斷已粘黏上，此時，要將其移出等候球數組，加入到轉動球數組。

    if(curLevel.waitOffset < 0) {        curLevel.waitOffset = 3 * SIDE_BALL_RADIUS;        curLevel.inserting = 0;        var ball = curLevel.waitingBalls.shift();        ball.angle = 90;        ...        curLevel.balls.push(ball);    }

碰撞檢測

檢測碰撞的方法：計算插入的球與旁邊最近一個球體的絕對角度是否。

        curLevel.balls.forEach(            function(e, index) {                if(Math.abs(e.angle - ball.angle) < 360 * SIDE_BALL_RADIUS/ (LINE_LEN*Math.PI)) {                    curLevel.state = GAME_STATE_FAILED;                    failBall = ball;                    failBall.state = 0;                    failBall.timeCount = 5;                } else if(index === curLevel.balls.length - 1                    && curLevel.waitingBalls.length === 0) {                        curLevel.state = GAME_STATE_SUCCESS;                }            }        );

關卡設計

var LEVEL = [    {"initNum":4, "waitNum":8, "speed":360/500},    {"initNum":6, "waitNum":8, "speed":360/500},    {"initNum":2, "waitNum":16, "speed":360/500},    {"initNum":0, "waitNum":24, "speed":360/500},    {"initNum":4, "waitNum":16, "speed":420/500},    {"initNum":3, "waitNum":20, "speed":420/500},    ...];

initNum：預設球數量
waitNum：等候球數量
speed：轉動速率（每20ms轉動的角度）。

遊戲畫面的繪製背景

根據遊戲的狀態來選擇背景顏色

    //draw bg    var color;    switch (curLevel.state) {        case GAME_STATE_RUNNING:            color = "#EED5B7";            break;        case GAME_STATE_SUCCESS:            color = "blue";            break;        case GAME_STATE_FAILED:            color = "red";            break;    }    ctx.fillStyle = color;    ctx.fillRect(canvas.x, canvas.y, canvas.w, canvas.h);

中間大球

    ctx.beginPath();    ctx.arc(CENTER.x, CENTER.y, CENTER_BALL_RADIUS, 0, Math.PI * 2, true);    ctx.closePath();    ctx.fillStyle = "black";    ctx.fill();    //draw level     var txt = (curLevel.level  + 1) + "";    ctx.textAlign = "center";    ctx.textBaseline = "middle";    ctx.font = "italic 60px sans-serif";    ctx.strokeStyle = "#EED5B7";    ctx.fillStyle = "#EED5B7";    ctx.fillText(txt, CENTER.x, CENTER.y);      ctx.strokeText(txt, CENTER.x, CENTER.y);

轉動球

    //draw side ball;    curLevel.balls.forEach(        function(e) {            //繪製大球小球之間的線段            ctx.moveTo(CENTER.x, CENTER.y);            var rad = 2 * Math.PI * e.angle / 360;            var x = CENTER.x + LINE_LEN * Math.cos(rad);            var y = CENTER.y + LINE_LEN * Math.sin(rad);            ctx.strokeStyle = "black";            ctx.lineTo(x, y);            ctx.stroke();            var rad = SIDE_BALL_RADIUS;            if(typeof e.state !== "undefined") {                //如果遊戲失敗，改變失敗球的半徑                switch(e.state) {                    case 0:                        rad = 1.5 * SIDE_BALL_RADIUS;                        break;                    case 1:                        rad = 0.8 * SIDE_BALL_RADIUS;                        break;                    case 2:                        rad = 1.2 * SIDE_BALL_RADIUS;                        break;                }            }            ctx.beginPath();            ctx.arc(x, y, rad, 0, Math.PI * 2, true);            ctx.closePath();            ctx.fillStyle = "black";            ctx.fill();            if(e.numStr.length > 0) {                ctx.textAlign = "center";                ctx.textBaseline = "middle";                ctx.font = "italic 15px sans-serif";                ctx.strokeStyle = "#EED5B7";                ctx.fillStyle = "#EED5B7";                ctx.fillText(e.numStr, x, y);                  ctx.strokeText(e.numStr, x, y);            }        }    );

等候球

    //draw waiting balls    var x = CENTER.x;    var y = CENTER.y + LINE_LEN + curLevel.waitOffset;    curLevel.waitingBalls.forEach(        function(e) {            ctx.moveTo(x, y);            ctx.beginPath();            ctx.arc(x, y, SIDE_BALL_RADIUS, 0, Math.PI * 2, true);            ctx.closePath();            ctx.fillStyle = "black";            ctx.fill();            ctx.textAlign = "center";            ctx.textBaseline = "middle";            ctx.font = "italic 15px sans-serif";            ctx.strokeStyle = "#EED5B7";            ctx.fillStyle = "#EED5B7";            ctx.fillText(e.numStr, x, y);              ctx.strokeText(e.numStr, x, y);            y += 3 * SIDE_BALL_RADIUS;        }    );

原版《AA》的關卡已經到了700多關了，可玩性還是非常高的，關卡的設計可以有很多變化，比如：
1、速度上可以快慢變化
2、可以通過暫停轉動
3、可以控制轉向（順時針/逆時針）變化
4、限制時間
5、等候球可以有大小伸縮增加插入難度
期待您的創意。

註：本系列所介紹的遊戲原始碼均開放，歡迎訪問www.tangide.com體驗遊戲製作的樂趣。