用 Vibe Coding 制作迷你游戏
Vibe Coding —— 2025 年最火爆的编程新范式，正在彻底改变独立游戏开发者的创作方式。
什么是 Vibe Coding？
2025 年 2 月，OpenAI 联合创始人 Andrej Karpathy 在 X（原 Twitter）上首次提出 vibe coding 概念：
"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."
（有一种新的编程方式，我称之为 "vibe coding"——你完全沉浸于氛围中，拥抱指数级增长，忘记代码的存在。）
核心理念：用自然语言描述你想要什么（What），而不是如何实现（How）。让 AI 替你处理语法细节、样板代码和调试工作。
这一概念迅速走红——Merriam-Webster 将其列为 2025 年" slang & trending"词汇，Collins English Dictionary 更将其评为 2025 年度词汇，搜索量在 Karpathy 发帖后暴涨 6,700%。
为什么游戏开发特别适合 Vibe Coding？
游戏开发是 vibe coding 的最佳试验场：
| 传统开发 | Vibe Coding |
|---|---|
| 40+ 小时搭建基础框架 | 2-10 分钟完成原型 |
| 需要精通编程语法 | 用自然语言描述需求 |
| 独立完成所有代码 | AI 处理重复性实现工作 |
| 长时间迭代周期 | 快速获得可玩版本 |
"AI 是个糟糕的决策者，但擅长重复性工作" —— Cody Dreams
实战工具栈
AI 编程助手
- Claude Code —— 最受欢迎的 vibe coding 工具
- OpenAI Codex CLI —— 命令行 AI 编程
- Cursor —— AI 优先的代码编辑器
游戏引擎选择
| 引擎 | 适合类型 | 特点 |
|---|---|---|
| Three.js | 3D 游戏 | Web 3D 功能强大 |
| Phaser | 2D 游戏 | 轻量级，专为 HTML5 游戏设计 |
| Unity | 3D/2D | 成熟生态，需更多配置 |
专用 Vibe Coding 平台
- VibeGame（Hugging Face 开源）—— Three.js + Rapier 物理引擎 + ECS 架构
- SEELE —— 多模态 AI，浏览器内完成完整开发
- Rosebud AI —— 自然语言直接生成可玩游戏
- VibeCodeGames.ai —— 社区分享 + 游戏平台
开发工作流程
1️⃣ 编写 Game Design Document (GDD)
→ AI 辅助创建 Markdown 格式设计文档
2️⃣ 选择技术栈
→ 如 Vite + ThreeJS + WebSocket
3️⃣ 创建 Implementation Plan
→ 分解为小步骤，每步含测试
4️⃣ Memory Bank 管理
→ 存储所有文档，AI 读取上下文
5️⃣ 增量实现与测试
→ 完成一步验证一步
关键技巧（来自 EnzeD/vibe-coding 仓库，2.7k+ Stars）
✅ 用具体 prompt："在机翼上切出用于副翼的空间" 而非"做个飞机"
✅ 保持模块化，避免单文件膨胀
✅ 利用 /rewind 回滚错误的迭代
✅ 为 AI 创建 llms.txt 文档，帮助它理解项目结构
热门案例一览
| 游戏 | 类型 | 特点 |
|---|---|---|
| Vibe Survivor | 生存射击 | 13,000+ 行 JavaScript，100% AI 生成代码/美术/音频 |
| 2D Battle Royale MMO | 大逃杀 MMO | WebRTC 实现多人联机，Go 后端 |
| Zombies Per Minute | 工厂建设 roguelite | 复杂策略游戏，完全 vibe coded |
| Portal Siege | FPS | 仅用 24 小时 vibe coding 完成 |
| VibeCraft | 3D 沙盒 | 可用 prompt 生成任意内容 |
社区与资源
社区活动
- Vibe Jam（levels.io 举办，总奖金 $35,000）
- VibeCodeGames.ai 社区平台
- Discord / Twitter vibe coding 开发者社群
学习资源
- GitHub: EnzeD/vibe-coding —— 系统化方法论，包含 Memory Bank 模板
- YouTube: "How To Vibe Code Your First Game" —— 10 步流程，3 天完成可玩游戏
- Forward Future AI: "Building a Strategy Game with Vibe Coding" —— 完整 7 天开发日志
优势与挑战
✅ 优势
- 速度提升 10 倍：40+ 小时的工作量压缩到几分钟
- 降低门槛：非程序员也能创建完整游戏
- 即时反馈：快速迭代，实时看到开发成果
⚠️ 挑战
- 需要精确 prompt：模糊描述导致错误实现
- 复杂游戏仍需人工决策：架构层面的决策 AI 无法替代
- 服务器端验证：需要额外关注后端安全
实战示例：用 Vibe Coding 制作一个"躲避弹球"游戏
下面演示如何用 Phaser + Claude Code 从零开始创建一个完整的迷你游戏。
第一步：创建项目并启动 vibe coding
# 创建项目目录
mkdir dodge-ball && cd dodge-ball
# 初始化 npm 项目
npm init -y
# 安装 Phaser
npm install phaser
# 启动 Claude Code
claude-code
第二步：用自然语言描述游戏需求
在 Claude Code 中输入你的游戏愿景：
我想创建一个叫做 "Dodge Ball" 的 2D 躲避游戏。
游戏规则：
- 玩家控制一个蓝色方块，在屏幕底部左右移动
- 从屏幕顶部不断落下红色圆形 "子弹"
- 玩家需要躲避这些子弹，如果被击中就游戏结束
- 每躲避一颗子弹得 10 分，分数显示在左上角
- 游戏速度每 30 秒加快一点
- 玩家有 3 条命，每次被击中少一条命
美术风格：复古像素风，深色背景。
第三步：AI 生成初始代码
Claude Code 会自动生成一个完整的 index.html：
<!DOCTYPE html>
<html>
<head>
<title>Dodge Ball</title>
<style>
body { margin: 0; background: #1a1a2e; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
<script>
class MainScene extends Phaser.Scene {
constructor() { super('MainScene'); }
create() {
// 创建玩家（蓝色方块）
this.player = this.add.rectangle(400, 550, 40, 40, 0x3498db);
this.physics.add.existing(this.player);
this.player.body.setCollideWorldBounds(true);
// 分数显示
this.score = 0;
this.scoreText = this.add.text(16, 16, 'Score: 0', {
fontSize: '24px', fill: '#fff', fontFamily: 'monospace'
});
// 生命显示
this.lives = 3;
this.livesText = this.add.text(16, 48, 'Lives: 3', {
fontSize: '24px', fill: '#fff', fontFamily: 'monospace'
});
// 子弹组
this.bullets = this.physics.add.group();
// 定时生成子弹
this.time.addEvent({
delay: 800,
callback: () => this.spawnBullet(),
loop: true
});
// 加速定时器
this.time.addEvent({
delay: 30000,
callback: () => this.speedUp(),
loop: true
});
// 玩家控制
this.cursors = this.input.keyboard.createCursorKeys();
// 碰撞检测
this.physics.add.overlap(
this.player, this.bullets,
this.hitBullet, null, this
);
}
spawnBullet() {
const x = Phaser.Math.Between(50, 750);
const bullet = this.add.circle(x, -20, 12, 0xe74c3c);
this.physics.add.existing(bullet);
bullet.body.setVelocityY(300);
this.bullets.add(bullet);
}
speedUp() {
this.bullets.getChildren().forEach(b => {
b.body.setVelocityY(b.body.velocity.y * 1.1);
});
}
hitBullet(player, bullet) {
bullet.destroy();
this.lives--;
this.livesText.setText('Lives: ' + this.lives);
if (this.lives <= 0) {
this.gameOver();
} else {
// 闪烁提示
this.cameras.main.shake(200, 0.01);
}
}
gameOver() {
this.physics.pause();
const gameOverText = this.add.text(400, 300, 'GAME OVER\nScore: ' + this.score, {
fontSize: '48px', fill: '#fff', fontFamily: 'monospace',
align: 'center'
}).setOrigin(0.5);
}
update() {
// 玩家移动
if (this.cursors.left.isDown) {
this.player.x -= 8;
} else if (this.cursors.right.isDown) {
this.player.x += 8;
}
// 更新分数
this.bullets.getChildren().forEach(bullet => {
if (bullet.y > 600 && !bullet.counted) {
bullet.counted = true;
this.score += 10;
this.scoreText.setText('Score: ' + this.score);
}
});
}
}
new Phaser.Game({
type: Phaser.AUTO,
width: 800,
height: 600,
scene: MainScene,
physics: { default: 'arcade', arcade: { gravity: { y: 0 } } }
});
</script>
</body>
</html>
第四步：运行测试
# 用简单 HTTP 服务器运行
npx http-server . -p 8080
然后在浏览器打开 http://localhost:8080/dodge-ball/index.html。
第五步：根据感觉调整
如果觉得游戏太难或太简单，继续用自然语言调整：
"子弹下落速度太了，请减慢一点"
"玩家移动速度能加快吗？"
"能否在屏幕中央加一条分隔线，玩家不能越过？"
"分数到达 500 时显示胜利画面"
快速上手建议
- 从小游戏开始 —— 平台跳跃游戏或简单益智游戏
- 明确游戏愿景 —— 先用 GDD 文档化你的想法
- 选择轻量工具 —— Phaser + Claude Code 是不错的入门组合
- 保持耐心迭代 —— AI 生成代码需要不断调整优化
结语
Vibe Coding 代表了编程范式的根本转变——从语法主导到意图主导。对于独立游戏开发者而言，这意味着一件事：
你的想象力比你的编程能力更重要。
用自然语言描述你的游戏梦想，让 AI 帮你把梦想变成可玩的现实。