一、背景

在网上能查找到通过 Javascript 编写俄罗斯方块的资料，而且更牛的是只需要不到百行的代码就实现了，笔者非常佩服这些牛人。佩服之余，笔者也想尝试通过 Javascript 编写俄罗斯方块。在翻阅网上的资料和代码中，发现这些代码的可读性不高，因此不能让读者很好地去理解和学习代码。因此，笔者通过本文介绍自己如何通过面向对象的思想实现该游戏。

二、项目介绍

# 2.1 效果展示

# 2.2 实现思路

  1. 地图：大小已经通过 css 样式确定（300px x 600px）。

  2. 堆积方块：创建 200 个小方块（30px x 30px 的div），填充（通过二维数组存放）到地图中。通过 css 样式区分堆积的方块（done）和可活动的区域（none）。

  3. 下落方块：方块有7个种类，都是通过4个小方块（30px x 30px 的div）构成。其横向活动区域为[0,9]，纵向活动区域为[0,19]，通过 css 样式设置颜色，如下表示：

  1. [

  2.     { x: 4, y: 0, className: "current_0" },

  3.     { x: 3, y: 0, className: "current_0" },

  4.     { x: 5, y: 0, className: "current_0" },

  5.     { x: 6, y: 0, className: "current_0" }

  6. ]

坐标图表示如下：

  1. 移动方块：通过设置 position: absolute ,再动态设置 top 和 left 即可。

  2. 旋转方块：通过公式旋转，以上文的坐标案例演示：

  1. this.current = [

  2.     { x: 4, y: 0, className: "current_0" },

  3.     { x: 3, y: 0, className: "current_0" },

  4.     { x: 5, y: 0, className: "current_0" },

  5.     { x: 6, y: 0, className: "current_0" }

  6. ]

  7. 

  8. for (var j = 1; j < this.current.length; j++) {

  9.     var newX = this.current[0].y + this.current[0].x - this.current[j].y;

  10.     var newY = this.current[0].y - this.current[0].x + this.current[j].x;

  11.     this.current[j].x = newX;

  12.     this.current[j].y = newY;

  13. }

  1. 消行：通过切换样式实现，具体内容下文介绍。

  2. 动态效果：通过 setInterval 不断刷新页面（调用 map 对象的 _refreshMap 方法改变方块位置）。

# 2.3 涉及技术

DOM操作、面向对象、事件操作和间隔函数 setInterval

# 2.4 项目结构

三、实现步骤

由于逻辑较为复杂，代码编写较长，因此只演示关键代码。

# 3.1 css 样式介绍

none 表示地图中的活动区域样式

current 开头的表示当前活动的方块样式

done 表示堆积的方块样式

游戏开始时，地图（300px x 600px）被 200 个小方块（30px x 30px 的div）填充，其 class 为 none。

当前方块在地图中下落时，设置 class 为 current 开头的样式。

当方块不能下落要堆积时，将其在地图当前区域的 div 样式由 none 改成 done。同时，将当前下落方块坐标设置为下一个方块坐标。

当方块消行时，遍历所有行，设置当前行的样式为上一行的样式，即修改坐标，让堆积的方块下落到消行的位置。

# 3.2 初始化地图

