今天介绍一款游戏叫做《AA》，是在最近在IOS上刚刚流行起来的一款游戏，非常虐心但有非常好玩，现在我们讲它在tangide（GameBuilderV2.0）上的利用控件UICanvas实现它。
在线运行：?appid=preview721427350809280 在线编辑：?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((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 levelvar 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 = case 1:rad = case 2:rad = }}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;});漫过心际的孤独，早已蔚然成冰，而你是这个季节里最美的音符。
