俄罗斯方块：在代码方块的世界里纵横驰骋

用原生 JavaScript 解锁俄罗斯方块的奥秘：代码方块的非凡旅程

一、构建俄罗斯方块的基础：构造函数

想象一下，你可以像建造一座房子一样，用原生 JavaScript 构建一个俄罗斯方块游戏。这就是构造函数的用武之地。它们就像蓝图，为我们的游戏创建了各个方块的模型，每个方块都有一个特定的位置、形状和行为。

function Block(x, y, shape) {
  this.x = x;
  this.y = y;
  this.shape = shape;
}

二、方块的千姿百态：定义形状

接下来，我们需要赋予方块不同的形状，让游戏充满乐趣。我们创建了一个 shapes 数组，里面存放了各种形状，比如经典的四格方块和 L 形方块。

const shapes = [
  [[1, 1, 1, 1]],
  [[1, 1, 0], [0, 1, 1]],
  [[0, 1, 1], [1, 1, 0]],
  [[1, 1], [1, 1]]
];

三、数组方法：移动、旋转、放置

就如同现实中的方块一样，我们的虚拟方块也需要移动、旋转和放置。这就是数组方法出场的时刻。它们就像俄罗斯方块世界的万能工具，让我们可以操纵方块，赋予它们生命。

移动：掌控方块的动态

Block.prototype.moveDown = function() {
  this.y++;
};

Block.prototype.moveLeft = function() {
  this.x--;
};

Block.prototype.moveRight = function() {
  this.x++;
};

旋转：灵活多变的方块造型

Block.prototype.rotate = function() {
  this.shape = this.shape[0].map((val, idx) => this.shape.map(row => row[idx]));
};

四、游戏逻辑：让方块世界运转起来

现在，有了构造函数和数组方法，我们已经为俄罗斯方块世界打下了坚实的基础。接下来，让我们注入一些游戏逻辑，让方块动起来！

方块生成：源源不断的方块供应

每当方块消失时，一个新的方块就会从天而降。我们使用 generateBlock() 函数来创建方块，随机选择一个形状，并将其放置在合适的位置。

function generateBlock() {
  const shapeIdx = Math.floor(Math.random() * shapes.length);
  const block = new Block(4, 0, shapes[shapeIdx]);
  return block;
}

方块下落：重力作用下的自由落体

就像现实生活中的俄罗斯方块一样，我们的方块也会受到重力影响。我们使用 setInterval() 函数来模拟重力，让方块不断下落。

setInterval(() => {
  currentBlock.moveDown();
}, 1000);

碰撞检测：方块与世界的互动

为了防止方块穿过墙壁或其他方块，我们需要进行碰撞检测。我们使用 checkCollision() 函数来检查方块是否与游戏区域的边界或其他方块相撞。

function checkCollision(block) {
  for (let i = 0; i < block.shape.length; i++) {
    for (let j = 0; j < block.shape[i].length; j++) {
      if (block.shape[i][j] && board[block.y + i][block.x + j]) {
        return true;
      }
    }
  }
  return false;
}

行消除：得分与奖励

当一行方块被填满时，它会消失，为玩家带来分数和奖励。我们使用 checkRows() 函数来检查行是否已满，并相应地清除和更新游戏区域。

function checkRows() {
  for (let i = 0; i < board.length; i++) {
    let isFull = true;
    for (let j = 0; j < board[i].length; j++) {
      if (!board[i][j]) {
        isFull = false;
        break;
      }
    }
    if (isFull) {
      board.splice(i, 1);
      board.unshift(Array(board[0].length).fill(0));
    }
  }
}

五、用户输入：让玩家掌控游戏

最后但并非最不重要的一点，我们需要让玩家能够通过键盘控制方块。我们使用 addEventListener() 函数来监听键盘事件，并根据不同的按键执行相应操作。

document.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowDown":
      currentBlock.moveDown();
      break;
    case "ArrowLeft":
      currentBlock.moveLeft();
      break;
    case "ArrowRight":
      currentBlock.moveRight();
      break;
    case "ArrowUp":
      currentBlock.rotate();
      break;
  }
});

结论

通过将构造函数、数组方法和游戏逻辑相结合，我们已经成功地使用原生 JavaScript 构建了一个功能齐全的俄罗斯方块游戏。从方块的创建到碰撞检测和行消除，每一步都精雕细琢，让这款经典游戏焕发新生。无论你是一位经验丰富的程序员还是一位好奇的新手，我们都鼓励你尝试自己动手制作俄罗斯方块，进一步探索代码方块世界的无穷魅力。

常见问题解答

1. 我可以自定义俄罗斯方块的形状吗？

是的，你可以通过修改 shapes 数组来创建自己的方块形状。

2. 如何加快方块下落的速度？

你可以修改 setInterval() 函数中的时间间隔值来加快方块下落的速度。

3. 如何添加分数跟踪功能？

你可以创建一个变量来存储当前分数，并在每次消除行时对其进行更新。

4. 如何创建多玩家俄罗斯方块游戏？

你可以使用 WebSocket 或其他网络技术来实现多玩家模式，让多个玩家同时玩游戏。

5. 如何添加声音效果以增强游戏体验？

你可以使用 HTML5 Audio API 来添加方块移动、碰撞和行消除等事件的音效。