一段需求码道自动写出 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. 启动 TUIcodeartsAK/SK 获取https://codearts.huaweicloud.com/portal/settings/cli-auth还没有码道立即开通体验https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz安装完成后在命令行或 PowerShell 中输入codearts回车即可打开码道 TUI。把开发需求贴进输入框码道会自动分析并生成完整代码。3. 码道能力一览这次开发中码道展示了以下能力自然语言编程我说「打地鼠网页小游戏」码道直接理解成洞口布局 地鼠随机冒出 点击得分 倒计时 难度切换 最高分持久化六件套方案自主产品设计自动选择了蓝天绿草渐变背景、地鼠 SVG 卡通造型、冒出/被击中两套动画、游戏结束成绩弹窗等视觉设计工程细节到位三难度通过冒出间隔/停留时长/双洞并发精确控制、localStorage 按难度分别存最高分、触屏 click touchstart 双绑定防误缩放自检与收尾生成后自动在浏览器中打开验证页面可正常运行并逐条汇报功能清单4. 任务描述我想要一个打地鼠网页小游戏具体要求单个 HTML 文件即可运行不需要任何构建步骤经典玩法地鼠从洞里冒出来点击击中得分打得越多分越高三种难度简单/普通/困难控制地鼠冒出速度最高分按难度分别保存localStorage地鼠有冒出动画和被打中动画配简单音效绿色草地背景支持触屏点击生成后自动验证页面可正常打开开发命令# 打开码道 TUI在输入框中输入需求codearts5. 开发过程步骤 1打开码道 TUI 输入需求在项目目录启动codearts将需求粘贴到输入框模型为 Build · GLM-5.2。提交后码道先给出实现方案随即开始构建步骤 2码道开始生成码道进入构建流程开始编写地鼠动画、随机冒出逻辑与计分系统步骤 3码道完成并汇报约 3 分 10 秒后码道完成开发生成whack-a-mole.html392 行约 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){varmactiveMoles[index];if(!m||m.up||!playing)return;m.el.innerHTMLmoleSVG;m.el.classList.remove(hit);m.el.classList.add(up);m.uptrue;soundPop();varcfgDIFF_CONFIG[difficulty];clearTimeout(m.timer);m.timersetTimeout(function(){hideMole(index);},cfg.showTime);}functiononHit(index){varmactiveMoles[index];if(!m||!m.up||!playing)return;m.upfalse;clearTimeout(m.timer);m.el.classList.add(hit);m.el.innerHTMLhitSVG;score;scoreEl.textContentscore;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;varcfgDIFF_CONFIG[difficulty];varcountcfg.multi?(Math.random()0.35?2:1):1;for(vark0;kcount;k){varidxMath.floor(Math.random()*HOLES);showMole(idx);}varnextrand(cfg.minInterval,cfg.maxInterval);spawnIdsetTimeout(spawnLoop,next);}spawnLoop是一个自调用的随机定时器每次生成 1 只困难模式 35% 概率同时生成 2 只地鼠随机选洞冒出然后用rand(minInterval, maxInterval)随机决定下一次冒出的间隔。间隔随机化让地鼠的出现节奏不可预测玩起来更有挑战。游戏主循环与最高分持久化functionstartGame(){...timerIdsetInterval(tick,1000);// 每秒倒计时spawnIdsetTimeout(spawnLoop,400);// 延迟 400ms 开始冒出地鼠}functionendGame(){...varbestgetBest();varisRecordscorebest;if(isRecord){setBest(score);bestscore;}...newRecordEl.style.displayisRecordscore0?block:none;overlay.classList.add(show);}functionloadBest(){try{varrawlocalStorage.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-scalableno防止误缩放8. 能力总结能力说明自然语言理解「打地鼠网页小游戏」→ 洞口布局/随机冒出/计分/倒计时/难度/最高分完整方案算法细节随机间隔冒出循环、困难双洞并发、定时器统一清理防泄漏输出质量地鼠 SVG 卡通造型冒出/被击中双动画蓝天绿草渐变背景产品细节三档难度参数化配置、localStorage 按难度存最高分、Web Audio 音效、触屏双绑定9. 总结这次实践最大的感受是码道把打地鼠这种「经典游戏」写出了产品感——参数化难度配置、随机间隔冒出、双洞并发、新纪录提示、Web Audio 音效这些细节一个都没落下。392 行单文件、零依赖、双击即玩还支持手机触屏操作。如果你也想试试可以免费开通体验版https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz