HTML5 game 20 lines of code to achieve the fight gopher

Previously wrote a dozen hamster's 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, you can reduce the code to about 20 lines.

Show the final results first, click to play: Hit the hamster, or scan the QR code:

If you want to improve on 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 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 opens Tangide link, the upper right corner has the login button, select QQ login.
Browsers recommend Google Chrome or Cheetah browser.

Resources required for the game: Shared resources/Resource Kit/Templates/Gopher/

2. Create the first scene

Open Tangide, the default has two scenes, one is the resource loading window, can not tube, and there is a default main scene, this scene can be our first scene, the inside of the football and the grass deleted, the scene renamed the "Start Interface", then change the background, and then drag the necessary controls in, As shown in the following:

Edit specific properties for controls, sound controls, background music controls, respectively:

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 and empty the background image.
b, drag a frame animation to the picture, as the control of the picture of the child control.

C. Add an animated picture of the Hamster's frame to the unique properties of the frame animation.

D, group the frame animation.

E, edit the onclick event of the frame animation, add the following code, this code responds to the strike action, plays the sound effect and scores, while playing the animation effects played:

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

F, select the parent control of the frame animation, edit its Onupdatetransform event, add the following code, which indicates that the control only displays a fixed area, if the child control is outside the area does not display, to achieve the entrance 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, the game interface has 16 hamsters, do the first, the rest of the copy and paste.

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 executions in the unique attribute to 1, and the duration to 30000, which means that the entire game is only 30s.

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

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, set the number of execution books in the unique attribute to 1000000, and the duration to 500, representing the 0.5s to make a hamster 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);}

Above more than 20 lines of code, on completion of a full-featured game, including rich animations, sound effects, and even sharing.

The end of the scene is very simple, do not repeat.

Welcome to join QQ Group 223466431 Exchange.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

HTML5 game 20 lines of code to achieve the fight gopher