Sample code for WebGL 3D version of Tetris based on HTML5

Summary: 2D Tetris has been played badly by people, so on a whim, I made a 3D game console for playing Tetris. . . The basic idea of ​​implementation is to first implement the Tetris mini-game in 2D, then use the 3D modeling function to create a 3D arcade model, and finally paste the 2D mini-game onto the 3D model.

(ps: The final expansion part realizes the combination of video and 3D model)

http://www.hightopo.com/demo/tetris/

First, complete the 2D mini-game

In the process of checking the official documents, I learned that the component parameters of HT are stored in the ht.DataModel() object, and various special effects are presented after loading the data model in the view.

 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 creating game models

The first step is to create a frame for the game and define the scope of the game. In the document, we can know that ht.Node is the basic class for graphView to render node primitives. In addition to displaying pictures, it can also support a variety of predefined graphics. So I'm going to use this class to create 4 rectangles and use them to scope 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); // Set the element display position, the upper left corner is 0, 0 The coordinates of the primitives point to their center positions lineNode.setSize(width, height); // Set the width and height attributes of the primitives gameDM.add(lineNode); // Add the set primitive information to the data model

After setting x:552, y:111, width:704, height:22 we can get the first graphic:

The top of the border is already there, now let us create another three sides to form a frame:

 x:211, y:562, width:22, width:880x:893, y:562, width:22, width:880x:552, y:1013, width:704, width:22

The result is as follows:

The borders are basically completed. During the browsing process, I found that 4 borders can be dragged. Next, adjust the border initialization method:

 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, // Whether it can be edited 2d.movable : false, // Whether it can be moved 2d.selectable : false // Whether it can be selected });

To generate squares, my idea is to generate multiple squares, combine them into the graphics we need, and place them in the corresponding positions through coordinate calculation:

After the block is generated, start the rotation operation on the graphics. There are two solutions. The first is to store the flipped coordinates of the graphics in an array in order, and each time the shape is changed, take the previous or next set of coordinates in the array to make changes; the second is to save the flipped graphics coordinates of the graphics in order. The ht.Block() object is used to combine the corresponding primitives into a whole. When deforming, you only need to select 90° in the corresponding direction. Here, I chose the second method, 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); //Set the center position of the combination. This point will be installed when rotating block.setPosition(552, 144);

Block sets the center point Anchor as shown below:

When setting the rotation, just use the setRotation function to rotate the block: