Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to make web games in HTML5". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to make web games in HTML5.

(1) rules of the game:

1. When you start the game, the mobile phone appears in any space on the top line.

2. At the beginning of the game, colored stones fall randomly from top to bottom, filling all the boxes. The same three stones cannot be arranged in a row or a row next to each other.

3. If the mobile phone moves from the top to the bottom line of any grid, even if the victory, or the end of game time, the elimination of more than 30 stones is considered a victory.

(2) the method of playing games

As long as three identical stones are arranged in a row or row next to each other, they will disappear, and at the same time the stone above will fall and fall into the position of the lost stone.

Game animation demonstration:

Design ideas:

The game begins with a stone array of 8'8 = 64, which will fall from top to next. The stones of the array are stored in an array. Every stone has its own type.

Add inputstart and inputend event listeners to stone objects. Realize click input and drag input. When there is a valid input, swap the corresponding two adjacent stones. While waiting for testing, find out whether there will be a condition to eliminate the stone, and if not, it will be exchanged back.

After the game starts, the runcheck () function is called every frame to check whether there is a condition for generating a deleted stone. The way to detect it is to first traverse the array by line to see if there are more than three consecutive adjacent stones of the same type. Then press the column to go through the array again to see if there are more than three consecutive adjacent stones of the same type. If so, remove the same stone, generate a new one, and fall 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); / / listens for inputstart events

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

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

Instance.scene.setSegment (run); / / dynamic segment with vanishing special effects

Instance.scene.playSegment (static

Return instance

}

Function parameters:

The type of stone object that type Number wants to generate, there are seven different types of stone.

The subscript of the stone to be generated by index Number in the array.

PosY Number generates the Y-axis coordinates of the stone because the newly generated stone falls in turn.

The generated stone is added to the array

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

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

two。 Remove the stone

Remove stone objects from the stage scene

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

StoneArray [xiaoArray [x] .num]. Obj = null

StoneArray [xiaoArray [x] .num]. Type = 0

3. Generate a new stone object

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

Thank you for reading, the above is the content of "how to make web games in HTML5". After the study of this article, I believe you have a deeper understanding of how to make web games in HTML5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.