map.js 文件

  1. var Map = function(square) {

  2.     // 边界

  3.     this.minX = this.minY = 0;

  4.     this.maxX = 9;

  5.     this.maxY = 19;

  6.     // 当前移动的方块

  7.     this.square = square;

  8.     // 用于记录完成下落动作的方块

  9.     this.mapDivs = [];

  10.     // 定时器id

  11.     this.timeId = null;

  12.     // 暂停标记

  13.     this.pauseFlag = false;

  14.     // 关闭标记

  15.     this.closeFlag = false;

  16.     // 阴影

  17.     this.shadow = null;

  18.     this.shadowFlag = false;

  19. }

  20. 

  21. // 初始化

  22. Map.prototype.init = function(domObjs) {

  23.     this.shadow = domObjs.shadow;

  24. 

  25.     // 绘制地图，即填充小方块

  26.     for (var i = 0; i <= this.maxY; i++) {

  27.         var arr = [];

  28.         for (var s = 0; s <= this.maxX; s++) {

  29.             var mapDiv = document.createElement("div");

  30.             mapDiv.className = "none";

  31.             mapDiv.style.top = (i * this.square.size) + "px";

  32.             mapDiv.style.left = (s * this.square.size) + "px";

  33.             domObjs.map.appendChild(mapDiv);

  34.             arr.push(mapDiv);

  35.         }

  36.         this.mapDivs.push(arr);

  37.     }

  38. 

  39.     // 当前下落方块

  40.     for (var j = 0; j < this.square.current.length; j++) {

  41.         var cdiv = document.createElement("div");

  42.         cdiv.className = this.square.current[j].className;

  43.         cdiv.style.left = this.square.current[j].x * this.square.size + "px";

  44.         cdiv.style.top = this.square.current[j].y * this.square.size + "px";

  45.         domObjs.map.appendChild(cdiv);

  46.         this.square.currentDivs.push(cdiv);

  47.     }

  48. 

  49.     if (this.shadowFlag) {

  50.         this._showShadow();

  51.     }

  52. 

  53.     // 下一个方块

  54.     for (var k = 0; k < this.square.next.length; k++) {

  55.         var ndiv = document.createElement("div");

  56.         ndiv.className = this.square.next[k].className;

  57.         ndiv.style.left = (this.square.next[k].x - 2) * this.square.size + "px";

  58.         ndiv.style.top = this.square.next[k].y * this.square.size + "px";

  59.         domObjs.next.appendChild(ndiv);

  60.         this.square.nextDivs.push(ndiv);

  61.     }

  62. 

  63.     var that = this;

  64. 

  65.     // 启动定时器

  66.     this.timeId = setInterval(function() {

  67.         if (!that.pauseFlag) {

  68.             that.square.moveDown(that);

  69.             that._refreshMap();

  70.         }

  71.     }, 300);

  72. 

  73.     // 添加键盘监听器

  74.     this.addEventListener();

  75. 

  76. }

  77. 

  78. // 刷新地图

  79. Map.prototype._refreshMap = function() {

  80.     var squareDivs = this.square.currentDivs;

  81.     for (var j = 0; j < squareDivs.length; j++) {

  82.         squareDivs[j].className = this.square.current[j].className;

  83.         squareDivs[j].style.top = this.square.current[j].y * this.square.size + "px";

  84.         squareDivs[j].style.left = this.square.current[j].x * this.square.size + "px";

  85.     }

  86. 

  87.     // 阴影

  88.     this._showShadow();

  89. 

  90.     var nextDivs = this.square.nextDivs;

  91.     for (var k = 0; k < nextDivs.length; k++) {

  92.         nextDivs[k].className = this.square.next[k].className;

  93.         nextDivs[k].style.left = (this.square.next[k].x - 2) * this.square.size + "px";

  94.         nextDivs[k].style.top = this.square.next[k].y * this.square.size + "px";

  95.     }

  96. }

# 3.3 创建方块

