Tangide game development of 60 lines of code to achieve the fight gopher

For friends who have not touched the HTML, to achieve a simple HTML5 game, but also do not know where to start. Even the HTML master, there are no thousands of lines of code, can not finish a decent game of the hamster.

Find an open source mouse game online (see), a cursory look at the code, the number of lines of code 1000+.

Today I would like to introduce the game, the main logic code, also more than 60 lines, all the code added up to more than 100 lines, is a custom for a customer a relatively complete business game, most of the function is just one afternoon time can be completed.

First look at the actual results:
PC Click here to play
Scan QR code to play under the phone

If you want to make improvements in this game, click here.

Before beginning to explain, make an advertisement, welcome HTML5 game Development enthusiasts scan the QR code below or search group number 223466431, join the developer QQ Group, we provide the fastest development tool for free, all of our HTML5 games are open source.

The entire game development, based on the online H5 game development tool Tangide, related development documents Click here, development video is being made ... If you are committed to developing H5 light applications, please click here

1. Preparatory work

Browser opens Tangide link, the upper right corner has the login button, select QQ login.
Browsers recommend Google Chrome or Cheetah browser.

2. Create the first scene

After opening the tool, there is a default scene, this scene can be our first scene, the inside of the football and the lawn deleted, the scene changed to Win-loading, and then change the background for "Loading background. jpg". Picture resources are below the public resources directory:

Drag a music control to come in, clear the default background music, select "Background music" under the Resources menu. mp3 As background music, tick "autoplay" and "loop" two options, uncheck "Runtime visible Option" in the General tab.

All done, the results are as follows

3. Create a second scene

Create a new scene and change the scene name to Win-start.
Drag a picture in, set the picture to "title 1.png", place it at the top of the scene, and follow the settings in the location and size properties:

Several other picture controls are similar.

Drag two text controls in to indicate fractions and times.

One of the key elements here is snowflakes, drag a picture control to come in, set the picture to "Snowflake. png", here you need to split the picture, by long press the picture will pop-up menu, select "Split image", fill in the number of rows


Once again, you can choose a small map inside.

After selecting the picture, you need to use the animation editor (check the control, the menu bar has a villain icon is).

Create an animated rotate, set up as

This time, click on the preview and snowflakes will be able to go on.

Drag two more buttons to enter, place "Start button 1.png", "Start button T2.png" respectively.

Finally, drag a frame animation come in, in the unique properties, select "Melanin. png" as the frame animation elements, according to the above method to split the picture, select the No. 0, 1 pictures, the frame rate is set to 3.

When all is done, such as:

4. Create a third scene

Create a new scene, rename to Win-game, and other controls to be placed as the second scene.
Then, the final control is the implementation of the Gopher (that is, melanin):
First drag a picture control to come in and empty the background image.
Drag another frame to animate the picture as a child of the picture control.
Use the motion editor to set up three animations for frame animations, as shown in:



Select a picture for the frame animation, in the unique attribute, split the "melanin. png", and then set up 2 groupings, such as:


Then select the parent control of the frame animation, copy 7, place it in the appropriate position, and adjust the rotation angle to make it look more beautiful.

Drag another frame animation, as a bit of effect, select "Essence. png" As a frame animation picture, picture splitting and grouping as above no longer repeat.

Finally, drag a clock control to do the countdown, the unique properties of the duration set to 1000.
When all is done, such as:

5. Write a little code

Other game scenes no longer repeat, the reader can edit and reference, until now, the game has been prepared to do, we have not written a line of code, but click on the preview, you can already see most of the effect, but can not respond to events.
Now it is time to write some code, in fact, a lot of code can also be automatically generated.
The first scene switch, such as the first scene switch to the second scene of the code can be automatically generated, select the scene, edit the onclick event.

Click Generate Code.

The second scene also switches to the third scene and can be a gourd.

Now focus on the implementation of a third scenario.
Select the parent control for the melanin frame animation, the editor Onupdatetransform event, and add the following code:

canvas.beginPath();canvas.arc(this1this1this102Math.PI);canvas.clip();

These three lines of code, the realization of melanin (that is, the hamster) hiding and display.

In the Onbeforeopen of the third scenario, add the following code:

varWin = This. GetWindow ();varState_in =0;varState_out =2;varState_free =3;varstate_attacked =4; win.attacked =0; win.total =0; win.times = -; win.gameover =false;varDropper = Win.find ("Dropper"); Win.find ("Ui-icon-general-1"). setvisible (true);varResetState = function() {    if(Win.gameover | |! This. Children) {return; }varSelf = This;varelement = self.children[0];    win.total++; Element.opacity =1; Element.x = $; Element.y = $; Element.play ("Normal");    Self.gamestate = state_in; Element.animate ("Display", function() {Self.gamestate = State_free; SetTimeout ( function() {            if(Self.gamestate = = = State_free)                {self.gamestate = State_out; Element.animate ("Dismiss"); } setTimeout ( function() {                if(self)                {self.resetstate (); }            }, -+ -*Math. random ()); }, the); });};varHandleclick = function(point) {    varSelf = This;if(Self.gamestate = = = State_free)        {win.attacked++; Win.find ("ui-attacked"). SetText (win.attacked +"Ko"); Dropper.animate ({xstart:dropper.x, xend:self.x + -, Duration: -}, function() {Dropper.play ("Drop",1, function() {Dropper.play ("Normal",1);        });        }); Self.gamestate = state_attacked;varelement = This. children[0]; Element.play ("attacked",1, function() {Element.animate ("Disappear", function() {});    }); }}; for(vari =1; I <=7; i++) {varMelanin = Win.find ("ui-sprite-general-"+ i);    Melanin.resetstate = ResetState; Melanin.handleclick = Handleclick;varEle = melanin.children[0]; Ele.setposition ( $, $);}varindex =1; function launch() {    varMelanin = Win.find ("ui-sprite-general-"+ index); Melanin.resetstate ();if(Index <7) {index++; SetTimeout (Launch, the*Math. random ()); }}launch ();

Add the following code under the OnTimeOut event for the clock control:

var  win =  This . GetWindow (); if  (win.gameover) {return ;} Win.times--;win.find ( "Ui-times" ). SetText (win.times +  "S" "); if  (Win.times <= 0 ) {win.gameover = true ; var  initdata = {}; Initdata.total = Win.total; initdata.attacked = win.attacked; this . Openwindow ( "Win-result" , function   (Retdata)  { Console.log ( "window closed." ), false , InitData);} 

TIPS:
If you want to see all the code, you can select the Code Viewer

If you feel preface and want to continue to improve on my basis, click here.
If there is any question or advice, welcome Dabigatran 223466431 Discussion, thank you!

Tangide game development of 60 lines of code to achieve the fight gopher