Easy-to-use egret-based hamster game ice bucket challenge

Today, I want to teach you how to use egret to create a simple function game called "ice bucket challenge". This is a familiar hamster game. Click on the screen and use the ice bucket to drop stars from the holes, the score is obtained after settlement. Game page layout uses Eui to encapsulate a large number of common UI components to meet most of the interaction interface requirements. developers can develop this game independently in just one day.

The game is as follows:

The game is relatively simple and can be divided into the following scenarios:

· Start scenario

· Game scenarios

· End scenario

· Games

Start scenario

Here, we use Eui to build the UI. set the stage size to 640x960, and set the fill mode to fixedwidth;

The new Eui component is used to change the stage size to 640x960. In the initial scenario, only one image is available for the resource. Drag it in, select the upper and lower fill for constraints, and change the value to the ratio for screen adaptation.

Here, to look like a point to a "Bucket-like" button, drag a button directly and change its alpha value to 0;

The simple code is as follows:

// Start scenario class start extends Eui. component implements Eui. uicomponent {public btn_start: Eui. button; Public Constructor () {super ();} protected partadded (partname: String, instance: Any): void {super. partadded (partname, instance);} protected childrencreated (): void {super. childrencreated (); this. init ();} private Init () {This. height = This. stage. stageheight; // scene jump this. btn_start.addeventlistener (Egret. touchevent. touch_tap, () = {This. parent. addchild (New Game () This. parent. removechild (this) ;}, this )}}

Game scenarios

1. Drag the background image bg_png into the scenario, which is the same as the background image in the Start scenario and is constrained according to the adjusted proportion;

2. Change the size of a group to the stage size, fill the upper and lower constraints, and change touchenbled to false;

3. Due to resource problems, "holes" are fixed. Therefore, you can add a group to change the size of the person's image (touchenbled to false) and add rect as the mask; drag the image of the bucket and pouring water into the bucket (hide the two images). The structure and effect are as follows:

4. Copy eight small groups and place them in a proportional manner. Then, hide the nine groups;

5. code writing:

O enable a heartbeat event

Protected childrencreated (): void {super. childrencreated (); this. init ();} private Init () {Egret. starttick (this. update, this);} // the speed at which private speed = 1; private COUNT = 0; // The heartbeat function private Update (): Boolean {This. count ++; If (this. count = math. floor (120/This. speed) {This. lelechange (); this. count = 0; this. speed + = 0.05;} // determines whether the game is over if (this. time <= 0) {This. parent. addchild (New gameover (); Egret. stoptick (this. update, this); this. parent. removechild (this);} return false ;}

In the UPDATE function, the speed of the control character and the determination of the game end are written;

Private peoplechange () {// random let Ran = math in 9 groups. floor (math. random () * This. group. numchildren); Let G: Eui. group = <Eui. group> This. group. getchildat (RAN); For (let I = 0; I <this. group. numchildren; I ++) {// create if (G. numchildren <4) {If (ran = I) {// random Let random = math among the three character images. floor (math. random () * 3); this. group. getchildat (I ). visible = true; // create a new character image let IMG: Egret. bitmap = new Egret. bitmap (res. getres (gameutil. peopleenemy [random]) // Add it to the random group G. addchild (IMG); // sets the IMG for the character image. mask = G. getchildat (0); Let H = IMG. y; // place the character image below the mask, and then let it move slowly to the top. IMG. Y + = IMG. Height ;}}}}

Then, the slow motion of the character image is written in the lelechange method.

Egret. tween. get (IMG ). to ({y: IMG. y-IMG. height}, 500 ). to ({y: IMG. y}, 500 ). call () => {// after the execution is completed, hide this. group. getchildat (I ). visible = false; // The Position of the character image is reset to IMG. y-= IMG. height; // Delete the character image g from the group. removechild (IMG) // remove the listening IMG. removeeventlistener (Egret. touchevent. touch_tap, () =>{}, this) Egret. tween. removetweens (IMG); G. getchildat (2 ). visible = false; G. getchildat (3 ). visible = false ;})

Click processing of Character Images

IMG. touchenabled = true; IMG. addeventlistener (Egret. touchevent. touch_tap, () =>{// pause the animation TW. setpaused (true) // The image cannot be touched. touchenabled = false; this. tongnum ++; gameutil. constant. score ++; G. getchildat (2 ). visible = true; G. getchildat (3 ). visible = true; this. tongnumtxt. TEXT = This. tongnum. tostring (); // Replace the image IMG. texture = res. getres (gameutil. peopleenemywet [random]); // After ms, the Animation continues to play setTimeout () => {TW. setpaused (false) ;}, 200) ;}, this)

The game uses a simple timing to determine the end, written in the init Method

// Timer Let S = setinterval () => {If (this. time> 0) {This. time --; this. timedownxt. TEXT = This. time. tostring () ;}else {clearinterval (s) ;}, 1000)

End scenario

The game end scenario is relatively simple to set up. Note that the buttons and text must also be proportional;

The code is written as follows:

// End scene class gameover extends Eui. component implements Eui. uicomponent {public btnplayagain: Eui. button; Public btnfenxiang: Eui. button; Public scoretext: Eui. label; Public Constructor () {super ();} protected partadded (partname: String, instance: Any): void {super. partadded (partname, instance);} protected childrencreated (): void {This. height = This. stage. stageheight; super. childrencreated (); this. scoretext. TEXT = gameutil. constant. score. tostring (); this. btnplayagain. addeventlistener (Egret. touchevent. touch_tap, () => {This. parent. addchild (New Game (); gameutil. constant. score = 0; this. parent. removechild (this) ;}, this )}}

Game Management class gameutil

The gameutil game management class contains the score field and the address string enumeration of Character Images in two states;

module GameUtil {    export class Constant {        public static score:number;    }    export enum peopleEnemy {        "person-fs_png" = 0,        "person-lj_png",        "person-ldh_png"    }    export enum peopleEnemyWet {        "person-fs-wet_png" = 0,        "person-lj-wet_png",        "person-ldh-wet_png"    }}

Summary

This article mainly describes the production process of a simple hamster game. The game materials are all from the Internet, and the overall structure and functions of the game are relatively simple. If this article is helpful to you, please leave a message in the comment area below to interact with us!

GitHub Source Code address: https://github.com/duan003387/DaDiShu2

Easy-to-use egret-based hamster game ice bucket challenge