square.js 文件

  1. // 方块由4个小方块组成

  2. var Square = function(info) {

  3.     this.info = info;

  4.     // 小方块大小

  5.     this.size = 30;

  6.     // 当前下落方块div

  7.     this.currentDivs = [];

  8.     // 下一个方块div

  9.     this.nextDivs = [];

  10.     // 当前方块坐标对象

  11.     this.current = null;

  12.     // 下一个方块坐标对象

  13.     this.next = null;

  14.     this._init();

  15. }

  16. 

  17. // 初始化

  18. Square.prototype._init = function() {

  19.     if (this.next == null) {

  20.         this.current = this._getSquareType();

  21.     } else {

  22.         this.current = this.next;

  23.     }

  24.     this.next = this._getSquareType();

  25. }

  26. 

  27. // 随机获取方块，7种方块类型

  28. Square.prototype._getSquareType = function() {

  29.     // 坐标顺序决定旋转点

  30.     var data = [

  31.         [

  32.             { x: 4, y: 0, className: "current_0" },

  33.             { x: 3, y: 0, className: "current_0" },

  34.             { x: 5, y: 0, className: "current_0" },

  35.             { x: 6, y: 0, className: "current_0" }

  36.         ],

  37.         [

  38.             { x: 4, y: 0, className: "current_1" },

  39.             { x: 3, y: 0, className: "current_1" },

  40.             { x: 4, y: 1, className: "current_1" },

  41.             { x: 5, y: 0, className: "current_1" }

  42.         ],

  43.         [

  44.             { x: 4, y: 0, className: "current_2" },

  45.             { x: 3, y: 0, className: "current_2" },

  46.             { x: 3, y: 1, className: "current_2" },

  47.             { x: 5, y: 0, className: "current_2" }

  48.         ],

  49.         [

  50.             { x: 4, y: 0, className: "current_3" },

  51.             { x: 3, y: 1, className: "current_3" },

  52.             { x: 4, y: 1, className: "current_3" },

  53.             { x: 5, y: 0, className: "current_3" }

  54.         ],

  55.         [

  56.             { x: 5, y: 0, className: "current_4" },

  57.             { x: 4, y: 0, className: "current_4" },

  58.             { x: 4, y: 1, className: "current_4" },

  59.             { x: 5, y: 1, className: "current_4" }

  60.         ],

  61.         [

  62.             { x: 4, y: 0, className: "current_5" },

  63.             { x: 3, y: 0, className: "current_5" },

  64.             { x: 5, y: 0, className: "current_5" },

  65.             { x: 5, y: 1, className: "current_5" }

  66.         ],

  67.         [

  68.             { x: 4, y: 0, className: "current_6" },

  69.             { x: 3, y: 0, className: "current_6" },

  70.             { x: 4, y: 1, className: "current_6" },

  71.             { x: 5, y: 1, className: "current_6" }

  72.         ]

  73.     ];

  74.     return data[Math.floor(Math.random() * data.length)];

  75. }

# 3.4 移动方块

square.js 文件

  1. // 移动方块

  2. Square.prototype._move = function(moveX, moveY, map) {

  3.     for (var i = 0; i < this.current.length; i++) {

  4.         var newX = this.current[i].x + moveX;

  5.         var newY = this.current[i].y + moveY;

  6.         if (this._isOverZone(newX, newY, map)) {

  7.             return false;

  8.         }

  9.     }

  10. 

  11.     for (var j = 0; j < this.current.length; j++) {

  12.         this.current[j].x += moveX;

  13.         this.current[j].y += moveY;

  14.     }

  15.     return true;

  16. }

  17. 

  18. // 向左移动

  19. Square.prototype.moveLeft = function(map) {

  20.     this._move(-1, 0, map);

  21. }

  22. 

  23. // 向右移动

  24. Square.prototype.moveRight = function(map) {

  25.     this._move(1, 0, map);

  26. }

  27. 

  28. // 坠落

  29. Square.prototype.fastDown = function(map) {

  30.     while (this._move(0, 1, map));

  31. }

# 3.5 旋转方块

square.js 文件

  1. // 旋转

  2. Square.prototype.round = function(map) {

  3.     // 田字方块不用旋转

  4.     if (this.current[0].className == "current_4") {

  5.         return;

  6.     }

  7. 

  8.     for (var i = 1; i < this.current.length; i++) {

  9.         var newX = this.current[0].y + this.current[0].x - this.current[i].y;

  10.         this._modify(newX, map);

  11.     }

  12. 

  13.     for (var j = 1; j < this.current.length; j++) {

  14.         var newX = this.current[0].y + this.current[0].x - this.current[j].y;

  15.         var newY = this.current[0].y - this.current[0].x + this.current[j].x;

  16.         this.current[j].x = newX;

  17.         this.current[j].y = newY;

  18.     }

  19. }

