The idea and method of realizing Tetris game with JavaScript _javascript skill

Look at the beauty of programming: The program, though difficult to write, is wonderful. To write a program well, you need to write some basic knowledge, including programming language, data structure and algorithm. The program writes well, needs the careful logical thinking ability and the good carding Foundation, but also is familiar with the programming environment and the programming tool. ”

Learn a few years of computer, you have no love programming. In other words, no attempt to write a game of their own, is not a love of programming.

Tetris has created a sensation and economic value can be said to be a game in the history of a major event, it seems simple but endless, addictive. Believe that most of the students, once for it is obsessed with tea do not think rice do not want.

Rules of the game

1. A flat virtual space for placing small squares, its standard size: ruled 10, Liegau 20, with each small square as the unit.

2, a group of 4 small squares composed of regular graphics, English known as Tetromino, Zeng Wentong called the square a total of 7, respectively, S, Z, L, J, I, O, t this 7-letter shape named.

I: Remove up to four floors at a time

J (left): Up to three floors removed or two layers eliminated

L: Eliminate up to three layers, or eliminate two layers

O: Eliminate one to two layers

S (left): up to two layers, easily resulting in holes

Z (left): up to two layers, easy to create holes

T: up to two floors

The box starts slowly from above the area and continues to fall. The player can rotate the square in 90 degrees, and move the square to the square to make the box accelerate to fall. When the square moves to the bottom of the area or to the ground to the other squares, it is fixed there, and the new box appears above the area and begins to fall. When a column in a range is filled by squares, the column disappears and becomes the player's score. The more columns that were deleted at the same time, the score index rose.

Analysis and Solution

Each block falls in the process that we can do:

1) Rotate to the right direction

2) horizontal move to a column

3) Vertical drop to bottom

First, you need to use a two-dimensional array, area[18][10] to represent the game area of the 18*10. Where the value in the array is 0 for null, and 1 for blocks.

There are 7 kinds of squares, each of which has 4 different directions. Definition activeblock[4], the value of this array is predetermined before compiling and is used directly in the program.

Difficulties

1) Border inspection.

Check the left edge and try to move one to the left to see if it's legal.
function Checkleftborder () {for 
  (var i=0; i<activeblock.length; i++) { 
    if (activeblock[i].y==0) 
      { return false; 
    } 
    if (!iscellvalid (activeblock[i].x, activeblock[i].y-1)) {return 
      false; 
    } 
  } 
  return true; 
} Similarly, the right and bottom boundaries need to be detected

2 rotation, the need for mathematical logic, a point relative to another point of rotation 90 degrees of the problem.
3 Timing and Monitoring keyboard event mechanism allows 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;

Program Process

1 The user point starts-> constructs an active graph, sets the timer.

The currently active square that can be moved left and right, and the variant. When it touches the bottom, the area will be updated; 
var Activeblock; 
The Production box shape has 7 basic shapes. 
function Generateblock () { 
  activeblock = null; 
  Activeblock = new Array (4); 
  0-6 arrays are randomly generated, representing 7 different 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 newly produced four squares 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 move down, check whether to touch the bottom, if the bottom, then try to eliminate the line.

Elimination 
Function Deleteline () { 
  var lines = 0; 
  for (var i=0; i<18; i++) { 
    var j=0; 
    for (; 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 After the end of the construction of an active graphics, and then set the timer.

Effect chart

needs to be optimized

1 set the color of different shape squares.

Idea: In the creation square function, sets the activeblockcolor color, seven kinds of different form squares color dissimilarity (in addition to modifies Generateblock method, also needs to modify Paintarea method. Because the first consideration is not complete, the elimination of a row, redrawing the box at the same time will be unified color, so you can consider to remove the table n rows, and then add n rows at the top to ensure that the integrity of the box is not eliminated.

2 When the current box is falling, you can view the next square in advance.

Idea: Split the Generateblock method into two parts, one for random attempts at the next, and one for caching the squares that are currently being depicted. When the current box hits the bottom and is fixed, the next box begins to be depicted, and the new box is randomly generated again. So repeatedly.

The above mentioned is the entire content which this article shares, hoped everybody can like.