Vibe Coding一人即团队系列4：AI 编程初体验与多平台对比评测

纲要

核心概念
- AI 编程助手：豆包、通义千问、ChatGPT、Gemini
- 单页面应用：HTML 文件
核心流程
- 提出需求 → AI 生成代码 → 下载/保存 HTML → 浏览器运行
对比维度
- 生成速度
- 代码完整性
- 交互体验
- 下载便利性
关键技术点
- HTML 结构与 JavaScript 游戏逻辑
- 键盘事件绑定（方向键控制）
- 游戏状态管理（开始、暂停、重新开始）

体验背景

在开始使用本地开发工具之前，通过直接与多个 AI 编程助手交互，可以快速体验从需求到成品的完整流程。本文档记录了使用豆包、通义千问、ChatGPT 和 Gemini 这四个主流平台，生成同一款"俄罗斯方块"单页面游戏的经历与对比结果。

任务定义

向 AI 助手提出以下需求：

请帮我写一个单页面（HTML）的小游戏，游戏是俄罗斯方块。写完后，可以让我下载这个 HTML 页面。

此需求包含三个明确要素：

技术栈 ：纯前端，单 HTML 文件。
功能：经典的俄罗斯方块游戏逻辑。
交付物 ：可下载的 .html 文件，双击即可运行。

多平台生成过程与结果对比

生成速度与交付方式

AI 平台	生成速度	交付方式	备注
Gemini	最快	内置下载按钮	代码生成后直接提供文件下载。
ChatGPT	中等	内置下载按钮/在线预览	提供预览功能，下载文件可直接运行。
豆包	较快	建议右键另存为	提供代码，但无直接下载按钮。
通义千问	较慢	建议复制代码到本地	初次生成无下载按钮，需用户手动创建文件。

交互与视觉体验

Gemini：生成的游戏界面功能完整，满足基本的游戏操作。
ChatGPT ：
- 界面设计相对大方，包含"开始"、"暂停"、"重新开始"以及"快速到底"等完整的控制按钮。
- 提供了键盘操作说明，对新手友好。
- 关键特性：游戏区域增加了"影子"效果，即在当前方块下落位置处显示一个半透明的预览，帮助玩家精准定位。这是其他平台生成的初版代码中未包含的细节。
通义千问 ：
- 视觉效果优于 Gemini，与 ChatGPT 的风格类似。
- 初始问题 ：第一轮生成未提供下载入口，用户需要手动复制代码并保存为 .html 文件。
- 二次修正：当追问"请提供下载按钮"后，AI 重新生成了完整的代码，这表明 AI 对于上下文的理解能够驱动其优化交付物。
豆包：视觉效果良好，运行流畅，游戏计分（消除一行得 100 分）等功能均正常。

核心技术点解析

HTML 文件结构

生成的所有代码均为一个独立的 HTML 文件，其结构遵循标准范式：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块</title>
    <style>
        /* CSS 样式，控制布局、颜色、画布样式 */
    </style>
</head>
<body>
    <!-- 游戏UI结构，包含计分板、控制按钮、游戏画布容器等 -->
    <script>
        // JavaScript 游戏逻辑，包含画布渲染、方块生成、碰撞检测、消除行、计分系统及键盘事件监听
    </script>
</body>
</html>

核心游戏逻辑 (JavaScript)

俄罗斯方块的实现主要依赖于 Canvas 或 DOM 操作。虽然各平台的代码具体实现不同，但核心逻辑相似，主要包括以下几个部分：

javascript 复制代码

// 1. 定义游戏区域和方块的尺寸
const COLS = 10;
const ROWS = 20;
const BLOCK_SIZE = 30;
let board = Array(ROWS).fill().map(() => Array(COLS).fill(0));

// 2. 定义方块形状（七种标准方块的矩阵表示）
const SHAPES = [
    // I, O, T, S, Z, J, L 等形状的二维数组表示
];

// 3. 游戏主循环（定时器驱动）
function gameLoop() {
    if (!gameOver) {
        moveDown(); // 下落逻辑
        draw();     // 渲染画面
    }
}
setInterval(gameLoop, 500); // 每500ms下落一格

// 4. 用户输入控制（键盘事件）
document.addEventListener('keydown', function(e) {
    switch(e.key) {
        case 'ArrowLeft':  moveLeft(); break;
        case 'ArrowRight': moveRight(); break;
        case 'ArrowDown':  moveDown(); break;
        case 'ArrowUp':    rotate(); break;
    }
});

// 5. 碰撞检测与消除行
function checkCollision() { /* ... */ }
function clearRows() { /* ... */ }

开发建议与最佳实践

需求明确化：对于 AI 编程助手，需求描述的精确度直接影响产出质量。在本次任务中，明确"可下载的 HTML 页面"这一交付要求至关重要。
迭代优化：当 AI 的初次产出不满足要求时（如通义千问未提供下载按钮），可以通过追加指令进行修正。AI 能够基于对话上下文优化其生成的代码。
多平台对比：不同 AI 模型在代码风格、功能完整性、用户体验（UI/UX）设计上存在差异。对于个人开发者而言，根据项目类型和需求选择合适的 AI 工具，可以有效提高开发效率。

参考文档

官方文档
- 豆包 AI
- 通义千问
- ChatGPT
- Gemini
参考链接
- MDN Web Docs: HTML
- MDN Web Docs: Canvas API

总结

本次体验验证了 AI 编程助手在生成独立、可运行的交互式应用方面的能力。对于原型构建、单页面应用开发以及日常脚本编写等场景，AI 工具可以显著提升开发效率。

开发者需要关注的核心点在于：清晰的需求表达、对 AI 生成代码的理解与校验，以及利用多平台优势进行选择与组合。通过简单的"需求-生成-运行"循环，个人开发者可以快速验证创意，实现从想法到产品的"一人团队"工作模式。