TangIDE game development: 70-line code implementation for ground rat and tangide70-line

TangIDE game development: 70-line code implementation for ground rat and tangide70-line

For friends who have never been familiar with html, they do not know where to start to implement the simplest html5 hamster game. Even html experts, without thousands of lines of code, cannot be a decent hamster game.

I found an open-source hamster game on the Internet (see). I gave a rough look at the code, with over 1000 lines of code.

Today, I want to introduce the main logic code of the hamster game, which is more than 60 lines. All the code is more than 100 lines. It is a complete commercial game customized for a customer, most of the functions can be completed in just one afternoon.

Let's take a look at the actual results:
PC click here to play
Scan QR code at the bottom of your phone

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

Before getting started, make an advertisement. html5 game developers are welcome to scan the QR code below or search for group number 223466431. Join the developer's QQ Group. We provide the fastest development tool for free, all of our html5 games are open-source.

The development of the entire game is based on the online H5 game development tool TangIDE. Click here for relevant development documents. The development video is being produced... If you are dedicated to developing H5 light applications, click here

1. Preparations

Open the TangIDE link in the browser, and click "Log on" in the upper-right corner. Select "QQ login.
Google or cheetah browsers are recommended for browsers.

2. Create the first scenario

". Image resources are stored in the public resource directory:

Drag a music control file to clear background music. Select the background music under the Resource menu as the background music, select the "automatic playback" and "loop" options, and deselect the "RunTime visible options" in the General tab ".

The results are as follows:

3. Create the second scenario

Create a new scenario and change the scenario name to win-start.
Drag an image and set the image to images before 1.png. Place it at the top of the scene and set the location and size attributes:

Several other image controls are similar.

Drag two text controls to display the score and time.

Here, I want to talk about a snowflake, drag an image control, and set the image to Snowflake. PNG. here we need to split the image by pressing the image to bring up the menu, select "split image", and enter the number of rows and columns.


You can select the thumbnail when you select the image again.

After selecting an image, you need to use the animation Editor (the selected control has a villain icon on the menu bar ).

Create an animation rotate, as shown in figure

At this time, Click Preview and the snowflake will be able to continue turning.

Then, drag two additional buttons to separate them. The default option is 1.png, and the default option is t2.png ".

Drag a frame of animation at the very bottom, and select .png as the frame animation element. Split the image using the above method, select the first image, and set the frame rate to 3.

After all, such:

4. Create the third scenario

Create a new scenario and change it to win-game. place other controls in the same way as in the second scenario.
Then, the final control is the implementation of the mouse (I .e. melanin:
Drag an image control to clear the background image.
Drag another frame to the image as a sub-control of the image control.
Use the animation editor to set three animations for the frame animation, as shown in:



Select an image for frame animation, and split it into two groups, for example:


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 a frame for animation, and choose ".png" as the frame animation image. The image splitting and grouping will not be repeated above.

Finally, drag a clock control for countdown, and set the time length of the special attribute to 1000.
After all, such:

5. Write a little code

Other game scenarios are not described in detail. Readers can edit and reference the game by themselves. Up to now, the game preparation has been completed. We haven't written a line of code yet, But Click Preview, you can see most of the results, but you cannot respond to events.
Now we should write some code. In fact, many codes can be automatically generated.
First, the scenario is switched. For example, the Code for the first scenario to the second scenario can be automatically generated. Select the scenario and edit the onClick event.

Click Generate code.

The second scenario can also be switched to the third scenario.

Now we will focus on the implementation of the third scenario.
Select the parent control of the melanin Frame Animation, edit the onUpdateTransform event, and add the following code:

canvas.beginPath();canvas.arc(this.w >> 1, this.h >> 1, this.w >> 1, 0, 2 * Math.PI);canvas.clip();

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

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

var win = this.getWindow();var STATE_IN = 0;var STATE_OUT = 2;var STATE_FREE = 3;var STATE_ATTACKED = 4;win.attacked = 0;win.total = 0;win.times = 30;win.gameOver = false;var dropper = win.find("dropper");win.find("ui-icon-general-1").setVisible(true);var resetState = function() {    if(win.gameOver || !this.children) {        return;    }    var self = this;    var element = self.children[0];    win.total++;    element.opacity = 1;    element.x = 200;    element.y = 200;    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();                }            }, 1200 + 800 * Math.random());        }, 1500);    });};var handleClick = function(point) {    var self = this;    if(self.gameState === STATE_FREE) {        win.attacked++;        win.find("ui-attacked").setText(win.attacked + "ko");        dropper.animate({xStart:dropper.x, xEnd:self.x + 50, duration:400}, function() {            dropper.play("drop", 1, function() {                dropper.play("normal", 1);            });        });        self.gameState = STATE_ATTACKED;        var element = this.children[0];        element.play("attacked", 1, function() {            element.animate("disappear", function() {            });        });    }};for(var i = 1; i <= 7; i++) {    var melanin = win.find("ui-sprite-general-" + i);    melanin.resetState = resetState;    melanin.handleClick = handleClick;    var ele = melanin.children[0];    ele.setPosition(200, 200);}var index = 1;function launch() {    var melanin = win.find("ui-sprite-general-" + index);    melanin.resetState();    if(index < 7) {        index++;        setTimeout(launch, 1500 * Math.random());    }}launch();

Add the following code to the onTimeout event of 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 view all the code, you can choose tool> code viewer.

If you feel itchy after reading it, and want to continue improving it on my own, click here ,.
If you have any questions or suggestions, please join group 223466431. Thank you!