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 the Center Coordinate. 2. to... syntaxHighlighter. all (); 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 the Center Coordinate. 2. use mathematical coordinate points to represent the actual coordinate 3. uniform conflict detection method problem analysis: The Tetris is a falling block from top to bottom, fixed, when a row is full, this line is eliminated, the class and object analysis design ideas, we can easily think of creating two objects, one being a square object and the other being a control object. Here, we add an object, which I call a widget object. So far, this game has a total of three objects, which are described as the following square object (cube): that is, the entire square that appears, each of which consists of four small blocks, a total of seven blocks, each square has several States, and each square has its own behavior control object (fangkuai): This object's name is not good enough and is temporarily called a control object, it controls the movement, fall, and deformation of blocks. It has its own state map widget object (kit): a small object, it sets the attributes and methods of some announcements. Now, we use a column of 6 rows and column of Tetris as an example. We first create a coordinate system, which uses the upper left corner as the origin and the horizontal direction as the X axis, the vertical direction is the Y axis. At the beginning, the square appears from the top point. (3, 0) points represent its position. After the detection can move down, then, the vertical coordinates of the Central Coordinates are added to 1, which is (3, 1). This keeps moving down until the judgment fails. The central coordinates of the square object are (x1, y1 ), the coordinates are handed over to the control object. The control object sets the four vertices of its State Matrix to 1. At this time, it detects the elimination of rows, let the coordinate of the square be changed to (3, 0). The unified conflict detection method is implemented: Whether you are moving left, right, down, deformation, etc., the detection of conflicts is a unified method, 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 the operation cannot be performed. In particular, for moving down, conflict exists in the beginning. Therefore, in order to unify the cross-border check, the boundary also has coordinates. For 1, the interaction between the thought square and the control object is only the interaction of the abstract mathematical coordinates, it does not involve actual coordinates. In this way, the understanding and operation are simple, and the scalability is strong. Specific design block objects: attribute: {type, location coordinates of four small blocks, Central Coordinates, color, status} action: Display: draws the box downward Based on the type, status, color attribute, and central coordinate. The vertical coordinate (y) of the central coordinate is added to 1, and the display method is left: the abscissa (x) of the central coordinate is reduced by 1, and the display method is shifted to the right: the abscissa (x) of the central coordinate is increased by 1, the display method is changed: the state attribute is increased by 1, and the display method is changed by color: color Attribute change type: Type attribute random value control object: attribute {State Matrix} behavior: Drawing: Based on the state coordinate, draws the actual graphic detection line: determines whether a certain column of the state matrix is 1. If yes, this column is eliminated and the score is added to 1. The backward column is moved to the left column. After the abscissa of the coordinate of the center of the square is-1, check the status matrix. If there is 1 in the matrix coordinate corresponding to the four coordinates of the square, you cannot move it to the left. Otherwise, you can determine the right shift. After the horizontal coordinate of the center coordinate of the square is + 1, check the status matrix, check whether the matrix coordinate corresponding to the four coordinates of the Square exists as 1 and cannot be shifted to the right. Otherwise, you can determine whether to move down: Check the status matrix after the coordinate vertical coordinate of the square center is plus 1, check whether the matrix coordinate corresponding to the four coordinates of the Square exists 1 and cannot be moved down. Otherwise, you can determine the deformation: Check the status matrix 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 the Left shift: execute the judgment method. If yes, execute the Left shift method of the square to control the right shift: execute the judgment method. If yes, execute the right-shift method of the square to control the move-down: execute the judgment method. If yes, execute the move-down method of the square. Otherwise, it is in the beginning, set the State Matrix coordinate corresponding to the coordinate of the square to 1, execute the drawing method, detect the line elimination, and then execute the drawing method. Then, execute the change type method and color change method of the square, then, change the center coordinate of the square and re-display the control deformation from the top: execute the judgment method. If yes, execute the deformation method registration event of the Square: Execute the control deformation by following up, shift left by left, right by right, and down by down control. Set the timer: different levels, different times, and every other time to control the move-down method. widget object: method: mathematical coordinates to actual coordinates: the center coordinates get four coordinates: the actual block displayed by the mathematical coordinate points, for example (). This method displays an actual block on the webpage. Advantages: 1. there are only three objects, so there will be no more objects due to the constant generation of squares, which is a waste of space. There is only one square object and we will reuse it. strong scalability and clear thinking. No matter how many rows or columns, no code needs to be modified. 3. the implementation code is rare. Disadvantages: the matrix is not transposed. In this way, the elimination of rows is not the column of the eliminated matrix, but the elimination of rows. The specific implementation code is relatively simple: make sure there is jquery. js introduces [js] Tetris By Wang bin_code