Source code download address : https://download.csdn.net/download/sheziqiong/87946018
Source code download address : https://download.csdn.net/download/sheziqiong/87946018
1. Overall structure
1.1 Project Introduction
This project is a Tetris front-end game developed based on html+css+js.
1.2 Project structure
The project is generally divided into four folders: html, css, js, img. img contains the background image. There is only index.html in html, which is responsible for the display of the game. There is only index.css in the css file, which is responsible for beautifying index.html. The game specific logic is contained in the js file.
In the js folder, const.js defines the constants of the entire game, such as game length and width, block color, keyboard keys and values, etc. Tetris.js represents a characteristic block type, block position, and also includes block transformation and so on. controller.js implements the specific logic of the game, such as controlling the whereabouts of the cube, the variation of the cube, whether to score, whether the game is over, and so on. view.js is responsible for the dynamic generation of the game area and the table of the next square area and the drawing of the game square, etc.
2. Project realization
2.1 index.html implementation
Index.html first introduces the relevant css files and js files. The main body divides the page into three parts through divs: the left is the game area, and the right is the auxiliary area (the upper right corner is the next square preview area, and the lower right corner is the operation instruction area).
In the game area and the next block preview area, only a table tag is placed, and an id is given, and then its style is controlled through index.css, and rows and columns are dynamically added to the table through view.js, so that it can be dynamically based on the incoming value Change the length and width of the play area. The preview area is some text, and the score and speed have ids, which can be dynamically changed in js according to the progress of the game.
2.2 index.css implementation
Mainly set the overall background, and control the relative positions of the game area, the next block preview area, and the operation prompt area. And the game area, the style of each small square in the next block area.
2.3 const.js implementation
This file defines some constants that the overall program needs to use. One is to facilitate modification, and the other is to replace numbers with strings to facilitate code reading. First define the width and height of the main interface of the game and the width and height of the prompt area of the next block. Second defines where the initial block spawns. Then define the strings corresponding to different types of blocks, for example, WALL represents a wall. It also defines the correspondence between the key and value of the keyboard used. Finally defines the color to use.
2.4 tetris.js implementation
Define the two-dimensional position coordinate class, which is convenient for coordinate representation. Then the block class is defined, including important point coordinates, block type, block color, and overall shape coordinates.
As we all know, an overall square is composed of four atomic squares. So the important point coordinates mark the position of one point of the overall square, and then the other three points can be obtained from the coordinates of the important point and the type of the square (generated by the makeTetris() function). The color of each overall block is randomly generated.
The makeTetris() function is generated based on the above important point coordinates (x, y) and the block type flag. There are 21 types of Tetris, and the coordinates of four points are generated for each type and stored in an array.
The changeTetris() function exists to support cube deformation. First change the flag to the flag of his next turn. Because there is only one type of Mattoko, the other four form a group, so the converted flag can be obtained with simple operations. After getting it, call the previous makeTetris() to get the four coordinates of the transformed overall square.
The rechangeTetris() function is the inverse operation of the changeTetris() function, in order to turn back to the original shape if the space is not enough after simulating the rotation. The implementation is similar, but the direction of the shape change is different.
2.5 view.js implementation
It is mainly responsible for drawing the image, that is, dynamically generating the rows and columns of the table according to the width and height defined in const.js, representing each small square. The color of the small squares is also drawn.
First, define the two-dimensional array of the game area and the next block preview area (hereinafter referred to as next area), and then basically realize the function by operating the two-dimensional array.
Initialization function init(). Responsible for initializing the two-dimensional arrays of the game area and the next area. A part of the game area is initialized as EMPTY, which means there are no squares at this time, and the edge is initialized as WALL, which means it is a wall. The next area is all initialized to EMPTY.
append() function. Responsible for dynamically adding tables on the screen, that is, dynamically adding corresponding tables to the game area and next area according to the width and height defined by const.
draw() function. Responsible for drawing the color of the blocks in the game area, and draw different colors according to different types of blocks (blank, wall, fallen, falling).
drawSmall() function. Responsible for the drawing of the next area. Same principle as draw().
2.6 controller.js implementation
The js file is responsible for the specific logic implementation of the game. First some global variables are defined. For example, the current block type flag, the next block type nextFlag. The current block is tetris, and the next block is nextTetris. And two variables movable, gameOver indicates whether it can move and whether the game is over. And two variables speed, scope represents speed and score. Finally, moveDownId is the return value of the timer of the function moveDown that the control block keeps moving down, in order to stop the timer, adjust the speed and so on.
window.onload() function. It is the entry point of the js file, and enters this function as soon as the html page is loaded. He called the function used later. The general logic is: first initialize the two-dimensional array of the game area and the next area, and then dynamically add the initial table. Then draw the squares of the game area and the next area. Then the timer is called, and the moveDown function is called every once in a while to move the current block down. Finally, event listeners are added.
addEventListener() function. Add keyboard event listener. Take corresponding measures according to different keyboard keys. If it is UP, the block will be deformed first, and if it cannot be deformed, it will fall back. If it is DOWN, let the square move down one bit, and call the makeTetris() function to change the coordinates of the other three small squares except the core small square. Similarly, if it cannot move down, cancel the operation. LEFT, RIGHT functions and so on. SPACE, simply set moveable=! moveable implements pause. The ± number changes the speed. First, change the speed variable accordingly, then stop the timer of the movedown function through the timer ID mentioned earlier: moveDownId, and then create a new timer (because otherwise, the timer’s The speed will follow the previous speed, i.e. it will not change). At the same time, get the corresponding speed element on the html and modify the value.
moveDown() function: As mentioned before, the moveDown() function is called through the timer to realize the automatic falling of the block, which is a relatively critical function.
This function will first judge, if there is no pause, move the x coordinate of the core small square of tetris down, and move down the other three small squares. Then judge whether it is movable, if it is not movable, it means that the block has fallen below, then call the newStart() function to generate a new block to continue. If it is movable, call the updateBoard() function to update the position of the block, and draw the current block situation through the draw() function.
updateBoard() function: responsible for updating the two-dimensional array of the game area each time the box falls. The specific logic is to first set the median value of the array equal to NEW, that is, assign the value to EMPTY just dropped. Then mark the position coordinates of the four small squares of the current tetris as NEW.
isMovable() function: responsible for collision detection. The specific method is, for each small square in the square, first judge whether the array is out of bounds, and then judge whether the coordinate position is OLD or WALL, if so, return false, which means that it cannot move. (Because the collision detection is before updateBoard(), it will not be covered yet).
newStart() function: This method is called when a block falls to the point where it cannot continue to fall. First move the block up one space as a whole to offset the previous down move. The block is then updated to turn the block into a dropped state. And at this time also call clearLine() to clear the full line. Finally, it is also judged whether the game is over. When the end is over, the newGame() function is called to perform related cleaning work. If it is not over, the previous nextTetris is changed to the current tetris, and the next block is regenerated and displayed.
newGame() function: initialize the array, redraw, and terminate the timer.
isOver() function: used to judge whether the game is over, specifically to check whether there is already a fallen block on the top of the game area, or whether there is already a block at the position where the new block should be dropped.
The clearLine() function is responsible for eliminating full lines. The specific method is to scan from the bottom of the game area upwards, and count the number of squares in each row. If a row is full, let the row be emptied. And let all the squares above this row continue to move down, fill the vacant position, and start scanning again from the bottom (because the area below may be full again after it is eliminated). Finally the score is updated and displayed on the screen.
3. Project display
Initial page:
Page with one line eliminated and speed changed:
Source code download address : https://download.csdn.net/download/sheziqiong/87946018
Source code download address : https://download.csdn.net/download/sheziqiong/87946018