打地鼠：手速大考验，一锤一个准

打地鼠：手速大考验，一锤一个准

一段需求，码道自动写出 3×3 草地洞、三档难度、触屏可玩的打地鼠——地鼠 SVG 卡通造型，冒出/被击中都有动画，60 秒倒计时，双击 HTML 就能玩

分类: ai-development
标签: CodeArts, AI编程, 打地鼠, 网页小游戏, 触屏
难度: 初级
读者: 前端开发者、游戏爱好者、技术写作者

---

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个打地鼠网页小游戏，单个 HTML 文件即可运行……」约 3 分 10 秒后，一个 392 行、约 15 KB 的完整打地鼠就自动生成了：3×3 草地洞、地鼠 SVG 卡通造型、简单/普通/困难三档难度、60 秒倒计时、按难度分别持久化的最高分、Web Audio 音效、击中飘 "+1" 浮分、触屏点击支持，双击 HTML 就能开局。

---

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

---

3. 码道能力一览

这次开发中，码道展示了以下能力：

• 自然语言编程：我说「打地鼠网页小游戏」，码道直接理解成洞口布局 + 地鼠随机冒出 + 点击得分 + 倒计时 + 难度切换 + 最高分持久化六件套方案
• 自主产品设计：自动选择了蓝天绿草渐变背景、地鼠 SVG 卡通造型、冒出/被击中两套动画、游戏结束成绩弹窗等视觉设计
• 工程细节到位：三难度通过冒出间隔/停留时长/双洞并发精确控制、localStorage 按难度分别存最高分、触屏 click + touchstart 双绑定防误缩放
• 自检与收尾：生成后自动在浏览器中打开验证页面可正常运行，并逐条汇报功能清单

---

4. 任务描述

我想要一个打地鼠网页小游戏，具体要求：

• 单个 HTML 文件即可运行，不需要任何构建步骤
• 经典玩法：地鼠从洞里冒出来，点击击中得分，打得越多分越高
• 三种难度：简单/普通/困难，控制地鼠冒出速度，最高分按难度分别保存（localStorage）
• 地鼠有冒出动画和被打中动画，配简单音效
• 绿色草地背景，支持触屏点击
• 生成后自动验证页面可正常打开

开发命令：

# 打开码道 TUI，在输入框中输入需求
codearts

---

5. 开发过程

步骤 1：打开码道 TUI 输入需求

在项目目录启动 codearts，将需求粘贴到输入框（模型为 Build · GLM-5.2）。提交后码道先给出实现方案，随即开始构建：

步骤 2：码道开始生成

码道进入构建流程，开始编写地鼠动画、随机冒出逻辑与计分系统：

步骤 3：码道完成并汇报

约 3 分 10 秒后，码道完成开发，生成 whack-a-mole.html（392 行，约 15 KB），并自动在浏览器中打开验证，逐条汇报功能清单：

从 TUI 的输出可以看到，除了需求里的功能，码道还自己补了 Web Audio API 音效、击中飘 "+1" 浮分、新纪录提示、云朵装饰与响应式适配等细节。

---

6. 代码解析

生成的 whack-a-mole.html 核心逻辑可以分为四块：难度配置、地鼠冒出/击中状态机、随机生成循环、游戏主循环与最高分持久化。

难度配置：三档难度用参数控制手感

var DIFF_CONFIG = {
  easy:   { minInterval: 800, maxInterval: 1300, showTime: 1200, multi: false },
  normal: { minInterval: 500, maxInterval: 900,  showTime: 900,  multi: false },
  hard:   { minInterval: 280, maxInterval: 550,  showTime: 650,  multi: true }
};

三档难度没有写死逻辑分支，而是用一张配置表控制手感：minInterval/maxInterval 决定地鼠冒出的间隔（越短越难），showTime 决定地鼠停留时长（越短越难打中），multi 决定困难模式是否允许同时冒出两只地鼠。切换难度只是换一行配置，后续逻辑完全复用。

地鼠状态机：冒出、击中、缩回三态 + SVG 动画

function showMole(index) {
  var m = activeMoles[index];
  if (!m || m.up || !playing) return;
  m.el.innerHTML = moleSVG;
  m.el.classList.remove("hit");
  m.el.classList.add("up");
  m.up = true;
  soundPop();
  var cfg = DIFF_CONFIG[difficulty];
  clearTimeout(m.timer);
  m.timer = setTimeout(function () { hideMole(index); }, cfg.showTime);
}

