俄罗斯方块

代码模式怎么用？在通义官网点击代码模式，在对话框用大白话描述你的需求，通义会自动生成代码及应用预览。

HTML 结构：

创建一个 <canvas> 元素，用于绘制俄罗斯方块的游戏区域。

在 canvas 元素上方，创建一个 <div> 用于显示游戏信息（例如：当前分数、下一个方块、游戏状态等）。

页面布局使用 Flexbox，确保游戏区域居中显示，且随着浏览器窗口的变化自适应调整。

CSS 样式：

页面背景色为深灰色（#222），canvas 元素有黑色边框（1px solid #000）。

使用 flex 布局使游戏区域居中。canvas 居中且上下左右留白适当。

游戏区域的背景色为黑色（#000），canvas 边框为黑色。canvas 的边框与背景色形成对比。

游戏说明文字区域采用绝对定位，放置在页面顶部，居中显示，文字颜色为浅色（如 #fff）。

JavaScript 游戏逻辑：

画布设置：

默认画布尺寸为 width = 600px 和 height = 800px，游戏区域的宽度为15列，比例为 scale = 40。

默认游戏区的尺寸为 arenaWidth = 15 和 arenaHeight = 20，每个方块的尺寸为 scale = 40（40px x 40px）。

方块矩阵和旋转：

方块类型使用矩阵表示：

'T' 方块：[ [0, 1, 0], [1, 1, 1], [0, 0, 0] ]

'O' 方块：[ [2, 2], [2, 2] ]

'L' 方块：[ [0, 0, 3], [3, 3, 3], [0, 0, 0] ]

'J' 方块：[ [4, 0, 0], [4, 4, 4], [0, 0, 0] ]

'I' 方块：[ [0, 5, 0, 0], [0, 5, 0, 0], [0, 5, 0, 0], [0, 5, 0, 0] ]

'S' 方块：[ [0, 6, 6], [6, 6, 0], [0, 0, 0] ]

'Z' 方块：[ [7, 7, 0], [0, 7, 7], [0, 0, 0] ]

每种方块对应一个颜色，颜色映射如下：

'T' 方块：#FF0D72

'O' 方块：#0DC2FF

'L' 方块：#0DFF72

'J' 方块：#F538FF

'I' 方块：#FF8E0D

'S' 方块：#FFE138

'Z' 方块：#3877FF

方块均设置黑色描边，确保方块单个元素在背景中可以被识别。

方块移动与碰撞检测：

移动操作：

左右移动：当按下左或右箭头键时，方块分别向左或右移动，检测碰撞后停止移动。

下落加速：按下下箭头键时，方块的下落速度加快，dropInterval 的值为 1000ms，即每秒下落一次。

旋转：按 Q 和 W 键，方块顺时针和逆时针旋转，旋转后会检测是否发生碰撞，若发生碰撞则恢复原状。

碰撞检测：

每次移动或旋转后，检测当前方块是否与其他已放置方块或边界发生碰撞，若发生碰撞，则停止该次操作。

计时器与自动下落：

使用 dropCounter 来控制方块的自动下落，dropInterval 初始值为 1000ms，即每秒自动下落一次。

当 dropCounter 超过 dropInterval，触发 playerDrop() 方法，进行方块下落，若检测到碰撞，则将方块固定在游戏区域内并生成新方块。

清除满行与得分：

每当清除一行时，得分增加 1。arenaSweep() 方法负责检查并清除所有满行。

每行清除后，上方的方块会下移，并且得分会增加。

游戏结束与重置：

如果新生成的方块与已放置的方块发生碰撞，则游戏结束。

在游戏结束后，游戏区域会重置，得分清零。

动画效果：

方块下落时，每次更新画面时，使用 requestAnimationFrame() 平滑过渡