Gamebuilder game Development Series of Jianfengchazhen (AA)

Today introduced a game called "AA", is recently on iOS on a popular game, very masochistic but very fun, now we say it on Tangide (GameBuilderV2.0) on the use of control Uicanvas implementation of it.

Online Operation: http://www.tangide.com/apprun.html?appid=preview721427350809280
Online Editor: http://www.tangide.com/gamebuilder.php?appid=preview721427350809280
On play can scan QR code:

Game:

Game editing Interface:

From the game can be seen, the game screen is very concise! Simple interface with black and white rotating spheres, the purpose of the game to let people at a glance! The game in the form of a level, the more to the back of the levels of a dizzy feeling, like bungee jumping! Gameplay is simple, a bit on the pass! At the beginning of the level, the ball will hang a small ball, you just have to put the small ball below with numbers glued to the ball, until the ball stick the game on the victory! If you're unlucky enough to bump into a sphere next to the ball, then the game is over! With the progression of the level, the original ball will be more and more, you need to stick on the ball is more and more, so that the gap between the middle of the smaller, so you hit another ball more and more high probability! Favorite players may wish to see how much they can break.

There are three kinds of balls in the game, middle ball, rotating ball, waiting for the ball.

//转动球//等待球

Two kinds of numbers, the number on the big ball indicates the level, the number of the ball indicates the serial number, the level preset ball no number.

Pellet Launch

The Onpointerdown event for the selected scene here is the launch time, not the onclick, because when the user clicks two times, the OnDoubleClick event is triggered instead of the onclick two times.

Visco-Sticky judgment

After the small ball is launched, the waiting ball has an overall upward displacement action, when the most waiting ball moves to a distance from the center ball distance, it can be judged to have adhered to, at this time, to move it out of the waiting ball array, added to the rotation of the ball array.

    if0) {        3 * SIDE_BALL_RADIUS;        0;        var ball = curLevel.waitingBalls.shift();        90;        ...        curLevel.balls.push(ball);    }

Collision detection

Method for detecting collisions: calculates whether the inserted ball is the absolute angle of the nearest sphere next to it.

CurLevel.balls.forEach ( function(e, index) {                if(Math. ABS (E.angle-ball.angle) < the* 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

varLevel = [{"Initnum":4,"Waitnum":8,"Speed": the/ -},    {"Initnum":6,"Waitnum":8,"Speed": the/ -},    {"Initnum":2,"Waitnum": -,"Speed": the/ -},    {"Initnum":0,"Waitnum": -,"Speed": the/ -},    {"Initnum":4,"Waitnum": -,"Speed":420/ -},    {"Initnum":3,"Waitnum": -,"Speed":420/ -},    ...];

Initnum: Number of preset balls
Waitnum: Number of waiting balls
Speed: Rotation rate (angle per 20ms rotation).

Drawing background of the game screen

Choose a background color based on the state of the game

    //draw bg    var color;    switch (curLevel.state) {        case GAME_STATE_RUNNING:            "#EED5B7";            break;        case GAME_STATE_SUCCESS:            "blue";            break;        case GAME_STATE_FAILED:            "red";            break;    }    ctx.fillStyle = color;    ctx.fillRect(canvas.x, canvas.y, canvas.w, canvas.h);

Middle Ball

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

Turn the ball

Draw Side Ball;Curlevel. Balls. ForEach(function (e) {//Draw a line between ball balls CTX. MoveTo(CENTER. x, CENTER. Y);var rad =2* Math. PI* E. Angle/ the;Varx= CENTER. x+ Line_len * Math. Cos(RAD);Vary= 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 radius of the failed ball switch (E. State) {case0: Rad =1.5* Side_ball_radius;                         Break;Case1: Rad =0.8* Side_ball_radius;                         Break;Case2: Rad =1.2* Side_ball_radius;                         Break;}} CTX. Beginpath();CTx. Arc(x,yRad0, 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    varx = center.x;vary = 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 original "AA" level has reached more than 700 off, playable or very high, the design of the level can have a lot of changes, such as:
1, the speed can change quickly
2. Can be rotated by pausing
3. Can control the change of steering (clockwise/counterclockwise)
4. Time limit
5, waiting for the ball can be scaled to increase the difficulty of inserting
Look forward to your ideas.

Note: The game source code introduced in this series is open, welcome to visit www.tangide.com to experience the fun of game making.

Gamebuilder game Development Series of Jianfengchazhen (AA)