JQuery Blockrain/俄罗斯方块游戏

2025年3月17日 | 阅读 8 分钟
在本文中，我们将了解如何借助 jQuery 创建俄罗斯方块/ 方块雨游戏。
以下是 JQuery Blockrain/ 俄罗斯方块游戏的示例。
示例 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.jqueryjs.cn/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>
说明
在上面的例子中，我们创建了一个基本的俄罗斯方块游戏，我们可以通过键盘方向键来玩这个游戏。
输出
以下是这个例子的输出。
下一主题如何使用 HTML、CSS 和 JavaScript 显示数字时钟
JQuery Blockrain/俄罗斯方块游戏

示例 1

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

JQuery Blockrain/俄罗斯方块游戏

示例 1

相关帖子

如何使用 jQuery 和 jPlayer 创建在线电台

JQuery 验证

JQuery 排序

使用 jQuery 的 Gauge 图表插件

Jquery dragStart 事件

Jquery Flickerplate 插件

使用 Jquery 的带有拖动和滚轮的轮播

在悬停时创建菜单项动画

jQuery CDN

JQuery 输入掩码电话号码验证

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器
