四轮迭代，从零到完整游戏：用 SOLO Coder 做俄罗斯方块

本文作者：茉卷，TRAE 开发者用户

做一款游戏，现在已经不难了。

随着 AI 工具的普及，即使不写一行代码，任何人都能在几分钟内生成一个可以运行的游戏原型。只需要描述你的想法，AI 就能快速搭建出一个"能玩"的版本。

但问题是：从能玩到好玩、从原型到产品，中间隔着一道巨大的鸿沟。你可能会遇到这些困境：

• 生成的游戏界面太粗糙，缺乏吸引力

• 想调整某个功能，但不知道如何精确控制

• 需要添加新玩法，却发现代码结构混乱难以扩展

• 想要持续迭代优化，但每次重新生成都会丢失之前的改动

这就是 SOLO Coder 的价值所在：与一键生成不同，Coder 提供的是可控的、结构化的开发过程。

本文将从最初的一句"开发一个经典的俄罗斯方块游戏"开始，通过四轮结构化迭代，最终做出一个拥有炫酷特效、多种玩法、完整音效系统的真正可用的游戏项目。

这不是一次性的 demo 生成，而是一个完整的产品开发过程。

背景

核心目标：

探索 SOLO Coder 如何帮助开发者（包括非程序员）构建一个真正可用、可迭代的俄罗斯方块游戏项目。

使用 TRAE 的能力：

• SOLO Coder

• SOLO plan

第一轮迭代：从想法到原型

起点：一句话需求

最初，我只输入了一句简单的话：

原始提示词： 开发一个经典的俄罗斯方块游戏

这时，TRAE 的提示词优化功能发挥了作用，将这句话扩展为一份详尽的专业需求文档：

优化后

开发一个经典的俄罗斯方块游戏，需包含以下核心功能：
1. 游戏界面设计：
   - 主游戏区域：10列×20行的标准网格
   - 预览区域：显示下一个即将出现的方块
   - 计分板：显示当前分数、消除行数和游戏等级
   - 控制面板：包含开始/暂停/重置按钮

2. 方块系统：
   - 实现7种经典俄罗斯方块形状（I、J、L、O、S、T、Z）
   - 每种方块使用不同颜色区分
   - 支持方块的旋转（顺时针/逆时针）
   - 方块下落速度随等级提升而加快

3. 游戏机制：
   - 方块自动下落功能
   - 玩家控制（左移、右移、加速下落、旋转）
   - 行消除判定与计分（单行/双行/三行/四行不同分值）
   - 碰撞检测（边界碰撞、方块堆叠碰撞）
   - 游戏结束条件（方块堆叠到顶部）

4. 技术要求：
   - 使用HTML5 Canvas或现代游戏引擎实现
   - 确保60fps的流畅动画效果
   - 实现响应式设计，适配不同屏幕尺寸
   - 添加音效系统（移动、旋转、消除、游戏结束等音效）

5. 测试要求：
   - 所有方块形状的旋转逻辑测试
   - 边界碰撞检测测试
   - 计分系统准确性验证
   - 不同等级的速度变化测试

技术文档自动生成

TRAE 随后生成了完整的技术文档，我们大概了解一下，直接继续。

技术文档全文

## 技术栈与项目结构（React 版）
- 技术栈：Vite + React + TypeScript + Canvas 渲染；Vitest + React Testing Library（测试），ESLint/Prettier（质量）
- 运行目标：核心渲染由 Canvas 完成以保证 60fps；React 负责 UI（计分板/预览/控制）与状态展示
- 目录结构：
  - `index.html`（根容器）
  - `src/main.tsx`（React 应用入口）
  - `src/App.tsx`（页面布局与顶层状态分发）
  - `src/components/GameCanvas.tsx`（Canvas 渲染主游戏区：10×20）
  - `src/components/Preview.tsx`（预览下一个方块）
  - `src/components/ScoreBoard.tsx`（分数/行数/等级显示）
  - `src/components/Controls.tsx`（开始/暂停/重置按钮，移动端可选触控）
  - `src/game/engine.ts`（游戏引擎：循环/锁定/结束判定）
  - `src/game/board.ts`（网格/行消除/碰撞）
  - `src/game/tetromino.ts`（7 种方块与旋转，含 SRS 壁踢简化）
  - `src/game/spawn.ts`（7-袋随机算法与预览队列）
  - `src/game/input.ts`（键盘绑定与事件转发，React 层注册）
  - `src/render/canvasRenderer.ts`（Canvas 绘制：方块/影子/堆叠/网格/预览）
  - `src/audio/sfx.ts`（音效播放与静音切换）
  - `src/ui/layout.ts`（响应式缩放与尺寸计算）
  - `src/constants.ts` / `src/types.ts`（常量与类型）
  - `assets/sfx/*`（音效资源）
  - `tests/*`（逻辑与 UI 测试）

