用码道 AI 编程助手开发打地鼠网页小游戏

分类: 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:$PATHexport CODEARTS_CLI_AK=你的AKexport CODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

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

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

3. 码道能力一览

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

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

4. 任务描述

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

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

开发命令：

# 打开码道 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，默认"普通"难度玩了一局：

可以看到：

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

8. 能力总结

9. 总结

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