10分钟用AI做出第一个游戏!复刻童年黄金矿工

上图这个有趣的小游戏,从零到完成,你猜用了多久?

答案不是一周,也不是一天,而是10分钟。

我们将通过'黄金挖矿'这个简易的H5 Web游戏制作,让你彻底体验AI编程的魔力。

前置条件:已部署Claude Code

时间投入:跟着做10-15分钟

技术难度:⭐(会复制粘贴就行)

未部署ClaudeCode,可参考这篇juejin.cn/post/752718...

启动项目

1.创建游戏文件夹(以Windows为例)

项目文件尽量不要放在系统盘,防止有些文件可能因系统权限要求而报异常。

所以,我们在D盘下创建一个放置H5游戏的文件夹

  1. 双击进入该文件夹后,文件夹上方的「盘符区域」输入「cmd」并敲击"回车",「命令行」界面会自动打开,并显示该文件夹路径。

在「命令行」界面键入"claude",即刻启动Claude Code。

  1. 复制这段话发给Claude Code
css 复制代码
帮我创建一个黄金矿工H5游戏,需求:a. 用HTML+CSS+JavaScript实现b. 玩家控制钩子抓取金块c. 有分数计时功能d. 手机和电脑都能玩现在开始,先创建项目文件夹和基础文件。
  1. 当出现「创建项目文件夹结构」选项时,建议选择"第二项",让claude完成后续所有基础文件和项目文件夹的创建。 关键提示: 全程无需手动建文件夹,让AI全程操作自行创建即可。

5.创建index主页,依旧选择"第二项"

6. 网页风格选项,继续选择"第二项"

7. 开启游戏界面制作,依然选择"第二项"

8. 静待几分钟,初始游戏搭建完成(总时长不到10分钟)。

9. 打开文件夹,找到"index html"文件,双击后会自动启动默认浏览器打开。

10. 游戏初始界面如下 虽然游戏界面略显粗糙,但基本的游戏功能已实现。

让Claude优化部分游戏细节

1.我们可以继续输入需求,让claude优化部分游戏细节。

复制代码
💬 把石头变成改成钻石,价值翻倍;并增加炸弹障碍物,碰到扣分。
  1. 以上依然选择"第二项",进行需求更新。 所有选项建议都用"第二个",实现需求迭代。

大概耗时三分钟,新的需求就完成啦~

更新后的游戏界面如下。

若你希望增加音效,也可继续向claude提需求,让其进一步优化完成你的任意想法和需求。

编程已不是程序员的专利

传统学编程要先学语法、再学逻辑、最后做项目,至少3个月。

AI编程反过来:先做项目、边玩边学、需要啥学啥。

这才是AI编程的正确姿势。

现在,请立即打开Claude Code,复制文中的指令,亲手运行一遍这个项目。

只有亲手实现,魔法才会真正在你身上生效。

你不仅做出了一个游戏,也亲自验证了一条高效创作的捷径:你已经掌握了将想法变为现实的最新生产力工具。

相关推荐
玄同76511 小时前
Trae国际版与国内版深度测评:AI原生IDE的双生花
ide·人工智能·ai编程·cursor·ai-native·trae
乱世刀疤12 小时前
Claude Code实战:生成植物大战僵尸游戏
ai编程
nbsaas-boot13 小时前
如何进行 Vibe Coding:从“灵感驱动”到“可交付工程”的方法论
java·ai编程
Cynthia的梦15 小时前
踩坑实录:在E盘部署Node.js+Claude-Code环境的完整流程(附路径冲突解决方案)
claude
LinkZ-Dev15 小时前
521-解决谷歌 Antigravity 软件登录相关问题
ai编程·gemini·antigravity
roamingcode16 小时前
我是如何 Vibe Coding,将 AI CLI 工具从 Node.js 迁移到 Rust 并成功发布的
人工智能·rust·node.js·github·claude·github copilot
壮Sir不壮1 天前
2026年奇点:Clawdbot引爆个人AI代理
人工智能·ai·大模型·claude·clawdbot·moltbot·openclaw
玉梅小洋1 天前
Claude Code 从入门到精通(七):Sub Agent 与 Skill 终极PK
人工智能·ai·大模型·ai编程·claude·ai工具
-嘟囔着拯救世界-1 天前
【保姆级教程】Win11 下从零部署 Claude Code:本地环境配置 + VSCode 可视化界面全流程指南
人工智能·vscode·ai·编辑器·html5·ai编程·claude code
小小管写大大码1 天前
如何让vscode变得更智能?vscode接入claude实现自动编程
运维·ide·vscode·自动化·编辑器·ai编程·腾讯云ai代码助手