function onHit(index) {
  var m = activeMoles[index];
  if (!m || !m.up || !playing) return;
  m.up = false;
  clearTimeout(m.timer);
  m.el.classList.add("hit");
  m.el.innerHTML = hitSVG;
  score++;
  scoreEl.textContent = score;
  soundHit();
  showFloatScore(m.el);
  setTimeout(function () { m.el.classList.remove("up"); m.el.classList.remove("hit"); }, 260);
}

每只地鼠维护 up 状态：冒出时换回正常的地鼠 SVG 并加 up 类（CSS 控制从洞口弹起的位移动画），同时用 setTimeout 计时，超时自动缩回；被击中时立刻换成本地鼠被砸扁的 SVG 并加 hit 类，加分、播音效、飘 "+1" 浮分，260ms 后复位。三态切换全由 CSS 类 + SVG 内联替换完成，干净利落。

随机生成循环：困难模式可双洞并发

function spawnLoop() {
  if (!playing) return;
  var cfg = DIFF_CONFIG[difficulty];
  var count = cfg.multi ? (Math.random() < 0.35 ? 2 : 1) : 1;
  for (var k = 0; k < count; k++) {
    var idx = Math.floor(Math.random() * HOLES);
    showMole(idx);
  }
  var next = rand(cfg.minInterval, cfg.maxInterval);
  spawnId = setTimeout(spawnLoop, next);
}

spawnLoop 是一个自调用的随机定时器：每次生成 1 只（困难模式 35% 概率同时生成 2 只）地鼠，随机选洞冒出，然后用 rand(minInterval, maxInterval) 随机决定下一次冒出的间隔。间隔随机化让地鼠的出现节奏不可预测，玩起来更有挑战。

游戏主循环与最高分持久化

function startGame() {
  ...
  timerId = setInterval(tick, 1000);   // 每秒倒计时
  spawnId = setTimeout(spawnLoop, 400); // 延迟 400ms 开始冒出地鼠
}

function endGame() {
  ...
  var best = getBest();
  var isRecord = score > best;
  if (isRecord) { setBest(score); best = score; }
  ...
  newRecordEl.style.display = isRecord && score > 0 ? "block" : "none";
  overlay.classList.add("show");
}

function loadBest() {
  try { var raw = localStorage.getItem(bestKey); return raw ? JSON.parse(raw) : {}; }
  catch (e) { return {}; }
}

游戏主循环由两个定时器驱动：setInterval(tick, 1000) 每秒扣减倒计时，setTimeout(spawnLoop) 驱动地鼠冒出，endGame 里把两个定时器一并清掉，杜绝「游戏结束后地鼠还在冒」的漏网场景。最高分用 localStorage 按难度分别持久化（key 为 whackAMoleBest_v1，值为各难度分数组成的对象），刷新页面也不丢纪录，破纪录时弹窗会单独亮出"新纪录"提示。

---

7. 运行效果

用浏览器打开 whack-a-mole.html，默认"普通"难度玩了一局：

可以看到：

• 蓝天绿草渐变背景 + 云朵装饰，3×3 草地洞界面清爽
• 顶部实时显示 60 秒倒计时、当前得分与最高分
• 简单/普通/困难三档难度一键切换，困难模式会双洞并发
• 地鼠冒出时播放提示音，击中播放双音效并飘 "+1" 浮分
• 游戏结束弹窗展示成绩/最高分/新纪录，点"再来一局"直接重开
• 手机触屏直接点击地鼠即可游玩，user-scalable=no 防止误缩放

---

8. 能力总结

能力	说明
自然语言理解	「打地鼠网页小游戏」→ 洞口布局/随机冒出/计分/倒计时/难度/最高分完整方案
算法细节	随机间隔冒出循环、困难双洞并发、定时器统一清理防泄漏
输出质量	地鼠 SVG 卡通造型，冒出/被击中双动画，蓝天绿草渐变背景
产品细节	三档难度参数化配置、localStorage 按难度存最高分、Web Audio 音效、触屏双绑定

---

9. 总结

这次实践最大的感受是：码道把打地鼠这种「经典游戏」写出了产品感——参数化难度配置、随机间隔冒出、双洞并发、新纪录提示、Web Audio 音效这些细节一个都没落下。392 行单文件、零依赖、双击即玩，还支持手机触屏操作。如果你也想试试，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz