GameBuilder见缝插针游戏开发系列(AA)

今天推出了一款游戏叫《AA》。在最近IOS只是弹出一个游戏。非常心脏的孩子，但有很多乐趣。今天，我们谈论它tangide（GameBuilderV2.0）用控件UICanvas实现它。

在线执行：http://www.tangide.com/apprun.html?appid=preview721427350809280

在线编辑：

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体验游戏制作的乐趣。

版权声明：本文博客原创文章，博客，未经同意，不得转载。