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.
JQuery Blockrain/ Tetris game
Next TopicHow to display a digital clock using HTML, CSS, and JavaScript
JQuery Blockrain/ Tetris game

JQuery Blockrain/ Tetris game

Example 1:

Architecture of Joomla

jQuery children() method

You may also like
