JavaScript to implement Tetris game process analysis and source code sharing _ javascript skills

This article mainly introduces how JavaScript implements the game process analysis and source code sharing in Tetris. This article breaks down the game rules, implementation processes, difficulties analysis and implementation source code, for more information, see the beauty of programming: "Although the program is hard to write, it is wonderful. To write a program well, you need to write basic knowledge, including programming languages, data structures, and algorithms. The program is well written and requires meticulous logic thinking and a good foundation for organizing the program, and is familiar with the programming environment and programming tools ."

After years of computer learning, do you fall in love with programming. In other words, I did not try to write a game on my own, so I do not love programming.

The sensation and economic value caused by Tetris can be said to be a major event in the game history. it seems simple but changeable and addictive. I believe that most of the students have been obsessed with it.

Game rules

1. a plane virtual site for placing a small square. its standard size is 10 rows in width and 20 columns in height, in the unit of each small square.

2. a group of Rule images composed of four small squares. The group is called Tetromino in English, and there are 7 types of squares in Chinese, they are named in the shape of S, Z, L, J, I, O, and T.

I: a maximum of four layers can be eliminated at a time.

J (left and right): eliminates a maximum of three layers, or eliminates two layers.

L: three layers can be eliminated at most, or two layers can be eliminated.

O: eliminate layer 1 to layer 2

S (left and right): a maximum of two layers, which may easily cause holes

Z (left and right): a maximum of two layers, which may cause holes

T: a maximum of two layers

The square will slowly continue falling from the top of the area. Players can rotate the square in 90 degrees, move the square around in the unit of a grid, so that the square is accelerated. When the block is moved to the bottom of the area or the block cannot be moved to other blocks, it is fixed here, and the new block appears above the area and begins to fall. When a column in the area is filled with blocks, the column disappears and becomes the score of the player. The more columns are deleted, the higher the score index.

Analysis and solution

When each block falls, we can:

1) rotate in the proper direction

2) horizontally move to a column

3) vertical drop to the bottom

First, you need to use a two-dimensional array, area [18] [10] represents the 18*10 game area. The value 0 in the array indicates null, and 1 indicates square.

There are 7 types of blocks, each of which has four directions. Define activeBlock [4]. The value of this array is predefined before compilation and used directly in the program.

Difficulties

1) border check.

// Check the left boundary and try to move one to the left to see if it is legal. Function checkLeftBorder () {for (var I = 0; I
2) the rotation requires mathematical logic. a point is rotated 90 degrees relative to another point.
3) timing and listening to keyboard events allow the game to run automatically.
// Start function begin (e) {e. disabled = true; status = 1; tbl = document. getElementById ("area"); if (! GenerateBlock () {alert ("Game over! "); Status = 2; return;} paint (); timer = setInterval (moveDown, 1000);} document. onkeydown = keyControl;
Procedure
1) click Start> to create an active image and set the timer.
// The square of the current activity. it can be moved left and right down and changed. When the base is reached, the area; var activeBlock; // produces the square shape, which has seven basic shapes. Function generateBlock () {activeBlock = null; activeBlock = new Array (4); // random generation of 0-6 arrays, representing 7 forms. Var t = (Math. floor (Math. random () * 20) + 1) % 7; switch (t) {case 0: {activeBlock [0] = {x: 0, y: 4 }; activeBlock [1] = {x: 1, y: 4}; activeBlock [2] = {x: 0, y: 5}; activeBlock [3] = {x: 1, y: 5}; break ;} // omit part of the code .............................. case 6: {activeBlock [0] = {x: 0, y: 5}; activeBlock [1] = {x: 1, y: 4 }; activeBlock [2] = {x: 1, y: 5}; activeBlock [3] = {x: 1, y: 6}; break ;}} // check whether the four small squares that have just been produced can be placed in the initialization position. for (var I = 0; I <4; I ++) {if (! IsCellValid (activeBlock [I]. x, activeBlock [I]. y) {return false ;}} return true ;}
2) after each downward movement, check whether the bottom is reached. if the bottom is reached, try to cancel the operation.
// Delete function deleteLine () {var lines = 0; for (var I = 0; I <18; I ++) {var j = 0; (; j <10; j ++) {if (area [I] [j] = 0) {break ;}} if (j = 10) {lines ++; if (I! = 0) {for (var k = i-1; k> = 0; k --) {area [k + 1] = area [k];} area [0] = generateBlankLine () ;}} return lines ;}
3) Create an activity chart and set the timer.

To be optimized
1) set the color of blocks of different shapes.
Idea: In the create block function, set activeBlockColor. the colors of the seven different forms of blocks vary. (in addition to modifying the generateBlock method, you also need to modify the paintarea method. Due to incomplete consideration at the beginning, after a row is eliminated, the color of the re-painted square is unified. Therefore, you can consider removing n rows in the table and then adding n rows at the top, to ensure the integrity of blocks is not eliminated ).
2) when the current square falls, you can view the next square in advance.
Idea: split the generateBlock method into two parts. one part is used to randomly try the next square, and the other part is used to cache the square currently to be depicted. When the current square is fixed at the bottom, the next square begins to be depicted, and a new square is randomly generated again. This is repeated.
Complete HTML source code:
  Tetris 
     
Score: 0