HTML5 JS implementation of Tetris principles and specific steps_html5 tutorial skills

Basic principles for the implementation of this game:

The game area is an area of ​​limited size. The game area of ​​this game has 21×25 rectangles. Each rectangle has a width of 10 units and a height of 6 units (the absolute unit of canvas is fixed, not pixels).

Create the RusBlock class to contain corresponding data and behavior, and create a two-dimensional array aState[21][25] to record the marked rectangle in the game area.

Tetris has 7 parts. The number and position of the rectangles occupied by each part are different, so create a part class, and then create an array to store the 7 parts. Each part contains an array to store the rectangle occupied by the part. The number and position of rectangles. When the falling part reaches the bottom, a new part will be generated, and the marked rectangle of the part will be assigned to the array of the game area.

In the game loop function, print the falling parts, the fixed parts, and the next falling parts.

Basic knowledge:

HTML5 CSS JS
This game includes three files:

RusBlock.html: Setting elements
RusBlock.css: Setting style
RusBlock.js: Script control

Step One: Interface Settings and Material Preparation

RusBlock.html

Copy code

The code is as follows: