凌晨1点,我把‘猫抓板击打小游戏’发到邻居群——3小时后,4个宝妈问‘能加宝宝名字和录音吗?’
大家好,我是RD社区的阿哲。上周三凌晨1点,我正陪娃刷牙时,他突然指着猫抓板喊:‘爸爸!打它!’——我脑子一热,打开Cursor,花了27分钟,做了个「猫抓板击打小游戏」,发到了小区妈妈群。结果……你猜怎么着?
✅ 3小时后,4位宝妈私信我:“能加我女儿小满的名字吗?”“能录一句‘抓到啦!’当音效不?”“能存我家娃最高分吗?”
✅ 第二天中午,一位开早教工作室的邻居直接转账299元,说:“下周试听课就用这个暖场!”
这不是炫技,是真·零基础可复刻。下面手把手带你做——不用装Node、不配环境、不写一行JS函数,只靠Prompt+AI工具+微信扫码即玩。
---
🔧 工具准备(2分钟)
> ✅ 关键提示:不要新建项目文件夹!直接在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命令栏✅ 等待8秒左右,Claude会返回完整HTML代码(约420行,含内联CSS+JS)
---
🖥️ Step 2:本地运行 & 测试(1分钟)
Cmd+S 保存为 cat-game.htmlcat-game.html?name=朵朵 → 标题立刻变成「朵朵的猫抓板挑战!」> 💡 小技巧:按 F12 → Console 输入 localStorage.getItem('catGameScore') 可查当前分数,验证持久化是否生效
---
📱 Step 3:微信扫码即玩(0部署)
我们不用服务器!用「微信开发者工具」或更简单的——
方案A(推荐新手):用「微搭轻应用」临时托管
cat-game.html → 发布方案B(极简):用「Vercel Edge Functions」一键部署(免注册)
xxx.vercel.app 链接 → 生成二维码> ✅ 实测:邻居用iPhone扫完,0跳转、0注册、0加载失败——因为所有资源都在一个HTML里!
---
🛠️ Step 4:快速定制(宝妈们问的3个需求,3分钟搞定)
▸ 加宝宝名字输入框(非URL参数)
在AI生成的HTML中搜
,找到标题行,把:铲屎官的猫抓板挑战!
替换成:
铲屎官的猫抓板挑战!
再在
末尾加:function updateName() {
const name = document.getElementById('nameInput').value || '铲屎官';
document.getElementById('title').textContent = name + '的猫抓板挑战!';
localStorage.setItem('playerName', name);
}
▸ 录音音效(用微信原生API,不需后端)
在
里加: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();
}
}
▸ 分数分享到微信群
在按钮旁加:
配合JS:
function shareScore() {
const score = localStorage.getItem('catGameScore') || '0';
const text = 我刚刚在【猫抓板挑战】拿了${score}分!你也来试试?→ [链接];
if (window.WeixinJSBridge) {
WeixinJSBridge.invoke('sendAppMessage', { ... });
} else {
alert('请在微信中打开此链接分享');
}
}
---
💰 接单小结(真实收益)
> 最后送你一句真心话:别怕“游戏太小”——宝妈要的不是《原神》,是孩子盯着屏幕笑出声的30秒。而你的AI,就是那根逗猫棒。
---
下期预告:《为什么我的‘垃圾分类投掷游戏’被街道办做成H5主推页?——关键在删掉这行CSS:user-select: none》