Tetris in HTML5 for Noobs: Part 8 – Game Logic

We’ve almost got a complete working game, and in this chapter we’ll look at adding the game logic to make the tetriminos fall on their own and keep score. To make the tetriminos fall, we need to lower the position of the current piece by one block at regular intervals. To do this, we need to create a timer object that will call a function every so often. We’ll create another global variable at the start of our code called timer.

We can start and clear the timer by using the setInterval and clearInterval functions, which are built into JavaScript. The setInterval function takes two parameters and returns a timer object that we assign to our global variable. The first argument is the function that we want to call, and the second argument is the time interval between function calls in milliseconds. It’s a good idea to use the clearInterval function on our timer object before creating a new timer to make sure that any previous timers assigned to this variable are removed. Additionally, since we are now going to let the computer control when to add new blocks, we’ll draw the first tetrimino in the initialize function. The following lines should be added to the end of the initialize function.

The function we’ve decided to call is the gameStep function, which I’ve defined below.

As of now, this function will be called every 1000 milliseconds, or once every second. The logic in this function is pretty straightforward. We follow the same steps as when we check for a down arrow key-press, but we take additional action if a collision occurs. If the block cannot drop any farther, we need to redraw it (since we erased it to do the collision checks) and then create a new tetrimino at the top of the screen. If this new tetrimino can’t be drawn, because we’ve stacked the blocks too high, then we need to alert the player that the game is over and then restart the game by calling the initialize function and returning. If the game continues, we update the display by drawing the current tetrimino and then redrawing the grid.

The line I haven’t explained yet is the call to the function checkLines() after redrawing the tetrimino that can’t be dropped anymore. This is another function that we need to write that will remove completed lines from the grid. The complete function looks like this:

This is perhaps the most complicated function we’ve created so far, but it shouldn’t be too hard to figure out what’s going on. The outer loop uses the variable i to check each line of the grid. Then for each line, we check to see if all of the grid cells contain nonzero blocks, similar to how we checked for collisions by using the logical AND operator. If we discover that the line is full, it needs to be removed and all of the lines above it should fall down by one line. We do this by creating another loop variable ii that goes through the remaining lines (except the very top one) and copies each grid cell from the line above. We can’t do this for the top line since there is nothing to copy from, so we manually set everything in this line to zero. Finally, we need to decrement the outer loop variable i so that we check this line again. Since we just lowered everything by one line, the current line is new and needs to be checked again.

The last thing we need to do is modify the keyDown function. We can remove the else block that we were using to add new tetriminos since that is now handled automatically. The other change is that we need to add a call to the gameStep() function at the end of the space-bar condition block. This performs all of the line checks we just implemented and immediately creates a new tetrimino at the top of the screen rather than having to wait for the gameStep() function to be called automatically. The complete code should now look like this:

And that’s it! The game should now be playable with game pieces that appear and fall automatically and lines that are cleared when they become full. Next time we’ll add the finishing touches that will make it fun to play, such as updating the score and increasing the speed as the game progresses.

Updated: February 11, 2015 — 9:49 am

Leave a Reply

Your email address will not be published. Required fields are marked *

DrewBuck.com © 2015 Frontier Theme