今天介紹一款遊戲叫做《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體驗遊戲製作的樂趣。
