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.

Next TopicHow to display a digital clock using HTML, CSS, and JavaScript

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}