HTML5 game practice (2): 90 lines of code to achieve fishing talents, html590 lines

HTML5 game practice (2): 90 lines of code to achieve fishing talents, html590 lines

Fishing talents are a very popular game that has earned tens of millions of yuan in years. Here we use it to introduce how to develop games with Gamebuilder + CanTK. In fact, it may not be difficult to make a profitable game. Today we only use 90 lines of code to implement this game.

CanTK (Canvas ToolKit) is an open-source game engine and APP framework. It is a powerful tool for developing HTML5 games or apps. If you like it, add stars to it on github, your support is our motivation: https://github.com/drawapp8/cantk

0. First Show the final result:

Online run: http://gamebuilder.duapp.com/apprun.php? Appid = osgames1-721416992188798

Online Editing: http://gamebuilder.duapp.com/gamebuilder.php? Appid = osgames1-721416992188798

1. Create a project, delete the balls and ground in the scenario, set the mobile phone to a horizontal screen, set the physical engine parameters of the scenario, and set the gravity in the X/Y direction to 0.

Set the background image of the scenario:

The effect is as follows:

2. Put an image in a scenario, such as setting its attributes.

3. Place another Frame Animation in the image to indicate the cannon, such as setting its attributes.

4. Place another Frame Animation in the scene to represent the fish, such as setting its attributes.

By copying & pasting, create 10 fish named ui-fish1 to the ui-fish10, respectively. The following results are displayed:

5. Put another Frame Animation in the scene to represent the gold coins, such as setting its attributes.

6. Place another Frame Animation in the scene to represent shells, such as setting its attributes.

7. Place an image font in the bottom image to indicate the total number of gold coins, such as setting its attributes.

8. Put an image font in the scene to indicate the number of coins per time, such as setting its attributes.

9. Put two buttons in the bottom image to change the power of the cannon, such as setting its attributes.

The interface is basically completed (some adjustments may be required later), and the effect is as follows:

10. Now let's start writing code.

Several functions are defined in onOpen in the scenario:

Var win = this; function isObjInvisible (obj) {return! Obj. visible;} // When shells and fish move out of the scene, set them to invisible and unavailable, and reuse these objects 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) ;}}// generates the 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 <20) {var index = Math. floor (10 * 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);} // initializes 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. c Annon = 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 the cannon type win. changeCan Non = 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 a shell hits a fish, the shell becomes a net, the fish plays the die animation, and the gold coins are moved from the shell 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: in Fo. totalScore. x, yEnd: info. totalScore. y-20});} // when you click the scene, adjust the cannon position, launch shells, and play a shooting animation. Win. handleClick = function (point) {var info = this.info, cannon = info. cannon; if(this.tar getShape! = 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 Click Event of the scenario:

this.handleClick(point);

In the two buttons:

this.getWindow().changeCannon(-1);

Well, our fishing talents have basically completed. There are several other places to improve: 1. The score is doubled when multiple fish are shot. 2. Fish have different life values and shells have different lethal effects.

Ah, let's leave these questions to the readers. Maybe you are the developer of the next ten million-level game :)

References:

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