## React 集成策略
- 渲染与状态：
  - 逻辑状态使用可变 `ref`（避免每帧 React 重渲染）；Canvas 每帧绘制
  - React 仅在重要事件（行消除/得分/等级变化/结束）触发一次性渲染（通过 `setState`）
- 事件流：
  - 键盘事件在 `App` 层注册，转发给 `engine`；按钮通过 props 调用引擎方法
- 组件职责：
  - `GameCanvas`：持有 Canvas 引用，初始化渲染器，订阅引擎回调
  - `Preview/ScoreBoard/Controls`：纯 UI 展示与控制

## 游戏机制（保持与原需求一致）
- 自动下落：基于等级的 `fallInterval`；软降（加速）、硬降（到底立即锁定）
- 控制：`←/→` 左右移，`↑` 顺时针，`Z` 逆时针，`↓` 软降，`Space` 硬降
- 行消除与计分：默认分值 100/300/500/800（可配置）；每 10 行升一级；速度按级递减（表驱动或 `0.85^level`）
- 碰撞检测：边界与堆叠；旋转失败尝试壁踢；新方块无法放置则结束

## 响应式与性能
- `layout.ts` 根据容器尺寸动态计算单元格像素，保证 10×20 比例
- 使用 `requestAnimationFrame` 与时间累积控制下落；渲染与逻辑解耦
- 降低 React 重渲染频率；Canvas 对齐像素减少模糊

## 音效系统
- 轻量实现：HTMLAudio（后续可升级 WebAudio）；提供 `mute` 状态与 UI 切换
- 事件绑定：移动/旋转/消除/结束触发音效

## 测试计划
- 逻辑单元测试（Vitest）：
  - 旋转逻辑（含 I 的特殊壁踢）
  - 边界/堆叠碰撞判定
  - 计分与等级提升
  - 速度映射（不同等级）与软/硬降行为
  - 7-袋生成分布与不重复性
- UI 测试（React Testing Library）：
  - 控制按钮行为（开始/暂停/重置）
  - 计分板显示同步更新
  - 预览组件显示下一个方块

## 文档优化（README 结构建议）
- 项目简介与技术栈
- 快速开始：
  - 安装依赖、启动、构建命令
- 目录结构与模块职责说明
- 配置项说明：
  - 分值/等级阈值/速度表/键位映射/颜色主题
- 使用说明：
  - 键位/按钮操作、移动端交互
- 测试说明：
  - 如何运行测试、测试范围与覆盖点
- 性能与响应式策略摘要
- 资源清单：音效文件与版权说明

## 里程碑与交付
- 阶段 1：Vite+React+TS 初始化、基础页面与布局、Canvas 容器
- 阶段 2：核心游戏逻辑（board/tetromino/engine）、基本渲染与输入
- 阶段 3：行消除/计分/等级、结束判定、预览区与音效
- 阶段 4：响应式完善、UI 打磨、移动端交互（可选）
- 阶段 5：测试完善与 60fps 稳定性校验、文档最终整理

## 说明与后续
- 当前目录为空，将按此 React 方案初始化并实现；文档将以上述结构编写与优化
- 如需指定 UI 风格（颜色/字体/布局方式）或分值/速度策略，请说明；默认使用上述配置
- 请确认是否按此 React 方案执行与文档结构输出；确认后我将开始落地

第一版成果

经过一轮生成，基本功能全部实现 ，游戏已经可以正常运行。

实现效果：

第二轮迭代：查漏补缺

使用 Plan 模式复盘

打开 Plan 模式，让 TRAE 总结当前进度：

已完成：

• 阶段 1：项目初始化、基础页面与布局

• 阶段 2：核心游戏逻辑

• 阶段 3：行消除/计分/等级、预览区

待完成：

• 阶段 4：响应式完善、UI 打磨、移动端交互

• 阶段 5：测试完善与 60fps 稳定性校验、文档整理

继续完成剩余任务

SOLO Coder 生成了新的实施文档，专门用于完成阶段 4 和 5。

这里 SOLO Coder 生成了一个新文档，用来完成阶段 4 和 5。

第二版成果

新增功能 ：

• 音效系统（移动、旋转、消除、游戏结束音效）

• 音频控制按钮（静音/取消静音）

• 响应式布局优化

不足之处：

• 界面还不够吸引人，缺乏视觉冲击力。

第三轮迭代：视觉升级

提出优化需求

原始提示词：

需要优化俄罗斯方块游戏的界面，增加趣味性，符合国际一流标准

优化后提示词：

