1
全局:其实游戏是最带劲的入门
游戏的结果立刻可见,所以学起来最有趣。看着角色动、分数涨,会让人停不下来。
我们做在浏览器里运行的游戏。无需下载、无需应用商店,发个链接朋友就能玩。工具用轻快的 Vite。
小贴士
第一个游戏选规则一句话能讲清的:“跳起来躲障碍”“接住掉落物”。越简单越能完成。
免费 · 基础
制作游戏
用说话,做出在浏览器里直接能玩的游戏
约 35 分钟9 步
完成后你将拥有
发个链接谁都能玩的专属浏览器游戏
准备清单
Claude Pro 及以上订阅必需
这是氛围编程的大脑。最低用 Claude Pro($20/月)就足以开始;如果你每天大量创作,Max 套餐额度更宽裕。免费版可以浅尝,但很快会触及上限。
一台电脑(Windows 或 Mac)必需
配置基本无所谓,能上网的笔记本就够了。
Node.js(LTS 版本)必需
运行代码的引擎。到 nodejs.org 下载标注 “LTS” 的稳定版。安装会在第1步一起完成。
VS Code(Visual Studio Code)必需
免费的代码编辑器。在这里装上 Claude Code 扩展,就能 “和 AI 对话来编程”。注意它与微软的 Visual Studio(另一款更重的 IDE)不同。
2
第1步, 安装 Node.js 并验证
到 nodejs.org 装 “LTS” 版,在 VS Code 终端用下面命令验证。
终端
$node -v$npm -v
v20.18.0 10.8.2
出现这样就成功了
出现两个版本号即成功。
遇到报错怎么办？
3
第2步, 把 Claude 接入 VS Code
装好 VS Code 后,在扩展里装 “Claude Code”,用 Sign in 连上订阅。
小贴士
先把游戏点子讲给 Claude,让它 “把规则改得更好玩”,能得到好建议。
4
第3步, 用 Vite 新建游戏项目
用下面命令建一个轻快的游戏项目。完成后会提示接下来的命令。
终端
$npm create vite@latest my-game -- --template vanilla
✔ Scaffolding project in ./my-game... Done. Now run: cd my-game npm install npm run dev
出现这样就成功了
出现 “Scaffolding project in ./my-game...” 和后续步骤即成功。
5
第4步, 运行游戏并预览
进入文件夹,安装并运行。依次输入下面三行。
出现 “http://localhost:5173” 后用浏览器打开(端口与网站路线不同)。看到默认界面即就绪。该窗口开着。
终端
$cd my-game$npm install$npm run dev
VITE v6.0.0 ready in 320 ms ➜ Local: http://localhost:5173/
出现这样就成功了
出现 Vite 界面即开发环境就绪。
遇到报错怎么办？
6
第5步, 用氛围编程做游戏
向 Claude 具体描述游戏。例:“用 canvas 做个简单游戏。底部有用左右键移动的篮子,水果从上方掉落。接住 +1 分,漏掉 -1 命,3 命减到 0 就 game over。把分数和生命显示在画面上。”
在浏览器里边玩边加料:“水果越来越快”“金色水果 +5 分”“加开始画面和重玩按钮”。
小贴士
难度不合就只说 “太简单/太难”,Claude 会调整速度与频率。
遇到报错怎么办？
7
第6步, 用音效和演出提升完成度
游戏一半在音效和演出。对 Claude 说 “接住水果时来个短促 ‘叮’,漏掉时 ‘嘟’,分数增加时数字短暂放大”。
再加上开场音乐、game over 画面、最高分保存(localStorage),就是一款像样的游戏了。
小贴士
没有音效文件也行。让 Claude “用代码生成简单音效(Web Audio)”,无需文件即可发声。
8
第7步, 构建并发布
做出成品(下面命令),把结果(dist 文件夹)上传到 Vercel 或 Netlify 即得链接。
不会部署就问 Claude “怎么把 dist 文件夹放到 Vercel”,它会一步步教你。
终端
$npm run build
vite v6.0.0 building for production... ✓ built in 1.2s dist/index.html 0.46 kB dist/assets/index.js 8.1 kB
出现这样就成功了
出现 “built in ...” 和 dist 内容即构建成功。
遇到报错怎么办？
9
完成!以及下一步
恭喜,你做出了能用链接炫耀的游戏。
接下来关卡、Boss、排行榜、手机触控,都能用同样方式扩展。把游戏发到 Launchpad,来场分数比拼吧。
