一个需求生成完整俄罗斯方块：713 行代码，键盘触屏都能玩

一个需求生成完整俄罗斯方块：713 行代码，键盘触屏都能玩

一段需求，码道自动写出带七种方块、投影提示、消行动画与触屏手势的完整俄罗斯方块——键盘、触屏都能玩，双击 HTML 即可开局

分类: ai-development
标签: CodeArts, AI编程, 俄罗斯方块, 网页小游戏, Canvas
难度: 初级
读者: 前端开发者、游戏爱好者、技术写作者

---

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个俄罗斯方块网页小游戏，单个 HTML 文件即可运行……」几分钟后，一个 713 行、约 20 KB 的完整俄罗斯方块就自动生成了：10×20 标准棋盘、I/O/T/S/Z/J/L 七种经典方块、方向键/WASD/触屏三种操作方式、投影提示、消行动画、分数等级、下一个方块预览，双击 HTML 就能玩。

---

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

---

3. 码道能力一览

这次开发中，码道展示了以下能力：

• 自然语言编程：我说「俄罗斯方块网页小游戏」，码道直接理解成棋盘 + 七种方块 + 消行计分 + 交互控制四件套方案
• 自主产品设计：自动选择了深色渐变背景、Canvas 渲染、投影提示（ghost piece）、「下一个方块」预览等经典玩法设计
• 工程细节到位：方块用坐标数组 + box 尺寸表示、顺时针旋转公式、墙踢（wall kick）±2 格试探、长按方向键自动重复（DAS/ARR）、触屏点击/长按/滑动三种手势区分
• 自检与收尾：生成后自动确认文件已写入桌面，并逐条汇报功能清单

---

4. 任务描述

我想要一个俄罗斯方块网页小游戏，具体要求：

• 单个 HTML 文件即可运行，不需要任何构建步骤
• 10×20 标准棋盘，包含 I、O、T、S、Z、J、L 七种经典方块且各有颜色
• 键盘方向键控制：左右移动、下加速下落、上旋转；也支持 WASD
• 消行得分并升级，等级越高下落越快
• 界面显示下一个方块预览、当前分数、等级、消行数
• 游戏结束弹出提示并可重新开始
• 界面现代美观，方块立体感强，消行有动画
• 支持触屏滑动移动、点击旋转

开发命令：

# 打开码道 TUI，在输入框中输入需求
codearts

---

5. 开发过程

步骤 1：打开码道 TUI 输入需求

在项目目录启动 codearts，将需求粘贴到输入框（模型为 Build · GLM-5.2）。提交后码道先列出实现方案，随即开始构建：

步骤 2：码道开始生成

码道进入构建流程，先确认会把游戏文件放到桌面方便查找，随后开始编写完整代码：

步骤 3：码道完成并汇报

几分钟后，码道完成开发，生成 tetris.html（713 行，约 20 KB），结构验证通过，并逐条汇报功能清单：

从 TUI 的输出可以看到，除了需求里的功能，码道还自己补了投影提示（ghost piece）、空格键直落、P 暂停、R 重开、长按方向键自动重复等细节。

---

6. 代码解析

生成的 tetris.html 核心逻辑可以分为三块：方块定义与旋转、碰撞与消行、多端交互。

方块定义与旋转：坐标数组 + box 尺寸

const SHAPES = {
  I:{color:'#22d3ee', cells:[[0,1],[1,1],[2,1],[3,1]], box:4},
  O:{color:'#fbbf24', cells:[[0,0],[1,0],[0,1],[1,1]], box:2},
  T:{color:'#a855f7', cells:[[0,1],[1,1],[2,1],[1,0]], box:3},
  S:{color:'#22c55e', cells:[[1,0],[2,0],[0,1],[1,1]], box:3},
  Z:{color:'#ef4444', cells:[[0,0],[1,0],[1,1],[2,1]], box:3},
  J:{color:'#3b82f6', cells:[[0,0],[0,1],[1,1],[2,1]], box:3},
  L:{color:'#f97316', cells:[[2,0],[0,1],[1,1],[2,1]], box:3},
};

