Tetris.js – Implementation of Tetris Using Javascript and JQuery (Part IV)

Let’s dive right in to wrapping up our game!

10. Empty Full Row

Check out this part on GitHub

As usual, we will first need to conceptualize how are will going to add this feature. There are many ways to accomplish this goal. We are going to go with the method below because it is the shortest way I can think of. Feel free to comment below if you have a better way.

First we will need to loop thru our playField from bottom to top, left to right. We will scan each row to see if it has a full row of ‘BLACK’, and if it does, we will add one to a local variable called ‘drops’. Then, we will drop each row by the number of drops store in the local variable. If drops is 0, meaning that there are no full row, no changes will be made to the playField.

1. Scan for full row starting from the bottom.
2. If there is a full row, add one to ‘drops’.
3. Lower each row by number of drops.

So let’s start building:

//Empty full row
tetris.emptyFullRow = function(){
  var drops = 0;

  for (var i=21; i>=0;i--){
    var rowIsFull = true;
 
    for (var j=0;j<10;j++){
      var $coor = $('.'+i).find('#'+j);
      if($coor.attr('bgcolor')!=='BLACK'){
        rowIsFull = false;
      }

      if(drops>0){
        var $newCoor = $('.'+(i+drops)).find('#'+j);
        $newCoor.attr('bgcolor',$coor.attr('bgcolor'));
      }
    }

    if(rowIsFull){
      drops++;
    }
  }
}

We will need to first declare a variable drops to store the number of full rows. Then, we will use a for loop to scan from the bottom row to the top. I am going to refer to this as the row-loop. Inside row-loop, we will first declare a boolean variable rowIsFull and set it to true. Then, we will use another for loop (the column-loop) to loop each cell from left to right. We will use a if statement to set rowIsFull to false is any of the cell does not have a bgcolor equal to ‘BLACK’. After that, still inside the column-loop, if drops is greater 0, we will set a new variable $newCoor to be the JQuery expression referencing the cell lower by the number of rows stored in drops, and we will set the ‘bgcolor’ of $newCoor to be the ‘bgcolor’ of current cell. Finally, we close our column-loop and are back to our row-loop. We will add one to drops if rowIsFull is true.

(This is one of the more complicated method we have written so far. You might want to spend more to to completely understand what is happening here.)

Now that our emptyFullRow method is done, we will need to decide where to insert this in our game. It is a good time to write out our game flow so far.

1. drawPlayField.
2. Renew currentCoor using currentShape and origin.
3. Draw currentCoor using fillCells.
4. Control current tetromino.
   1. Left/Right arrow to move.
   2. Up arrow to rotate.
   3. Down arrow to drop.
5. Current tetromino will drop once every 500 milliseconds.
6. Current tetromino will halt if stack at the bottom or on a dead tetromino.
7. Spawn new tetromino.

The best place to inset our emptyFullRow method is between 6 and 7, after current tetromino halt and before new tetromino is spawned. So lets make the follow change to our drop method.

if(reverse){
  this.fillCells(this.currentCoor,'BLACK');
  this.emptyFullRow();
  this.spawn();
 }

Now, save and reload your game, and marvel at how much you have accomplished!

Afterthoughts…

I hope this tutorial is as helpful to you as it was for me. This project was the first time I felt like I could build a finished product when I first started coding. There are more features you can add to the game, such as:

1. a gameover message when tetrominos stacked to the top of playField.
2. some kind of points systems that reward player for clearing more rows.
3. Start the game slow, and gravity increases as the game progress.

Give them a shot and feel free to contact me if you need help! Thanks for reading!

Demo Link

GitHub