Flappy Bird：一飞冲天，撞管就重来

Flappy Bird：一飞冲天，撞管就重来

一段需求，码道自动写出 463 行、约 12 KB 的单文件 Flappy Bird——深色夜空渐变背景、远近两层山丘视差滚动、小鸟扇翅加速度倾斜、最高分本地持久化，双击 HTML 就能玩

分类: ai-development
标签: CodeArts, AI编程, FlappyBird, 网页小游戏, 触屏
难度: 初级
读者: 前端开发者、游戏爱好者、技术写作者

---

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个 Flappy Bird 风格的网页小游戏，单个 HTML 文件即可运行……」约 4 分 8 秒后，一个 463 行、约 12 KB 的完整 Flappy Bird 就自动生成了：点击或空格让小鸟向上飞、松开受重力下落，随机高度的上下柱子穿过得分，撞到柱子或地面游戏结束；深色渐变夜空、闪烁星星加月亮、地面斜纹与远近两层山丘视差滚动，小鸟扇动翅膀还会按速度倾斜，双击 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. 码道能力一览

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

• 自然语言编程：我说「Flappy Bird 风格的网页小游戏」，码道直接理解成 Canvas 画布 + 重力跳跃 + 柱子生成与碰撞 + 计分与最高分 + 背景滚动六件套方案
• 自主产品设计：自动选择了深色渐变夜空、两层山丘视差滚动、闪烁星星与月亮、小鸟扇翅与倾斜动画、开始/游戏中/结束三态界面等视觉设计
• 工程细节到位：重力常量与跳跃力度分开定义、柱子间距与难度节奏调优、地面高度与碰撞边界精确对齐、按速度计算小鸟旋转角度
• 自检与收尾：生成后用 grep 逐项核对 drawStars/drawHills/localStorage/渐变色等关键实现是否落盘，并逐条汇报功能清单

---

4. 任务描述

我想要一个 Flappy Bird 风格的网页小游戏，具体要求：

• 单个 HTML 文件即可运行，不需要任何构建步骤
• 点击或空格键让小鸟向上飞，松开后受重力下落
• 上下两根柱子随机高度生成，小鸟穿过柱子得分；碰到柱子或地面则游戏结束，显示得分并可以重新开始
• 背景有滚动效果，小鸟有扇动翅膀的动画
• 用 Canvas 实现，深色渐变天空背景，柱子有明显颜色和边框
• 记录最高分，使用 localStorage 持久化

---

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道先拆解需求，然后直接开始写代码：

生成过程中，码道会边写代码边自检，例如用 grep 核对关键绘制函数与渐变颜色是否真的写进了文件：

约 4 分 8 秒后，码道汇报完成，输出功能清单，并提示文件位置：

双击生成的 flappy-bird.html 在浏览器中直接运行，游戏菜单与完整玩法都正常：

---

6. 代码解析

码道生成的代码是一个自包含的 IIFE，核心逻辑非常清晰：

物理与常量：重力、跳跃力度、柱子尺寸与间距、地面高度等全部抽成常量，后续调手感只需要改数字：

const GRAVITY = 0.45;
const JUMP = -7.6;
const PIPE_W = 64;
const PIPE_GAP = 150;
const PIPE_SPEED = 2.4;
const GROUND_H = 80;

状态机：用 READY / PLAY / OVER 三个状态管理开始、游戏中、结束三态，输入与重开逻辑都按状态分发：

const STATE = { READY: 0, PLAY: 1, OVER: 2 };
let state = STATE.READY;

柱子随机生成：上下柱之间固定 150px 空隙，顶柱高度在合法区间随机，保证永远可穿过：

const top = minTop + Math.random() * (maxTop - minTop);

小鸟动画：绘制时先按位置平移、再按速度计算旋转角，扇翅用两帧交替，让小鸟既有飞翔感又符合俯冲姿态：

ctx.translate(bird.x, bird.y);
ctx.rotate(bird.rot);

碰撞判定：遍历每根柱子做矩形相交检测，撞到柱子或地面立即切到 OVER 状态，并把得分写进 localStorage：

for (const p of pipes) {
  // 矩形相交检测，命中则游戏结束
}

从这些代码可以看出，码道不只是"把功能拼出来"，重力数值、柱子节奏、碰撞边界这些影响手感的细节都调得比较到位。

---

7. 真实运行效果

双击 flappy-bird.html 即可开始游戏：按空格或点击屏幕让小鸟上升，穿过一对柱子得 1 分；撞到柱子或地面后游戏结束，画面显示本次得分与历史最高分，点击即可重新开始。深色渐变夜空里有闪烁星星和月亮，地面斜纹与远近两层山丘以不同速度滚动，营造出纵深视差感。

---

8. 能力总结

• 一次生成完整可玩：从需求到可双击运行的单文件游戏，全程约 4 分钟，无需手工补代码
• 视觉细节到位：夜空渐变、星星月亮、双层视差山丘、地面斜纹、小鸟扇翅与倾斜，画面不简陋
• 玩法完整：重力跳跃手感、随机柱子节奏、得分与最高分持久化、结束重开，核心体验闭环
• 工程习惯良好：常量抽离、状态机管理、按速度计算旋转角，代码结构清晰可读

---

9. 总结

用码道开发 Flappy Bird 这类网页小游戏，最大的感受是"需求即产品"：把玩法要点说清楚，码道就能给出包含完整交互、动画和视觉风格的成品。对想快速验证创意、或者刚学前端想看看"一个完整游戏是怎么写的"的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道挑战更多花样的小游戏，继续记录真实的开发过程。