[Mugeda HTML5 tutorial 14] Case Study: creating web games

The case to be analyzed in this document is a web games that love to be eliminated. You can use Mugeda APIs and use Mugeda animation to create web games.

(1) game rules:

1. When starting the game, the mobile phone appears in any grid on the top line;

2. When starting the game, color stones are randomly dropped from top to bottom and filled with all the boxes. The same three stones cannot be placed in one column or row adjacent to each other;

3. If a cell phone moves from top to bottom, even if it wins or the game time ends, more than 30 stones are eliminated.

(2) gameplay

As long as the three identical stones are arranged in one column or row adjacent to each other, they will disappear, and the stones above will fall down and fall into the disappearing stone position.

 

Game animation demonstration:

Https://en.mugeda.com/client/preview_css3.html? Id = 5d873601

Design Concept:

The game first generates an 8*8 = 64 stone array, which will be dropped from top to bottom. The array stones are stored in an array. Each stone has a corresponding type.

Add inputstart and inputend event listening to the stone object. Click input and drag input. When there is a valid input, two adjacent stones are exchanged. Wait for the detection to find whether the conditions for removing stones will be formed. If not, exchange them back.

After the game starts, the runcheck () function is called at each frame to check whether the stone is generated. The method of detection is: first traverse the array by row to see if there are more than three adjacent stones in a row of the same type. Then traverse the array by column to see if there are more than three adjacent stones in a row of the same type. If yes, remove the same stone, generate new stones, and drop them down from top to bottom.

 

Key points:

1. generate a new stone object:

Game. createStone = function (type, index, posY)

{

Var j = Math. floor (index/hang );

Var I = num-hang * j;

Var instance = mugeda. createInstanceOfSymbol ('stone '+ type );

Scene. appendChild (instance, null );

Instance. left = (kuan * I );

Instance. top = posY;

Instance. addEventListener ("inputstart", onStart); // listen to the inputstart event

Instance. addEventListener ("inputend", onClick); // listens for inputend events

Instance. scene. setSegment ("static", 0, 0, false); // static segment

Instance. scene. setSegment ("run", true); // The dynamic segment of the deprecated effect.

Instance. scene. playSegment ("static ");

Return instance;

};

Function parameters:

Type Number indicates the type of the stone object to be generated. There are 7 different types of stones.

Index Number: subscript of the stone to be generated in the array.

PosY Number generates the Y axis coordinates of the stone, because the newly generated stone should be dropped in turn.

Add the generated stone to the array

Var instance = Game. createStone (type, (j * hang + I), posY );

StoneArray. push ({obj: instance, type: type, v: v0 });

2. Stone removal

Remove a stone object from a stage scene

Scene. removeChild (stoneArray [xiaoArray [x]. num]. obj );

StoneArray [xiaoArray [x]. num]. obj = null;

StoneArray [xiaoArray [x]. num]. type = 0;

3. generate new stone objects

Var type = Math. floor (Math. random () * 100) % 6;

Var instance = game. createStone (type, (I-x * hang), posY );

StoneArray [I-x * hang]. type = type;

StoneArray [I-x * hang]. obj = instance;

Conclusion: by designing a simple game, you can better understand the usage of the Mugeda API. For details about the APIs used, refer to [Mugeda HTML5 technical tutorial 11] Mugeda API introduction. The logic of the game varies from person to person. Here we will not discuss it in detail. It is recommended that the process be easy and difficult. First, the simplest game should be fully familiar with the usage of the Mugeda API before making a slightly complex game. In the next section, we will make a case study: make mobile courseware.