一个 6 岁小姑娘小雅 的 Vibe Coding 体验 🧒💻
(手机、平板、电脑都能玩,无需下载安装)
这是小雅(Xiaoya)—— 一个 6 岁的小姑娘 —— 用自己的话,把脑袋里天马行空的想法说出来, 和 AI(Claude Code)一起"聊着聊着就做出来"的一堆小游戏。
她不写一行代码,只负责想点子、提要求、玩、然后说"这里我想要……"; AI 负责把她的话变成真正能在浏览器里玩的网页游戏。这就是所谓的 Vibe Coding(氛围编程)—— 用聊天和想象力来创造,而不是敲代码。
每一个游戏,都是从小雅的一句童言童语开始的,比如:
- "一个小鸟在空中飞,用鼠标躲障碍物……"
- "小企鹅跟姐姐玩躲猫猫,有一只手会捂住眼睛数三二一……"
- "一个小企鹅带着姐姐去游乐场,后来迷路了,要经过 17 个场景找回家的路……"
- "我要做一个逃离密室,怪物要恐怖一点,不然就不叫密室了!"
- "我要做一个沙威玛小店,客人会有绿到红的时间标志,还会有小偷来偷钱……"
打开 home.html 就是游戏大厅,点一下卡片即可开始玩。
| 游戏 | 文件 | 玩法 |
|---|---|---|
| 🏠 游戏大厅 | home.html |
所有游戏的入口 |
| 🐦 小鸟飞飞飞 | index.html |
鼠标带小鸟躲障碍,飞得越久分越高 |
| 🐧 小企鹅躲猫猫 | hide-and-seek.html |
数到三,点家具找出躲起来的小企鹅 |
| 🧠 脑筋急转弯 | riddles.html |
会念题的声音、选答案,分主题和难度 |
| 🔍 找不同 | spot-difference.html |
两张图找不同,三种难度、十个场景 |
| 🎨 你画我猜 | draw-guess.html |
画笔/橡皮/尺子/调色盘,一个画一个猜 |
| 🐧 小企鹅回家记 | penguin-home.html |
点路口走 17 站冒险,问路人、看地图回家 |
| 🏚️ 逃离密室 | escape-room.html |
3D 第一人称,躲怪物、捡道具、升级武器逃出去 |
| 🌯 沙威玛小店 | shawarma.html |
做料理招待客人赚钱,炸薯条、防小偷、换装扮 |
方法一:直接打开
双击 home.html,用浏览器打开即可。
方法二:本地服务器(部分功能更稳定,例如朗读声音)
# 在项目文件夹里运行:
python3 -m http.server 8000
# 然后浏览器打开:
# http://127.0.0.1:8000/home.html- 纯 HTML + CSS + JavaScript,零依赖、零安装
- 每个游戏就是一个单独的
.html文件,打开即玩 - 用到的小技术:Canvas 画图、光线投射(3D 密室)、Web Audio(音效)、 SpeechSynthesis(朗读题目)等
- 全部由 Claude Code 协助完成
这个项目记录了一个小朋友第一次"创造软件"的过程—— 她也许还不认识几个字,但她有无穷的想象力。
愿每个孩子都能体验到"把想法变成现实"的快乐。✨
MIT License —— 欢迎自由使用、修改、分享,也欢迎给小雅的游戏提点子!