Design idea and Implementation of the Javascript version of Tetris

Tetris is a memory of childhood. From the black and white game machines on the palm of the hand to TV game machines to computers, there is no trace of it, today, let's review one of its implementation methods. It's just a matter of sorting out my ideas ......
1. Replace the entire square with center coordinates
2. Use mathematical coordinate points to represent actual coordinates
3. Uniform Conflict Detection Methods

Problem Analysis:
The Tetris falls from top to bottom and is fixed. When a line is full, this line is eliminated. We can easily think of the class and object analysis design ideas, to create two objects, one is a square object and the other is a control object. Here, we add an object, which is called a widget object. So far, this game has three objects, which are described as follows:
Cube: it refers to the entire square that appears. Each square is composed of four small blocks. There are 7 kinds of blocks, each of which has several States, and each has its own behavior.
Control Object (fangkuai): The name of this object cannot start, and is temporarily called a control object. It controls the movement, fall, and deformation of the square when, and has its own status map.
KIT: a small object that integrates the attributes and methods of some announcements.
Now, let's take the square with six rows and six columns as an example.
First, we create a coordinate system, which takes the upper left corner as the origin, the horizontal direction as the X axis, and the vertical direction as the Y axis,

At the beginning, the square appears from the top point, and (3, 0) points represent its position. after a certain period of time, after the detection can move down, the vertical coordinate of the central coordinate is added to 1, is (3, 1), so keep moving down until the judgment can not be moved down, the central coordinate of the square object is (x1, Y1), the coordinates are handed over to the control object, the control object sets the four vertices corresponding to its State Matrix to 1. In this case, the row is detected and then the coordinate of the square is (3, 0) again.
Uniform conflict detection methods:
That is, whether you move left, right, move down, deformation, or so on, check for conflicts in a unified way, that is, if the corresponding operation is performed, check whether there is 1 in the matrix coordinate corresponding to the coordinate of the square. If yes, there is a conflict and you cannot perform this operation. In particular, if there is a conflict in the downward movement, it is the beginning. Therefore, for unified cross-border check, the boundary also has coordinates and is 1
Design Philosophy

The interaction between the square and the control object is only the interaction of the abstract mathematical coordinates and does not involve actual coordinates. In this way, the understanding and operation are simple and the scalability is strong.
Specific design
Square object:
Attribute:
{Category, coordinates of four small blocks, center coordinates, color, status}
Behavior:
Display: draws Blocks Based on types, status, color attributes, and central coordinates.
Move down: Add 1 to the ordinate coordinate of the Center Coordinate (Y) and execute the display method.
Shift left: Subtract 1 from the X of the center coordinate and execute the display method.
Right Shift: Add 1 to the abscissa (x) of the center coordinate and execute the display method.
Deformation: Add 1 to the status attribute and execute the display method.
Color Changing: The color attribute changes.
Change type: Random value of Type property
Control object:
Attribute
{Status matrix}
Behavior:
Drawing: draws the actual Graph Based on the State coordinates.
Check row Elimination: determines whether a certain column of the state matrix is set to 1. If so, this column is eliminated, the score is added with 1, and the rear column is moved forward.
Determine the Left shift: After the horizontal coordinate of the center coordinate of the square is-1, check whether the matrix coordinate corresponding to the four coordinates of the Square exists 1. Otherwise, you can
Right Shift: After the horizontal coordinate of the center coordinate of the square is + 1, check whether the matrix coordinate corresponding to the four coordinates of the Square exists and cannot be shifted to the right. Otherwise, yes.
Move down: After the vertical coordinate of the center coordinate of the square is + 1, check whether the matrix coordinate corresponding to the four coordinates of the Square exists and cannot be moved down. Otherwise, you can
Deformation judgment: After the square state attribute is + 1, check whether the matrix coordinate corresponding to the four coordinates of the Square exists 1 and cannot be deformed. Otherwise, you can
Control left shift: execute the judgment method. If yes, execute the Left shift method of the square.
Control Right Shift: execute the judgment method. If yes, execute the right shift method of the square.
Control move down: execute the judgment method. If yes, execute the Move Down Method of the square. Otherwise, it is the first step. Set the State Matrix coordinate corresponding to the coordinate of the square to 1 and execute the drawing method, check the elimination line, and then execute the drawing method. Then, execute the change type method and the color change method of the square. Then, change the center coordinate of the square and start to appear again from the top.
Control deformation: execute the judgment method. If yes, execute the deformation method of the square.
Register events: execute control deformation by up, move left by left, control right by right, and move down by down
Set the timer: different levels, different times, execute the control move-down method once at this time

Widget object:
Method:
Mathematical coordinates to actual coordinates:
The center coordinates are obtained as follows:
The actual block displayed by the mathematical coordinate point, for example (). This method displays an actual block on the webpage.
And so on.
Advantages:
1. There are only three objects, so there will not be many objects because of the Continuous Generation of squares, which wastes space. There is only one square object and it will be reused.
2. Strong scalability and clear thinking. No matter how many rows or columns are there, the Code does not need to be modified.
3. Few codes are implemented.
Disadvantages:
The matrix is not transposed. This eliminates rows instead of columns in the eliminated matrix. This is relatively simple.
Specific implementation code:
Make sure jquery. JS is introduced.

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang = "en"> 

 

 
  

 
  
The size is 93.9 kb.

 

 

 
  

 
  
The size is 4.3 kb.

 

 

 
  
Eluosi.zip (24.1 KB)
 
  
Downloads: 426

 

 

 
  
View image attachments