企业官网建设流程全解析

一段需求，码道自动写出 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-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"# 2. 配置环境变量exportPATH=~/.codeartsdoer/installers:$PATHexportCODEARTS_CLI_AK=你的AKexportCODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

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核心逻辑可以分为四块：难度配置、地鼠冒出/击中状态机、随机生成循环、游戏主循环与最高分持久化。

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

varDIFF_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 动画

functionshowMole(index){varm=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();varcfg=DIFF_CONFIG[difficulty];clearTimeout(m.timer);m.timer=setTimeout(function(){hideMole(index);},cfg.showTime);}functiononHit(index){varm=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 内联替换完成，干净利落。

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

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

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

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

functionstartGame(){...timerId=setInterval(tick,1000);// 每秒倒计时spawnId=setTimeout(spawnLoop,400);// 延迟 400ms 开始冒出地鼠}functionendGame(){...varbest=getBest();varisRecord=score>best;if(isRecord){setBest(score);best=score;}...newRecordEl.style.display=isRecord&&score>0?"block":"none";overlay.classList.add("show");}functionloadBest(){try{varraw=localStorage.getItem(bestKey);returnraw?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. 能力总结

9. 总结

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