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

站

站长

2026年4月13日 · 阅读 964 · 点赞 12 · 预计 5 分钟

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

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

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

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

---

🔧 工具准备（2分钟）

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

微信（用于扫码测试，无需部署）

> ✅ 关键提示：不要新建项目文件夹！直接在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中搜 <h1>，找到标题行，把：

<h1 id="title">铲屎官的猫抓板挑战！</h1>

替换成：

<input type="text" id="nameInput" placeholder="输入宝宝名字" value="铲屎官">
<button onclick="updateName()">✓ 设置</button>
<h1 id="title">铲屎官的猫抓板挑战！</h1>

再在<script>末尾加：

function updateName() {
  const name = document.getElementById('nameInput').value || '铲屎官';
  document.getElementById('title').textContent = name + '的猫抓板挑战！';
  localStorage.setItem('playerName', name);
}

▸ 录音音效（用微信原生API，不需后端）

在<script>里加：

async function playCustomSound() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // 实际项目建议用预录MP3，但演示中可用TTS模拟
    const utterance = new SpeechSynthesisUtterance('抓到啦！');
    speechSynthesis.speak(utterance);
  } catch (e) {
    // 若禁用麦克风，降级为默认音效
    document.getElementById('audio').play();
  }
}

▸ 分数分享到微信群

在按钮旁加：

<button onclick="shareScore()">📣 分享战绩</button>

配合JS：

function shareScore() {
  const score = localStorage.getItem('catGameScore') || '0';
  const text = 我刚刚在【猫抓板挑战】拿了${score}分！你也来试试？→ [链接];
  if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('sendAppMessage', { ... });
  } else {
    alert('请在微信中打开此链接分享');
  }
}

---