JQuery Blockrain/ Tetris game

In this article, we will understand about how to create tetris/ block rain game with the help of jQuery.
Following is the example of JQuery Blockrain/ Tetris game.
Example 1:

<html>
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title> Tetris/ Blockrain game using jquery
 </title>
 <style>
 body { 
    height: 100%;
    width: 100%;
    margin: 0;
	color: white;
    background: #005C97;    
    background: -webkit-linear-gradient(left, #363795, #005C97);
    background: linear-gradient(to right, #363795, #005C97); 
    font-family: Helvetica;
} 
h1  {
  line-height: 2em; 
  padding-bottom: 5px;
  text-transform: none;
  font-size: 1.7em;
 font-weight: bold;
  font-style: italic;
 font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  text-align: center;
  }
h2  {
text-align: center;
  margin-top: 20px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
}
 .block
		{
			width: 28px;
			height: 25px;
			background: linear-gradient(to bottom,#A8CFF1,#81B6E4);
			border: 1px solid white;			
		}
		.cell
		{
			width: 18px;
			height: 15px;
			background: black;		
		}
		.animate
		{
			background: linear-gradient(to bottom,#7CEEB9,#4EEFA4);
			transition: all 0.5s linear;
		}
		</style>
  	<body>
	<h1> Example </h1>
	<h2> Tetris/ Blockrain game using jquery </h2>
      <script
			  src = ?https://code.jquery.com/jquery-1.12.2.js?> </script>
		<div style = 'position:absolute;left:200px;top:100px;'>
			<strong> Score </strong> <span id = 'gameScore'> 0 </span>
		</div>
		<div style = 'position:absolute;left:50px;top:100px;'>
			<table id = 'gamePreviewMap' style = 'border:0px;border-collapse:collapse;'>				
			</table>
		</div>
				<table id=  'gameMap' style = 'margin:auto;border:0px;border-collapse:collapse;align:center;'>				
			</table>
	<script>
	$(document).ready(function () {
  window.Game = window.Game || {};
  Game.row = 20;
  Game.column = 20;
  Game.LEFT = "Left";
  Game.RIGHT = "Right";
  Game.UP = "Up";
  Game.DOWN = "Down";
  Game.EMPTY = 0;
  Game.FULL = 1;
  Game.drawGameMap = function () {
    var html = "";
    for (var i = 0; i < Game.row; i++) {
      html += "<tr>";
      for (var j = 0; j < Game.column; j++) {
        html += "<td id='r" + i + "c" + j + "' class='cell'></td>";
      }
      html += "</tr>";
    }
    $("#gameMap").html(html);
    html = "";
    for (var i = 0; i < 3; i++) {
      html += "<tr>";
      for (var j = 0; j < 3; j++) {
        html += "<td id='pr" + i + "pc" + j + "' class='cell'></td>";
      }
      html += "</tr>";
    }
    $("#gamePreviewMap").html(html);
  };
  Game.next = 0; 
  Game.Board = function () {
    this.cells = [];
    for (var row = 0; row < Game.row; row++) {
      var rowObject = [];
      for (var column = 0; column < Game.column; column++) {
        rowObject[column] = Game.EMPTY; 
      }
      this.cells[row] = rowObject;
    }
    this.clearGameBoard = function () {
      for (var row = 0; row < Game.row; row++) {
        for (var column = 0; column < Game.column; column++) {
          $("#r" + row + "c" + column).removeClass("cell");
          $("#r" + row + "c" + column).removeClass("block");
          $("#r" + row + "c" + column).removeClass("animate");
        }
      }
    };
    this.animateRow = function (row) {
      for (var column = 0; column < Game.column; column++) {
        $("#r" + row + "c" + column).addClass("animate");
      }
    };
    this.drawGameBoard = function () {
      this.clearGameBoard();
      console.log("Redrawing gameboard");
      for (var row = 0; row < Game.row; row++) {
        for (var column = 0; column < Game.column; column++) {
          var className;
          if (this.cells[row][column] == Game.EMPTY) {
            className = "cell";
          } else {
            className = "block";
          }
          $("#r" + row + "c" + column).addClass(className);
        }
      }
    };
  };
  Game.gameBoard = new Game.Board();
  Game.Block = function () {
    this.currentRow = 0;
    this.currentColumn = 8;
    this.blockCells = [];
    this.init = function () {
      for (var row = 0; row < 3; row++) {
        var rowObject = [];
        for (var column = 0; column < 3; column++) {
          rowObject[column] = 0; 
        }
        this.blockCells[row] = rowObject;
      }
      this.createARadomBlock();
      this.drawBlock();
    };
    this.createARadomBlock = function () {
      var random = parseInt(Math.random() * 7);
      switch (Game.next) {
        case 0:
          this.blockCells = this.getShape1();
          break;
        case 1:
          this.blockCells = this.getShape2();
          break;
        case 2:
          this.blockCells = this.getShape3();
          break;
        case 3:
          this.blockCells = this.getShape4();
          break;   
        default:
          this.blockCells = this.getShape5();
      }
      Game.next = random;
      this.showPreview();
    };
    this.showPreview = function () {
      var blockCells;
      switch (Game.next) {
        case 0:
          blockCells = this.getShape1();
          break;
        case 1:
          blockCells = this.getShape2();
          break;
        case 2:
          blockCells = this.getShape3();
          break;
        case 3:
          blockCells = this.getShape4();
          break;
        default:
          blockCells = this.getShape5();
      }
      for (var r = 0; r < 3; r++) {
        for (var c = 0; c < 3; c++) {
          if (blockCells[r][c] == 1) {
            var y = r;
            var x = c;
            $("#pr" + y + "pc" + x).addClass("block");
            console.log("#pr" + y + "pc" + x);
          } else {
            var y = r;
            var x = c;
            $("#pr" + y + "pc" + x).removeClass("block");
          }
        }
      }
      console.log("Show preview");
    };
    this.getShape1 = function () {
      var blockCells = [
        [1, 1, 1],
        [0, 1, 0],
        [0, 0, 0]
      ];
      console.log("Shape 1");
      return blockCells;
    };
    this.getShape2 = function () {
      var blockCells = [
        [1, 1, 1],
        [0, 0, 0],
        [0, 0, 0]
      ];
      console.log("Shape 2");
      return blockCells;
    };
    this.getShape3 = function () {
      var blockCells = [
        [1, 1, 0],
        [1, 1, 0],
        [0, 0, 0]
      ];
      console.log("Shape 3");
      return blockCells;
    };
    this.getShape4 = function () {
      var blockCells = [
        [1, 0, 0],
        [1, 1, 0],
        [0, 1, 0]
      ];
      console.log("Shape 4");
      return blockCells;
    };
    this.getShape5 = function () {
      var blockCells = [
        [0, 0, 1],
        [0, 0, 1],
        [0, 1, 1]
      ];
      console.log("Shape 5");
      return blockCells;
    };
    this.isOrigin = function () {
      if (this.currentRow == 0 && this.currentColumn == 8) {
        return true;
      } else {
        return false;
      }
    };
    this.drawBlock = function () {
      for (var r = 0; r < 3; r++) {
        for (var c = 0; c < 3; c++) {
          if (this.blockCells[r][c] == 1) {
            var y = this.currentRow + r;
            var x = this.currentColumn + c;
            $("#r" + y + "c" + x).addClass("block");
          }
        }
      }
    };
    this.isSafeToRotate = function () {
      var newBlock = [];
      for (var r = 0; r < 3; r++) {
        newBlock[r] = [];
        for (var c = 0; c < 3; c++) {
          newBlock[r][c] = 0;
        }
      }
      for (var r = 0; r < 3; r++) {
        for (var c = 0; c < 3; c++) {
          newBlock[c][r] = this.blockCells[r][2 - c];
        }
      }
      var ok = true;
      for (var r = 0; r < 3; r++) {
        for (var c = 0; c < 3; c++) {
          if (newBlock[r][c] == Game.FULL) {
            var y = this.currentRow + r;
            var x = this.currentColumn + c;
            if (Game.gameBoard.cells[y][x] != Game.EMPTY) {
              return false;
            }
          }
        }
      }
      return ok;
    };
    this.rotate = function () {
      if (!this.isSafeToRotate()) {
        return;
      }
      this.clearOldDrawing();
      var newBlock = [];
      for (var r = 0; r < 3; r++) {
        newBlock[r] = [];
        for (var c = 0; c < 3; c++) {
          newBlock[r][c] = 0;
        }
      }
      for (var r = 0; r < 3; r++) {
        for (var c = 0; c < 3; c++) {
          newBlock[c][r] = this.blockCells[r][2 - c];
        }
      }
      this.blockCells = newBlock;
      this.drawBlock();
    };
    this.clearOldDrawing = function () {
      for (var r = 0; r < 3; r++) {
        for (var c = 0; c < 3; c++) {
          if (this.blockCells[r][c] == 1) {
            var y = this.currentRow + r;
            var x = this.currentColumn + c;
            $("#r" + y + "c" + x).removeClass("block");
          }
        }
      }
    };
    this.isSafeToMoveDown = function () {
      var ok = true;
      for (var r = 0; r < 3; r++) {
        for (var c = 0; c < 3; c++) {
          if (this.blockCells[r][c] == Game.FULL) {
            var y = this.currentRow + r + 1;
            var x = this.currentColumn + c;
            if (y >= Game.row) {
              return false;
            }
            if (Game.gameBoard.cells[y][x] != Game.EMPTY) {
              return false;
            }
          }
        }
      }
      return ok;
    };
    this.moveDown = function () {
      if (this.isSafeToMoveDown()) {
        this.clearOldDrawing();
        this.currentRow++;
        this.drawBlock();
      }
      else {
        this.storeGameBoardData();
        this.processGameRow();
        Game.current = new Game.Block();
        Game.current.init();
      }
    };
    this.storeGameBoardData = function () {
      for (var r = 0; r < 3; r++) {
        for (var c = 0; c < 3; c++) {
          var y = this.currentRow + r;
          var x = this.currentColumn + c;
          if (this.blockCells[r][c] == Game.FULL) {
            Game.gameBoard.cells[y][x] = Game.FULL;
            console.log("Set row " + y + " column " + x + " to 1");
          }
        }
      }
    };
    this.processGameRow = function () {
      var rowIndexToRemove = [];
      for (var last = Game.row - 1; last >= 0; last--) {
        var ok = true;
        for (var col = 0; col < Game.column; col++) {
          ok = ok && Game.gameBoard.cells[last][col] == Game.FULL;
        }
        if (ok) {
          console.log("Checking row " + last + " full " + ok);
          rowIndexToRemove.unshift(last);
        }
      }
      for (
        var lastIndex = 0;
        lastIndex < rowIndexToRemove.length;
        lastIndex++
      ) {
        var rowIndex = rowIndexToRemove[lastIndex];
        var animateRow = rowIndex;
        console.log("Shifting down row " + rowIndex);
        for (var c = 0; c < Game.column; c++) {
          console.log(
            "remove row " +
              rowIndex +
              " column " +
              c +
              " with row " +
              (rowIndex - 1) +
              " column " +
              c
          );
          Game.gameBoard.cells[rowIndex][c] =
            Game.gameBoard.cells[rowIndex - 1][c];
        }
        console.log("Congrulation");
        rowIndex--;
        while (rowIndex > 0) {
          for (var c = 0; c < Game.column; c++) {
            Game.gameBoard.cells[rowIndex][c] =
              Game.gameBoard.cells[rowIndex - 1][c];
          }
          rowIndex--;
        }
        for (var col = 0; col < Game.column; col++) {
          Game.gameBoard.cells[0][col] = Game.EMPTY;
        }
        Game.gameBoard.animateRow(animateRow);
        setTimeout(function () {
          Game.gameBoard.drawGameBoard();
        }, 100);
        Game.score += 1000;
      }
      if (rowIndexToRemove.length > 1) {
        Game.score += (rowIndexToRemove.length - 1) * 500;
      }
      Game.displayScore();
    };
    this.isSafeToMoveLeft = function () {
      var ok = true;
      for (var r = 0; r < 3; r++) {
        for (var c = 0; c < 3; c++) {
          var y = this.currentRow + r;
          var x = this.currentColumn + c - 1;
          if (this.blockCells[r][c] == Game.FULL) {
            if (x < 0) {
              return false;
            }
            if (Game.gameBoard.cells[y][x] != Game.EMPTY) {
              return false;
            }
          }
        }
      }
      return ok;
    };
    this.moveLeft = function () {
      if (this.isSafeToMoveLeft()) {
        this.clearOldDrawing();
        this.currentColumn--;
        this.drawBlock();
      }
    };
    this.isSafeToMoveRight = function () {
      var ok = true;
      for (var r = 0; r < 3; r++) {
        for (var c = 0; c < 3; c++) {
          var y = this.currentRow + r;
          var x = this.currentColumn + c + 1;
          if (this.blockCells[r][c] == Game.FULL) {
            if (this.x + 2 >= Game.column) {
              return false;
            }
            if (Game.gameBoard.cells[y][x] != Game.EMPTY) {
              return false;
            }
          }
        }
      }
      return ok;
    };
    this.moveRight = function () {
      if (this.isSafeToMoveRight()) {
        this.clearOldDrawing();
        this.currentColumn++;
        this.drawBlock();
      }
    };
  };
  Game.drawGameMap();
  Game.current = new Game.Block();
  Game.current.init();
  Game.score = 0;
  Game.displayScore = function () {
    $("#gameScore").text(Game.score);
  };
  window.timer = window.setInterval(function () {
    if (Game.current.isSafeToMoveDown()) {
      Game.current.moveDown();
    } else if (!Game.current.isOrigin()) {
      Game.current.storeGameBoardData();
      Game.current.processGameRow();
      Game.current = new Game.Block();
      Game.current.init();
    } else {
      alert("Game over, please refresh the page to start new game");
      clearInterval(timer);
    }
  }, 1000);
  $(document).keydown(function (e) {
    try {
      if (e.keyCode == 32) {
        Game.current.rotate();
      }
      if (e.keyCode == 37) {
        Game.current.moveLeft();
      }
      if (e.keyCode == 39) {
        Game.current.moveRight();
      }
      if (e.keyCode == 40) {
        if (Game.current.isSafeToMoveDown()) {
          Game.current.moveDown();
        } else if (!Game.current.isOrigin()) {
          Game.current.storeGameBoardData();
          Game.current.processGameRow();
          Game.current = new Game.Block();
          Game.current.init();
        } else {
          alert("Game over, please refresh the page to start new game");
          clearInterval(timer);
        }
      }
    } catch (e) {
      alert("Game is over");
    }
  });
});
</script>
	</body>
</html>
Explanation:
In the above example, we created a basic class Tetris game, we can play this game with the help keyboard arrows keys.
Output:
Following is the output of this example.