HTML5 game 20 lines of code to achieve the fight gopher

Previously wrote a hamster blog 70 lines of code to achieve the game, after careful thinking, found that 70 lines of code is a bit redundant, the application of Tangide control features, to reduce the amount of code to about 20 lines.

Show the results first, click to play: Hit the hamster. or scan two-dimensional code:

Let's say you want to improve on this game. Click here.

Before you start the commentary, make an advertisement. Welcome to HTML5 game Development enthusiasts scan the QR code below or search group number 223466431, increase the QQ group of developers, we provide the fastest development tools free of charge. All of our HTML5 games are open source.

Development of the entire game. Based on online H5 game development tools Tangide, related development documents Click here to watch the development video click here. If you are committed to developing H5 light applications, please click here.

1. Preparatory work

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

Game Required Resources folder: Shared resources/Resource Kit/Templates/Gopher/

2. Create the first scene

After opening the tangide, there are two default scenarios, one is the resource loading form, can be used without tube, and there is a default main scene. This scene can serve as our first scene. Delete the football and the lawn, change the scene to "Start interface", and then alter the background. Drag and drop the required controls in turn, as you can see from the following:

controls, sound controls, respectively. Background music control edit-specific properties:

3. Create a second scene

Create a new scene and change the scene name to "Game interface".

Production of Hamsters:

A, drag a picture control to come in. Empty the background image.
b, drag a frame animation to the picture. As a sub-control of this picture control.

C, in the unique properties of the frame animation to add the mouse frame animated picture.

D, group the frame animation.

E. Use the animation editor to add a hole-in animation to the Gopher.

F, edit the onclick event of the frame animation. Add the following code, which responds to the hit action, plays the sound and scores the same time, playing the animated effect:

var win = This.getwindow (); Win.hammer.setPosition (This.getparent (). X,this.getparent (). y); Win.hammer.animate ("Down Win.playsoundeffect ("hit. mp3", function Ondone () {Console.log ("play Finished");}); Win.score++;win.find ("cloud/Scoreboard/Score"). SetValue (Win.score); var ele = This;ele.play ("hit", 2, function () {    Ele.play (" Out ");});

G, the parent control of the selected frame animation. Edit its Onupdatetransform event. Include the following code, which indicates that the control only displays a fixed area, assuming that the child controls are outside the area and do not display, to achieve the entrance and exit hole effect of the hamster.

<pre class= "javascript" name= "code" >canvas.beginpath (); Canvas.rect (0,0,this.w,this.h); Canvas.clip ();

In this way, a complete hamster is done, and there are 16 hamsters in the game interface. Do the first one. The rest of the copy and paste is available.

Gopher Hole:

Gopher hole also need a picture to indicate, copy and paste 16, placed in turn below the hamster can.

Control of game time:

Drag a timer into the scene, set the number of runs in the unique attribute to 1, and the duration to 30000. Represents the entire game for just 30s.

Edit the OnTimeOut event, create a pre-defined event, and open a new form.

var InitData = This.getwindow (). Score;this.openwindow ("End Interface", function (retdata) {console.log ("window closed.");}, False, InitData);

The realization of random entrance and exit hole of Hamster:

Drag a timer into the scene to set the number of runs in the unique attribute to 1000000 and the duration to 500. Represents 0.5s let a hamster out of the hole.

Edit the OnTimeOut event, this code randomly chooses a conflict, let it play out the hole animation.

var win = This.getwindow (), var index = Math.floor (Math.random () * +); Win.find ("tangent-" + index). Getchild (0). Animate ("Up");

A complete interface

Initialization of the game:

Edit the scene's Onbeforeopen event, this code is mainly in the game before the beginning of the score zeroed, the hamster hidden.

var win = This.getwindow (); var me  = This;win.resetgame (); win.score = 0;win.hammer = Win.find ("Hammer"); Win.hammer.setPivot (1,0.5); for (var i = 0; i <; i++) {    var gopher = win.find ("tangent-" + i). Getchild (0);    Gopher.setposition (gopher.x, GOPHER.Y + 100);}

More than 20 lines of code above. It's over. A full-featured mouse game that contains rich animations, sound effects, and even sharing.

The end of the scene is easy, don't repeat it.

Welcome to increase QQ Group 223466431 Exchange.

HTML5 game 20 lines of code to achieve the fight gopher