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

Today, I would like to share with you the relevant knowledge about how to achieve the WebGL 3D version of Tetris by HTML5. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's learn about it.

Preface

Abstract: 2D Tetris has been broken, on a whim to make a 3D game machine, used to play Tetris. The basic idea is to first implement Mini Game Tetris on 2D, then create a 3D arcade model using 3D modeling function, and finally paste 2D Mini Game on the 3D model.

First, complete the 2D Mini Game first.

In the process of viewing the official documents, I learned that the component parameters of HT are saved in the ht.DataModel () object, and the data model is loaded in the view to present various special effects.

GameDM = new ht.DataModel (); / / initialize the data model

G2D = new ht.graph.GraphView (gameDM); / / initialize the 2d view

G2d.addToDOM (); / / create a view on the page

Start the creation of the game model

First, let's create a frame for the game and limit the scope of the game. In the document, we can know that ht.Node is the basic class of graphView rendering node elements, which can not only display pictures, but also support a variety of predefined graphics. So I'm going to use this class to create four rectangles and use them to limit the scope of the game.

Var lineNode = new ht.Node ()

LineNode.s ({

"shape": "rect", / / rectangle

"shape.background": "# D8D8D8", / / set the background color

"shape.border.width": 1, / / Border width 1

"shape.border.color": "# 979797" / / Border Color

});

LineNode.setPosition (x, y); / / sets the display position of the elements. The upper left corner is 0, and the coordinates of the 0 elements point to their center.

LineNode.setSize (width, height); / / set the width and height attributes of the element

GameDM.add (lineNode); / / add the set element information to the data model

We can get the first figure after setting XRV 552, YRZ 111, width:704, height:22:

Now that you have the top of the border, let's create three more edges to form a box:

X:211, y:562, width:22, width:880

X:893, y:562, width:22, width:880

X:552, y:1013, width:704, width:22

The results are as follows:

The border is almost complete, and it is found that 4 borders can be dragged during browsing. Next, adjust the method of border initialization:

LineNode.s ({

"shape": "rect", / / rectangle

"shape.background": "# D8D8D8", / / set the background color

"shape.border.width": 1, / / Border width 1

"shape.border.color": "# 979797", / / Border color

"2d.editable": false, / / editable or not

"2d.movable": false, / / whether it is mobile or not

"2d.selectable": whether false / / is selectable

});

To generate squares, my idea is to generate multiple squares, combine them into the graphics we need, and put them in the corresponding position through the calculation of coordinates:

After the square is generated, you begin to rotate the drawing. There are two schemes, the first is to save the flipped coordinates of the graph in the array sequentially, and each time to change the shape, take the former or the latter group of coordinates in the array to change; the second is to use the ht.Block () object to combine the corresponding elements into a whole, and only need to select 90 °according to the corresponding direction when deforming. Here, I chose the second method, and the code is as follows:

Function createUnit (x, y) {

Var node = new ht.Node ()

Node.s ({

"shape": "rect"

"shape.background": "# D8D8D8"

"shape.border.width": 1

"shape.border.color": "# 979797"

});

Node.setPosition (x, y)

Node.setSize (44, 44)

GameDM.add (node)

Return node

}

Var block = new ht.Block ()

Block.addChild (createUnit 552,133)

Block.addChild (createUnit (552,89)

Block.addChild (createUnit 508,133)

Block.addChild (createUnit 596,133)

Block.setAnchor (0.5,0.75); / / sets the center position of the combination, which will be installed when rotating

Block.setPosition (552144)

These are all the contents of the article "how to achieve WebGL 3D Tetris with HTML5". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.