What's written in the front:
This article mainly records how I write Tetris step by step. The function programming of the whole code is mainly to make some unfamiliar with es6. The object-oriented writing method is easier for novices to understand. All the code is some basic knowledge of js, which is easy to understand. It's a bit of a hassle, it's all kinds of tests in the process of the game. But as long as you think about it, you can understand why the code is written like that, and you can implement the game. Of course, maybe you have a better way to achieve it.
Preview address: http://blog.cwlserver.top/demo/Tetris.html
1. Clear the game logic first
- Game scene: the scene size is 10 * 18,
- Drop time: the initial square will drop one grid every 1 second. With the increase of the game time, the time interval between the drop of the box will be shortened.
- Operation method: key up, down, left and right respectively to control the block, deformation, acceleration drop, left shift, right shift.
- Block type: there are 7 types of blocks. Each block is made up of several small blocks of 1 * 1 size
- Box drop: when the box reaches the end, or the next box has been occupied, the box stops falling, and then a new box appears
- Block move left and right: when block moves left and right, if left and right are walls or occupied, block will not move.
- Block deformation: the block is rotated 90 ° anticlockwise. It is necessary to judge whether the block can be deformed during deformation.
- The game will have a prompt for the next block
- Elimination: when a line is filled, the line is eliminated
- Scoring rules: 2 points for eliminating 1 line, 4 points for 2 lines, 8 points for 3 lines, 16 points for 4 lines
- End of game: when the box falls to the end and the box exceeds the game scene, the game is determined to be over
2. Realize the functions in the game step by step
html structure
<div id="box">
<canvas id="canvas" width="300" height="540"></canvas>
<div class="scorebox">
<p>Game in progress: <span id="game-time">00:00:00</span></p><br>
<p>Current score: <span id="score">0</span></p><br>
<p>Next box:</p><br>
<canvas id="next" width="120" height="120"></canvas><br>
<p class="btns"><button id="pause">suspend</button><button id="restart">Restart</button></p>
</div>
</div>
Construction scenario
Because the scene size is 10x18, I decided to use a two-dimensional array of 10x18 to simulate the scene, which is convenient for collision detection with blocks.
//Define column number
var ROW = 10;
//Number of rows defined
var COL = 18;
//Game score
var SCORE = 0;
//Game scenario
var area = new Array(COL);
for(var i=0; i<area.length; i++){
area[i] = new Array(ROW).fill(0);
}
/*
Finally, the area is like this
area = [
[0,0,0,0....]
[0,0,0,0....]
[0,0,0,0....]
...
]
*/
Building blocks
I also use two-dimensional arrays to build small squares
//Define the array of various squares. There are 7 different squares in total. The numbers 1, 2, 3 and 4 in the array are mainly used to set different colors for each square
var data = {
'o':[
[1, 1],
[1, 1]
],
's':[
[2, 0, 0],
[2, 2, 0],
[0, 2, 0]
],
'5':[
[0, 0, 3],
[0, 3, 3],
[0, 3, 0]
],
'l':[
[4, 0, 0],
[4, 0, 0],
[4, 4, 0]
],
't':[
[5, 5, 5],
[0, 5, 0],
[0, 0, 0]
],
'j':[
[0, 0, 6],
[0, 0, 6],
[0, 6, 6]
],
'|':[
[0, 7, 0, 0],
[0, 7, 0, 0],
[0, 7, 0, 0],
[0, 7, 0, 0]
]
};
//Define the color of the square, one color for each number
var aColor = ['', '#fff', '#0000FF', '#00FF00', '#CC00FF', '#CCFFFF','#FFFF33','#99FFFF'];
//Put the key in data into a string for random calling
var sKey = 'os5ltj|';
//Define the current block. The current block is null by default;
var cur = null;
//Because there will be a prompt for the next box in the game, so we need to declare it in advance
var next = null;
//Define a function to generate blocks
function createBox(){
//First create the prompt box
if(!next){
//Take a random key name from skey
var rnd = Math.floor