俄罗斯方块生成算法

俄罗斯方块是一款经典的拼图游戏，其核心算法包含方块生成、方块移动、旋转、碰撞检测等功能。我们这里重点介绍方块生成的算法，并使用 JavaScript 实现它。

1. 方块生成逻辑

俄罗斯方块中的方块称为「Tetrominoes」，一共有 7 种不同的形状，每种形状由 4 个方块组成。它们通常用字母表示：

I 形
O 形
T 形
L 形
J 形
S 形
Z 形

方块的生成算法主要是：

从 7 种方块中随机选择一种。
将该方块生成在游戏顶部的初始位置。

2. 方块形状定义

在实际代码中，每个方块可以用二维数组（矩阵）来表示。方块的不同旋转状态也可以通过多个二维数组定义。

3. 实现步骤

定义 7 种方块形状的矩阵。
随机生成一个方块。
返回方块的矩阵和初始位置。

以下是一个简单的 JavaScript 实现：

// 定义俄罗斯方块的形状矩阵
const TETROMINOS = {
  I: [
    [[0,0,0,0],
     [1,1,1,1],
     [0,0,0,0],
     [0,0,0,0]],
    [[0,1,0,0],
     [0,1,0,0],
     [0,1,0,0],
     [0,1,0,0]]
  ],
  O: [
    [[1,1],
     [1,1]]
  ],
  T: [
    [[0,1,0],
     [1,1,1],
     [0,0,0]],
    [[0,1,0],
     [0,1,1],
     [0,1,0]],
    [[0,0,0],
     [1,1,1],
     [0,1,0]],
    [[0,1,0],
     [1,1,0],
     [0,1,0]]
  ],
  L: [
    [[0,0,1],
     [1,1,1],
     [0,0,0]],
    [[0,1,0],
     [0,1,0],
     [0,1,1]],
    [[0,0,0],
     [1,1,1],
     [1,0,0]],
    [[1,1,0],
     [0,1,0],
     [0,1,0]]
  ],
  J: [
    [[1,0,0],
     [1,1,1],
     [0,0,0]],
    [[0,1,1],
     [0,1,0],
     [0,1,0]],
    [[0,0,0],
     [1,1,1],
     [0,0,1]],
    [[0,1,0],
     [0,1,0],
     [1,1,0]]
  ],
  S: [
    [[0,1,1],
     [1,1,0],
     [0,0,0]],
    [[0,1,0],
     [0,1,1],
     [0,0,1]]
  ],
  Z: [
    [[1,1,0],
     [0,1,1],
     [0,0,0]],
    [[0,0,1],
     [0,1,1],
     [0,1,0]]
  ]
};

// 随机生成一个方块类型
function randomTetromino() {
  const tetrominos = 'IOTLJSZ';
  const randomIndex = Math.floor(Math.random() * tetrominos.length);
  const type = tetrominos[randomIndex];
  const shape = TETROMINOS[type];
  
  // 默认返回第一个旋转状态
  return {
    type: type,
    shape: shape[0],  // 初始旋转状态
    rotationIndex: 0  // 初始旋转角度的索引
  };
}

// 测试生成俄罗斯方块
function generateTetromino() {
  const tetromino = randomTetromino();
  console.log(`Generated Tetromino: ${tetromino.type}`);
  console.table(tetromino.shape);  // 以表格形式展示生成的方块
}

// 调用函数生成方块
generateTetromino();

4. 解释代码

TETROMINOS：这是一个对象，其中每个键表示一种方块类型（I, O, T, L, J, S, Z），每种类型对应的值是一个二维数组（矩阵），表示它的形状。每个二维数组内的 1 表示方块，0 表示空白区域。
randomTetromino：该函数从 7 种方块中随机选择一种，并返回该方块的初始状态。
generateTetromino：生成一个随机方块，并输出其形状。

要使用 HTML 和 CSS 来生成类似俄罗斯方块的样式，我们可以将方块的每一格视为一个小的 <div>，并通过 CSS 网格布局来排列它们。每个俄罗斯方块可以用一个包含多个小方块的容器 <div> 来表示。

5. HTML 和 CSS 实现方案

我们会为每个方块定义一个容器，然后通过 CSS 来渲染这些小方块。我们将使用 CSS grid 来实现俄罗斯方块的布局。

6. 具体实现步骤

HTML

创建一个外部容器，用来显示整个游戏面板。
每个方块可以是一个独立的 <div>，它包含多个小格子，每个格子表示俄罗斯方块的某一部分。

CSS

使用 grid 布局来控制方块的排列，每个方块按网格显示。
使用不同的背景颜色来表示不同的方块。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>俄罗斯方块生成</title>
  <style>
    /* 整个游戏区域 */
    .tetris-grid {
      display: grid;
      grid-template-columns: repeat(10, 40px); /* 10列，每列40px */
      grid-template-rows: repeat(20, 40px);    /* 20行，每行40px */
      gap: 1px;
      background-color: black;
      width: fit-content;
      margin: 20px auto;
    }

    /* 方块样式 */
    .tetris-block {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      width: 160px;
      height: 160px;
    }

    .tetris-cell {
      width: 100%;
      height: 100%;
    }

    /* 不同类型方块的颜色 */
    .block-I .tetris-cell { background-color: cyan; }
    .block-O .tetris-cell { background-color: yellow; }
    .block-T .tetris-cell { background-color: purple; }
    .block-L .tetris-cell { background-color: orange; }
    .block-J .tetris-cell { background-color: blue; }
    .block-S .tetris-cell { background-color: green; }
    .block-Z .tetris-cell { background-color: red; }

    /* 隐藏不需要显示的空格 */
    .empty { background-color: transparent; }
  </style>
</head>
<body>

  <!-- 俄罗斯方块显示区域 -->
  <div class="tetris-grid">
    <!-- 方块的容器 -->
    <div class="tetris-block block-I">
      <div class="tetris-cell empty"></div>
      <div class="tetris-cell empty"></div>
      <div class="tetris-cell empty"></div>
      <div class="tetris-cell empty"></div>
      <div class="tetris-cell filled"></div>
      <div class="tetris-cell filled"></div>
      <div class="tetris-cell filled"></div>
      <div class="tetris-cell filled"></div>
      <div class="tetris-cell empty"></div>
      <div class="tetris-cell empty"></div>
      <div class="tetris-cell empty"></div>
      <div class="tetris-cell empty"></div>
    </div>

    <!-- 更多方块 -->
    <div class="tetris-block block-O">
      <div class="tetris-cell filled"></div>
      <div class="tetris-cell filled"></div>
      <div class="tetris-cell empty"></div>
      <div class="tetris-cell empty"></div>
      <div class="tetris-cell filled"></div>
      <div class="tetris-cell filled"></div>
      <div class="tetris-cell empty"></div>
      <div class="tetris-cell empty"></div>
    </div>

    <!-- 你可以继续添加其他形状的方块 -->
  </div>

</body>
</html>

7. 代码解释

HTML结构：
- tetris-grid: 这是游戏的主面板，定义了10列和20行的网格布局。
- 每个方块由一个 tetris-block 容器和多个 tetris-cell 组成。tetris-cell 是俄罗斯方块的每个小格子。
CSS布局：
- grid-template-columns 和 grid-template-rows 定义了网格的行和列的数量，确保每个方块格子都可以整齐排列。
- block-I, block-O 等类为不同方块定义了不同颜色。
- .empty 是为了控制那些在形状中不显示的小格子。