# 3.6 消行

square.js 文件

  1. // 向下移动

  2. Square.prototype.moveDown = function(map) {

  3.     if (this._move(0, 1, map)) {

  4.         return false;

  5.     }

  6. 

  7.     // 堆积

  8.     for (var i = 0; i < this.current.length; i++) {

  9.         map.mapDivs[this.current[i].y][this.current[i].x].className = "done";

  10.     }

  11. 

  12.     // 消行

  13.     for (var j = 0; j <= map.maxY; j++) {

  14.         if (this._isCanRemoveLine(j, map)) {

  15.             this._removeLine(j, map);

  16.             // 加分

  17.             this.info.plusScore(10);

  18.         }

  19.     }

  20. 

  21.     // 重新初始化

  22.     this._init();

  23. }

  24. 

  25. // 消行

  26. Square.prototype._removeLine = function(row, map) {

  27.     for (var col = 0; col <= map.maxX; col++) {

  28.         for (var y = row; y > 0; y--) {

  29.             // 当前行样式 = 上一行样式

  30.             map.mapDivs[y][col].className = map.mapDivs[y - 1][col].className;

  31.         }

  32.         map.mapDivs[0][col].className = "none";

  33.     }

  34. }

  35. 

  36. // 是否可以消行

  37. Square.prototype._isCanRemoveLine = function(row, map) {

  38.     var flag = [];

  39.     for (var col = 0; col <= map.maxX; col++) {

  40.         flag.push(map.mapDivs[row][col].className);

  41.     }

  42.     return !(flag.join(",").indexOf("none") > -1);

  43. }

# 3.7 启动游戏

game.js 文件

  1. var Game = function() {

  2.     this.info = null;

  3.     this.square = null;

  4.     this.map = null;

  5. }

  6. 

  7. // 开始游戏

  8. Game.prototype.start = function() {

  9.     // 初始化数据

  10.     this.info = new Info();

  11.     this.square = new Square(this.info);

  12.     this.map = new Map(this.square);

  13.     this.map.init({

  14.         "map":document.getElementById("map"),

  15.         "shadow":document.getElementById("shadow"),

  16.         "next":document.getElementById("next")

  17.     });

  18.     // 监听游戏状态

  19.     var that = this;

  20.     var timeId = setInterval(function() {

  21.         if (that.map.closeFlag) {

  22.             that.map.close();

  23.             clearInterval(that.map.timeId);

  24.             clearInterval(that.info.timeId);

  25.             var startBtn = document.getElementById("startBtn");

  26.             startBtn.removeAttribute("disabled");

  27.             startBtn.innerHTML = "重新开始";

  28.             document.getElementById("pauseBtn").setAttribute("disabled",true);

  29.             clearInterval(timeId);

  30.         }

  31.     },10);

  32. }

  33. 

  34. window.onload = function() {

  35.     var game = new Game();

  36.     var startBtn = document.getElementById("startBtn");

  37.     var pauseBtn = document.getElementById("pauseBtn");

  38.     startBtn.addEventListener("click", function() {

  39.          if (this.innerHTML == "开始游戏") {

  40.             this.setAttribute("disabled",true);

  41.             pauseBtn.style.display = "inline-block";

  42.             pauseBtn.removeAttribute("disabled");

  43.             game.start();

  44.          } else {

  45.             this.setAttribute("disabled",true);

  46.             pauseBtn.style.display = "inline-block";

  47.             pauseBtn.removeAttribute("disabled");

  48.             game.restart();

  49.          }

  50.     });

  51. 

  52.     pauseBtn.addEventListener("click",function() {

  53.         if (this.innerHTML == "暂停游戏") {

  54.             this.innerHTML = "恢复游戏";

  55.             game.pause();

  56.         } else {

  57.             this.innerHTML = "暂停游戏";

  58.             game.recover();

  59.         }

  60.     });

  61. 

  62. }

四、源码

俄罗斯方块下载