优化俄罗斯方块游戏界面需要从视觉设计、交互体验和游戏趣味性三个维度进行全面升级，具体实施要求如下：

1. 视觉设计优化：
- 采用现代化扁平化设计风格，使用高对比度色彩方案（主色调不超过5种）
- 游戏区域采用网格化设计，方块边缘增加1px发光特效
- 背景实现动态粒子效果，随游戏进度变化强度
- 所有UI元素必须支持4K分辨率，适配16:9和21:9屏幕比例

2. 核心游戏性增强：
- 新增"经典/极速/挑战"三种游戏模式选择界面
- 实现方块预览功能（显示下3个即将出现的方块）
- 加入连击特效系统（3连击触发火花，5连击触发闪电）
- 积分系统重构为多维度评分（速度分/连击分/效率分）

3. 交互体验升级：
- 实现60fps流畅动画效果，所有转场动画时长控制在0.3s以内
- 触控设备支持手势操作（左滑加速下落，右滑存储方块）
- 增加震动反馈系统（不同操作对应不同震动模式）
- 全界面支持键盘/手柄/触屏三套操作方案

- 所有美术资源提供day/night两种主题模式

交付物要求：
1. 完整的UI设计规范文档（含色彩代码和动效参数）
2. 通过UserTesting平台获取的可用性测试报告
3. 性能分析报告（内存占用 需要在俄罗斯方块的基础上，设计一些有趣的玩法

优化后提示词：

在俄罗斯方块经典玩法的基础上，设计并实现至少3种创新游戏模式，每种模式应包含以下要素：
    
1 . 游戏规则扩展：
   - 添加道具系统（如炸弹、旋转器、冻结等）
   - 设计关卡目标（如消除特定数量/颜色的方块）
   - 引入时间挑战或生存模式

2 . 视觉效果增强：
   - 为特殊玩法设计专属粒子特效
   - 添加动态背景和主题皮肤
   - 实现方块消除时的连锁反应动画

3. 技术实现要求：
   - 保持基础物理引擎的稳定性
   - 确保新玩法与经典模式的平滑切换
   - 提供清晰的玩法教学指引

所有新玩法需经过平衡性测试，确保游戏难度曲线合理，并保留经典俄罗斯方块的核心操作手感。最终交付包含完整设计文档、可执行原型和用户测试报告。

我们提出要求，TRAE 继续先给出设计文档

先实现一种：炸弹连锁模式

选择"炸弹连锁"模式作为首个创新玩法进行实现。

第四版成果

炸弹连锁模式上线 ：

• 随机方块中会出现炸弹道具

• 炸弹落地后会引发连锁爆炸效果

• 爆炸产生专属粒子特效

• 新增模式选择界面

核心收获：SOLO Coder 如何让项目真正可用

1. 用自然语言交流，但获得专业级的技术方案

整个生成过程可以不懂技术概念。我的输入从最初的"开发一个经典的俄罗斯方块游戏"，到后来的"优化界面"、"增加玩法"，都只是自然语言描述。【提示词优化功能】会将这些需求"翻译"成专业的开发提示词，SOLO Coder 会生成技术文档，这极大地降低了创造的门槛。

这意味着：即使你不是程序员，也能得到一个程序员能看懂、能维护的项目。

2. 从骨架到血肉：清晰的"规划-实现"迭代路径

我们可以利用 SOLO Coder 的 Plan 功能先出具一份详尽的技术文档，搭建好游戏的"骨架"。第一轮迭代后，进行"复盘"，检查哪些任务已经完成，哪些尚未实现，并据此制定下一阶段的计划。这种结构化的推进方式，让开发者对整个项目的进度一目了然，非常有安全感，感觉项目始终在可控的轨道上推进。

3. 超越"能玩"：AI 是创意的放大器

当基础功能实现后，我的需求变得更为模糊，比如"界面不够吸引人"、"设计一些有趣的玩法"。SOLO Coder 的价值在这里得到了最大体现。它没有简单地换个颜色了事，而是从视觉设计、交互体验到游戏模式进行了系统性升级，提出了动态粒子背景、多种游戏模式、炸弹道具等不错的点子。

当创意还只是一个模糊的概念时，SOLO Coder 能快速将它转化为可视原型。它不仅是验证工具，更是灵感引擎，帮助我们在早期探索中打破僵局，明确方向。

可以看到，SOLO Coder 正在改变的，不是"能不能做"，而是"能做到什么程度"。

从最初的一句话需求，到最终拥有炫酷特效、多种玩法、完整音效系统的俄罗斯方块游戏，整个过程只用了四轮迭代。更重要的是，这不是一个用完即弃的 demo，而是一个真正可用、可维护、可扩展的项目。