我使用 Claude AI Vibe 编码了一个气球爆破游戏 🎈

Source: Dev.to

我构建的内容 🎮

一个可以完整游玩的气球消除街机游戏，完全在浏览器中运行——使用Claude AI（vibe coding）构建。没有 React，没有库，没有构建工具。仅一个 index.html 文件。

• 在线试玩 →
• 代码 →

什么是 Vibe Coding？

Vibe coding = 你向 AI 描述想要的东西，它帮你构建，你迭代，最终发布。

1. 描述想法
2. 让 AI 构建
3. 测试、微调、发布

我整个过程都使用了 Claude AI——说实话，这是一次很棒的体验。

游戏内容

• 🎯 3 种气球尺寸，分值不同
• 💥 连击倍率系统
• ⚡ 8 种强化道具 — 连射、护盾、三连射、冻结、额外生命、炸弹、双倍得分、激光
• 🎆 每次消除都有粒子爆炸效果
• 🌠 动态星空背景，带有流星轨迹
• 📱 移动端触摸支持
• 💾 本地保存最高分
• 🔊 音效 — 全部在浏览器内合成，无需音频文件
• 3 个难度等级 — 简单、中等、困难

我的构建过程

说实话？我只把想法描述给 Claude AI，然后不断迭代。

“在单个 HTML 文件中制作一个气球射击游戏，使用竖屏画布，底部有射手，气球从顶部下落，带有连击系统和强化道具。”

• 测试哪些有效
• 描述需要修复或添加的内容
• 使用拖拽方式部署到 Netlify

从想法到上线 URL 的总耗时——几小时而已。

本地运行

git clone https://github.com/S-SUJAN-S/balloon-blaster.git
cd balloon-blaster
# Just open index.html in your browser

无需 npm install。无需配置。直接打开即可玩。

30 秒部署

1. 前往 netlify.com
2. 将你的 index.html 拖到上传区域
3. 完成 — 即可获得线上 URL

我的收获

Vibe coding 是一种真实的工作流。你不必理解每一行代码就能发布有趣且可用的作品。关键是要清晰地知道 想要构建什么，并能够描述出来——AI 会处理 如何实现。

如果你想要完整的 Vibe coding 过程演示，留下 评论——我会在 BlinkNBuild 上制作完整视频！

• 🎮 试玩 →
• 💻 代码 →
• 📺 观看 →

使用 Claude AI 构建 ⚡ | BlinkNBuild