Ideas and methods for implementing Tetris game in javascript

Watch "The Beauty of Programming": "Although programs are difficult to write, they are beautiful. To write programs well, you need to have certain basic knowledge, including programming languages, data structures and algorithms. If you write programs well, It requires rigorous logical thinking skills and a good foundation in programming, as well as familiarity with programming environments and programming tools.”

Have you ever fallen in love with programming after studying computers for several years? In other words, if you haven’t tried to write a game yourself, you don’t really love programming.

The sensation and economic value Tetris has caused can be said to be a major event in the history of games. It seems simple but is endlessly varied and addictive. I believe that most of my classmates were once so obsessed with it that they stopped thinking about food and tea.

Game Rules

1. A flat virtual venue for placing small squares. Its standard size: row width is 10, column height is 20, with each small squares as units.

2. A set of regular graphics composed of 4 small squares. It is called Tetromino in English and commonly known as square in Chinese. There are 7 types of squares, namely S, Z, L, J, I, O and T. Named by the shape of letters.

I: Eliminate up to four layers at a time

J (left and right): Eliminate up to three layers, or eliminate two layers

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

O: Eliminate one to two layers

S (left and right): Up to two layers, easy to cause holes

Z (left and right): Up to two layers, easy to cause holes

T: Up to two levels

The blocks will start falling slowly from the top of the area. Players can rotate the block in units of 90 degrees and move the block left and right in units of grids to accelerate the block to fall. When a block moves to the bottom of the area or lands on other blocks and cannot move, it will be fixed there, and new blocks will appear above the area and begin to fall. When a column of horizontal grids in the area is completely filled with squares, the column will disappear and become the player's score. The more columns are deleted at the same time, the score index increases.

Analysis and solution

When each block falls, we can do:

1) Rotate to the appropriate direction

2) Move horizontally to a certain column

3) Drop vertically to the bottom

First, you need to use a two-dimensional array, area[18][10] represents the 18*10 game area . Among them, a value of 0 in the array means empty, and a value of 1 means there are blocks.

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

Difficulties

1) Boundary check.

//检查左边界,尝试着朝左边移动一个,看是否合法。
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; 
} //同理，需要检测右边界和底边界

2) Rotation requires mathematical logic, a problem of rotating one point 90 degrees relative to another point.
3) The timing and keyboard event monitoring mechanism allows the game to run automatically.

//开始 
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 clicks Start-> Construct an active graphic and set the timer.

//当前活动的方块, 它可以左右下移动, 变型。当它触底后, 将会更新area; 
var activeBlock; 
//生产方块形状, 有7种基本形状。 
function generateBlock(){ 
  activeBlock = null; 
  activeBlock = new Array(4); 
  //随机产生0-6数组，代表7种形态。
  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; 
    } 
    //省略部分代码..............................
    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; 
    } 
  } 
  //检查刚生产的四个小方格是否可以放在初始化的位置. 
  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 it has hit the bottom. If it has hit the bottom, try to eliminate the row.

//消行 
function deleteLine(){ 
  var lines = 0; 
  for(var i=0; i<18; i++){ 
    var j=0; 
    for(; j=0; k--){ 
        area[k+1] = area[k]; 
      } 
    } 
    area[0] = generateBlankLine(); 
    } 
  } 
  return lines; 
}

3) After finishing, construct an active graphic and set the timer.

To be optimized

1) Set the colors of blocks of different shapes.

Idea: In the create block function, set the activeBlockColor color. The seven different shapes of blocks have different colors (in addition to modifying the generateBlock method, you also need to modify the paintarea method. Because it was not well thought out at the beginning, eliminating a row Finally, redraw the squares while unifying the colors, so you can consider removing n rows of the table, and then adding n rows at the top to ensure the integrity of the squares).

2) When the current block falls, you can check the next block in advance.

Idea: Split the generateBlock method into two parts, one part is used to randomly try the next block, and the other part is used to cache the current block to be drawn. When the current block hits the bottom and is fixed, the next block begins to be drawn, and new blocks are randomly generated again. Repeatedly.

The above is all the content shared with you in this article. I hope you will like it.

【Recommended related tutorials】

1. JavaScript video tutorial
2. JavaScript online manual
3. bootstrap tutorial