码道用「坐标数组 + 包围盒尺寸」表示七种方块：每种方块只存几个关键格子的相对坐标，旋转时对整个坐标数组套顺时针公式 (x,y) -> (box-1-y, x)，并配合墙踢尝试 0、±1、±2 的横向偏移，旋转靠近墙边也不会卡死。这种表示比 4×4 位图矩阵更简洁，也更容易实现统一的碰撞检测。

碰撞与消行：去重合并 + 逐行删除

function collide(piece, dx, dy, cells){
  for(const [x,y] of cells){
    const nx = piece.x + x + dx;
    const ny = piece.y + y + dy;
    if(nx<0 || nx>=COLS || ny>=ROWS) return true;
    if(ny>=0 && grid[ny][nx]) return true;
  }
  return false;
}

function applyClear(rows){
  rows.sort((a,b)=>a-b);
  for(const r of rows){
    grid.splice(r,1);
    grid.unshift(new Array(COLS).fill(null));
  }
  const n = rows.length;
  const pts = [0,100,300,500,800][n] * level;
  score += pts;
  lines += n;
  const newLevel = Math.floor(lines/10)+1;
  if(newLevel !== level){
    level = newLevel;
    dropInterval = Math.max(60, 800 - (level-1)*70);
  }
  updateHUD();
}

移动/下落前先用 collide 做边界与已堆叠格子的双重判断，落定后用 merge 把当前方块颜色写入棋盘。消行用「从下到上 splice + unshift 空行」的方式整体下移，并先进入 280ms 的消行动画再真正删除；计分表 [0,100,300,500,800] 按一次消 1~4 行翻倍奖励，每消 10 行升一级、下落间隔递减，最快约 60ms 一格。

多端交互：键盘 DAS 重复 + 触屏三手势

const DAS=170, ARR=50; // 横向自动重复延迟与间隔

window.addEventListener('keydown', e=>{
  ...
  switch(k){
    case 'arrowleft': case 'a': move(-1); leftRepeatT=0; break;
    case 'arrowright': case 'd': move(1); rightRepeatT=0; break;
    case 'arrowup': case 'w': rotate(); break;
    case 'arrowdown': case 's': softDrop(true); downRepeatT=0; break;
    case ' ': hardDrop(); break;
  }
});

键盘除了方向键还映射了 WASD、空格直落、P 暂停、R 重开；长按左右键会按 DAS 170ms 延迟、ARR 50ms 间隔自动重复，手感接近街机。触屏端用 touchstart/touchmove/touchend 区分三种手势：横滑超过阈值移动一格、下滑加速下落、快速轻点旋转、长按 250ms 以上直落——手机上单手就能玩。

---

7. 运行效果

用浏览器打开 tetris.html，玩了几手之后：

可以看到：

• 深色渐变界面 + 10×20 棋盘，网格清晰、方块配色鲜艳
• 正在下落的蓝色 L 形方块下方有半透明投影提示落点
• 右上角显示「下一个」方块预览、分数 / 等级 / 消行数
• 底部列出完整操作说明：←→ 移动、↑ 旋转、↓ 加速、空格直落、WASD 同方向键、P 暂停、R 重开
• 触屏设备上滑动移动、点击旋转，长按直落

---

8. 能力总结

能力	说明
自然语言理解	「俄罗斯方块网页小游戏」→ 棋盘/方块/计分/交互完整方案
算法细节	坐标数组 + box 表示七种方块，顺时针旋转 + 墙踢，碰撞检测统一复用
输出质量	Canvas 高清渲染（DPR 自适应），投影提示、消行动画、下一个预览齐全
产品细节	DAS/ARR 长按重复、空格直落、P 暂停/R 重开、触屏三手势、等级加速

---

9. 总结

这次实践最直观的感受是：码道没有把俄罗斯方块做成「能跑就行」的玩具，而是把经典玩法里那些容易被忽略的细节——投影提示、墙踢、长按重复、暂停重开、触屏手势区分——都补齐了。713 行单文件、零依赖、双击即玩，拿来做童年回忆杀或给孩子演示都很合适。如果你也想试试，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz