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

總結

以上是生活随笔為你收集整理的GameBuilder游戏开发系列之见缝插针(AA)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。