GameBuilder Game Development Series (AA), gamebuilder Game Development

GameBuilder Game Development Series (AA), gamebuilder Game Development

Today we will introduce a game called "AA". It is a game that has just become popular on IOS recently. It is very abusive but very fun, now we will talk about how to use the UICanvas control on tangide (GameBuilderV2.0) to implement it.

Online run: http://www.tangide.com/apprun.html? Appid = preview721427350809280
Online Editing: http://www.tangide.com/gamebuilder.php? Appid = preview721427350809280
You can scan the QR code:

Games:

Game editing interface:

From the game, we can see that the game picture is very simple! A simple interface with a black and white rotating sphere makes the purpose of the game clear at a glance! The game is played in the form of a pass. The more you get to the next level, the more dizzy you will feel. It seems like a bounce! The gameplay is simple, just a little bit! In the first level, the ball will be hung on the big ball. You just need to stick the ball with numbers below to the big ball until the ball sticks to the game to win! If you unfortunately collide with the sphere next to it during the ball sticking process, the game is over! With the progression of the level, there will be more and more sphere attached to it, and more small balls need to be attached to it. As a result, the gap in the middle will become smaller and smaller, as a result, the chances of hitting another ball are getting higher and higher! A favorite player may wish to see how much it can do.

There are three types of balls in the game: Medium big balls, turning balls, and waiting for the ball.

CurLevel. bils = []; // rotate the ball curLevel. waitingbils = []; // wait for the ball

Two types of numbers: the number on the big ball indicates the level, the number on the small ball indicates the serial number, and the number on the level preset ball does not have a number.

Ball launch

Here, the onPointerDown event of the scenario is selected as the launch time, rather than the onClick, because the onDoubleClick event is triggered when the user clicks twice, rather than twice.

Sticky judgment

After the ball is fired, the waiting ball has an overall upward movement. When the top waiting ball moves to a distance from the center ball, you can determine that it has been attached, remove it from the wait ball array and add it to the ball rotation array.

    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);    }

Collision Detection

Collision Detection Method: calculates the absolute angle between the inserted ball and the last sphere.

        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;                }            }        );

Level Design

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: Number of Preset balls
WaitNum: Number of waiting balls
Speed: rotation rate (angle of rotation every 20 ms ).

Game screen background

Select the background color based on the game status

    //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);

Middle dashboard

    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);

Rotate the ball

// Draw side ball; curLevel. bils. forEach (function (e) {// draw the ctx line between balls. 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") {// if the game fails, change the failure ball's radius 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 );}});

Waiting for the ball

    //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;        }    );

The level of the original AA version has reached more than 700 levels, and the playability is still very high. The design of the level can be changed a lot, for example:
1. Speed changes
2. You can pause rotation.
3. Steering changes can be controlled (clockwise/counterclockwise ).
4. Time Limit
5. The waiting ball can be scaled to increase insertion difficulty.
We look forward to your creativity.

Note: The game Source Code introduced in this series is open. You are welcome to visit www.tangide.com to experience the fun of game production.