🎮
🎮
🎮
🎮

凌晨1点,我把‘猫抓板击打小游戏’发到邻居群——3小时后,4个宝妈问‘能加宝宝名字和录音吗?’

站长
2026年4月13日 · 阅读 919 · 点赞 12 · 预计 5 分钟
分享:

凌晨1点,我把‘猫抓板击打小游戏’发到邻居群——3小时后,4个宝妈问‘能加宝宝名字和录音吗?’

大家好,我是RD社区的阿哲。上周三凌晨1点,我正陪娃刷牙时,他突然指着猫抓板喊:‘爸爸!打它!’——我脑子一热,打开Cursor,花了27分钟,做了个「猫抓板击打小游戏」,发到了小区妈妈群。结果……你猜怎么着?

✅ 3小时后,4位宝妈私信我:“能加我女儿小满的名字吗?”“能录一句‘抓到啦!’当音效不?”“能存我家娃最高分吗?”
✅ 第二天中午,一位开早教工作室的邻居直接转账299元,说:“下周试听课就用这个暖场!”

这不是炫技,是真·零基础可复刻。下面手把手带你做——不用装Node、不配环境、不写一行JS函数,只靠Prompt+AI工具+微信扫码即玩。

---

🔧 工具准备(2分钟)


  • 安装 [Cursor](https://cursor.sh)(免费版足够)

  • 登录 Claude(推荐使用 Cursor 内置的 Claude 3.5 Sonnet,响应快、理解准)

  • 微信(用于扫码测试,无需部署)
  • > ✅ 关键提示:不要新建项目文件夹!直接在Cursor里新建一个空文件 → 命名为 cat-game.html → 粘贴AI生成内容即可运行

    ---

    🎯 Step 1:给Claude写精准Prompt(复制粘贴这句)

    > “请生成一个单文件HTML游戏:画面中央是一块卡通猫抓板,点击它会随机跳出发光爪印(3种颜色),同时播放‘喵~’短音效;每击中一次+10分,连续击中3次触发‘连击特效’(闪光+音效升级);顶部显示玩家昵称(默认‘铲屎官’,支持URL参数修改,如 ?name=小满);分数自动保存在浏览器localStorage,关页不丢;底部有‘重置分数’按钮。要求:所有资源内联(无外部CDN)、适配手机竖屏、代码压缩进一个HTML文件、注释用中文。”

    在Cursor中:

  • Cmd+K(Mac)或 Ctrl+K(Win)唤出AI命令栏

  • 粘贴上述Prompt

  • 点击「Run」
  • ✅ 等待8秒左右,Claude会返回完整HTML代码(约420行,含内联CSS+JS)

    ---

    🖥️ Step 2:本地运行 & 测试(1分钟)

  • 把AI生成的代码全选 → Cmd+S 保存为 cat-game.html

  • 右键该文件 →「用浏览器打开」→ 看见猫抓板就成功了!

  • 尝试改网址栏:cat-game.html?name=朵朵 → 标题立刻变成「朵朵的猫抓板挑战!」

  • 连续点击3次 → 听见“叮咚!”+屏幕闪光 → 连击生效 ✅
  • > 💡 小技巧:按 F12 → Console 输入 localStorage.getItem('catGameScore') 可查当前分数,验证持久化是否生效

    ---

    📱 Step 3:微信扫码即玩(0部署)

    我们不用服务器!用「微信开发者工具」或更简单的——

    方案A(推荐新手):用「微搭轻应用」临时托管

  • 打开 [腾讯微搭](https://wechat.miniapp.qq.com)

  • 新建「轻应用」→ 上传 cat-game.html → 发布

  • 复制生成的二维码图片 → 发群里
  • 方案B(极简):用「Vercel Edge Functions」一键部署(免注册)

  • 访问 https://vercel.com/new → 粘贴GitHub Gist链接(或直接拖拽HTML文件)→ 3秒生成 xxx.vercel.app 链接 → 生成二维码
  • > ✅ 实测:邻居用iPhone扫完,0跳转、0注册、0加载失败——因为所有资源都在一个HTML里!

    ---

    🛠️ Step 4:快速定制(宝妈们问的3个需求,3分钟搞定)

    ▸ 加宝宝名字输入框(非URL参数)


    在AI生成的HTML中搜

    ,找到标题行,把:

    铲屎官的猫抓板挑战!



    替换成:


    铲屎官的猫抓板挑战!



    再在