HTML5 Games (2): 90 lines of code to achieve fishing talent

Fishing talent is a very popular game, a few years to earn tens of millions of income, here to borrow it to introduce the way to develop games with GAMEBUILDER+CANTK. In fact, the game of making money is not technically difficult, today we just use 90来 Line code to achieve this game.

CANTK (Canvas ToolKit) is an open source game engine and app framework, is a tool to develop HTML5 games or apps, if you like it, please add star on GitHub, your support is the driving force of our efforts: https://github.com/ Drawapp8/cantk

0. Show the final results first:

Online Operation: http://gamebuilder.duapp.com/apprun.php?appid=osgames1-721416992188798

Online Editor: http://gamebuilder.duapp.com/gamebuilder.php?appid=osgames1-721416992188798

1, create a new project, delete the scene of the ball and the ground, set the phone to a horizontal screen, and then set the scene's physical engine parameters, the X/y direction of gravity set to 0.

To set a background image for a scene:

The effect is as follows:

2, put a picture in the scene, such as set its properties.

3, put another frame animation in the picture, used to represent the cannon, such as setting its properties.

4, put another frame in the scene animation, used to represent the fish, such as set its properties.

Create 10 fish by copying & pasting, named Ui-fish1 to Ui-fish10, respectively. Get the following effect:

5, put another frame in the scene animation, used to represent gold, such as set its properties.

6, put another frame in the scene animation, used to represent the shells, such as setting its properties.

7, put a picture in the bottom of the picture font, used to indicate the total number of coins, such as set its properties.

8, put a picture in the scene font, used to represent a single gold number, such as set its properties.

9, put two buttons in the bottom picture to change the power of the cannon, such as setting its properties.

To this interface basically completed (may need to make some adjustments later), the effect is as follows:

10, now we start writing code.

Define several functions in the OnOpen of the scene:

var win = this;function isobjinvisible (obj) {return!obj.visible;} When shells and fish move outside the scene, they are set to be invisible and unusable, and the objects are reused later to reduce memory overhead.    function handleonmoved () {var x = this.x, y = this.y, R = x + THIS.W, b = y + this.h, w = win.w, h = win.h;    if (x > W | | y > H | | r < 0 | | b < 0) {this.setvisible (false). Setenable (false);    }}//timed to produce fish function makefish () {if (!win.info) return;    var info = Win.info,cannon = Info.cannon;    var fish = info.fishs.find (isobjinvisible);        if (!fish && info.fishs.length <) {var index = Math.floor (Ten * Math.random ()) +1;            Fish = win.dupchild ("Ui-fish" +index);        } if (fish) {Info.fishs.push (fish);        var y = Math.max (0, Math.floor ((win.h-info.bottom.h) * Math.random ()-fish.h)); var x = y%2?        -FISH.W:WIN.W; var vx = x > 0?        -1:1; var rotation = x > 0?        math.pi:0; Fish.setposition (x, y). setvisible (True). Setenable (True). SETV (VX, 0). Setrotation (rotation). Play ("LivE "); } setTimeout (Makefish, 500);}    Initialize Game Win.initgame = function () {var info = {bullets:[], fishs:[], cannontype:1, scorevalue:0};    var cannon = this.find ("Ui-cannon", true);     var p = Cannon.getpositioninwindow ();        Cannon.center ={x:p.x + (CANNON.W >> 1), Y:p.y + (Cannon.h >> 1)};    Info.cannon = cannon;    Info.bottom = This.find ("Ui-image");    var totalscore = This.find ("Ui-total-score", true);     p = Totalscore.getpositioninwindow ();        Totalscore.center ={x:p.x + (TOTALSCORE.W >> 1), Y:p.y + (totalScore.h >> 1)};        Info.totalscore = Totalscore;    var bullet = This.find ("Ui-bullet"). setvisible (False). Setenable (false);    bullet.handleonmoved = handleonmoved;        Info.bullets.push (bullet);    Info.coin = This.find ("Ui-coin"). setvisible (false);    Info.score = This.find ("Ui-score"). setvisible (false);        for (var i = 0; i < this.children.length; i++) {var iter = this.children[i]; if (Iter.name.indexOf ("ui-Fish ") >= 0) {iter.handleonmoved = handleonmoved;            Iter.setenable (False). SetVisible (false);        Info.fishs.push (ITER);    }} Info.timerid = SetTimeout (makefish, 1000); This.info = info;}    Change Cannon Type Win.changecannon = function (delta) {var info = This.info,cannon = Info.cannon;    Info.cannontype = Math.max (1, Math.min (7, Info.cannontype + delta)); Cannon.play ("Default" +info.cannontype, 100000);} When the shells hit the fish, the shells become nets, the fish play Die animation, gold coins from the shells moved to the total gold coins.    win.oncontacted = function (bullet, fish) {var info = This.info,cannon = Info.cannon;    Bullet.setenable (False). Play ("Web" +info.cannontype, 1, function () {bullet.setvisible (false);});    Fish.setenable (False). Play ("Die", 1, function () {fish.setvisible (FALSE)});    Info.scorevalue + = 100;    Info.totalScore.setValue (Info.scorevalue); Info.coin.setVisible (True). Animate ({xstart:bullet.x, Ystart:bullet.y, xend:info.totalscore.x, Yend: INFO.TOTALSCORE.Y-20});} When you click on the scene, adjust the position of the cannon, launch the shells, and cannon to play the shooting animation. Win.handleclick = Function (point) {var info = This.info,cannon = Info.cannon;        if (this.targetshape! = this.info.bottom) {var angle = Math.lineangle (Cannon.center, point)-1.5 * MATH.PI;        Cannon.setrotation (angle);        var bullet = Info.bullets.find (isobjinvisible);            if (!bullet) {bullet = Win.dupchild ("Ui-bullet", 0);        Info.bullets.push (bullet);        } var x = cannon.center.x-(bullet.w >> 1), y = cannon.center.y-(bullet.h >> 1); Bullet.setposition (x, y). Setrotation (angle). setvisible (True). Setenable (True). Setv (5*math.sin (angle), -5*math.cos        (angle));        Bullet.play ("Bullet" +info.cannontype);        Cannon.play ("Fire" +info.cannontype, 1);    Console.log (angle); }}this.initgame ();

In the scene's Click event:

This.handleclick (point);

In the two buttons:

This.getwindow (). Changecannon (-1);

Well, our fishing talent is basically finished. There are several places to be perfected: 1. Double the score when shooting multiple fish. 2. Fish have different health values, shells have different lethality.

Oh river, these questions are left to the reader to do, perhaps you are the next Tens game developer:)

Resources:

Https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3

HTML5 Games (2): 90 lines of code to achieve fishing talent