企业官网建设流程全解析

[一键开通华为云码道 CodeArts 代码智能体](https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwatomgit1&sourcead=dmzntgwatomgithd）

前言

作为一个新手小白，近期借由华为云码道CodeArts AI编程挑战赛，全程使用华为云码道 CodeArts 代码智能体辅助开发开发了一款小游戏《侠客切水果》。
本文完整复盘本次赛题的开发全过程，分享 AI 辅助开发的实操流程、调试技巧与落地心得。

一、应用介绍：说明项目背景、实现功能

1.1 项目背景

"切水果"是经典休闲玩法，但市面版本同质化严重。我想做的不是复刻，而是在经典玩法里放点不一样的东西：

1. 知识收集——斩中金色光球弹出知识点，化学物质如Na/K/Ca/Mg 遇水反应把"娱乐"和"科普"绑在一起；
2. 国风美术——水墨配色、古筝音乐，全是纯代码合成，零版权风险。
3. 主题换肤——望远镜一键切换水果/细胞/分子三套美术

最初我计划做成 3D（Three.js + 第三人称视角），但 CodeArts 在拆解需求时提示：架构 + 代码质量占评审权重 60%，是评分大头，宁可功能少而架构清晰，不可功能多而结构混乱。据此我果断将技术栈从 Three.js 降为 Canvas 2D，保留"自由角度切割 + 全方向飞行"的核心手感，砍掉 3D 视角这一非必要复杂度，把精力集中到架构清晰度上。这个"做减法"的决策是本次开发的第一课，不是所有的想法都必须应该实现。

1.2 实现功能

二、需求拆解，明确计划

由于之前已有Codex、Locus的一点使用经历，我优先明确禁止agent直接生成代码，而是先说明我的思路，经讨论产生初版开发计划，再反复提问、质问、修改，最终由CodeArts将我与其的想法整合成，接着交由AI执行。
感想：

1. AI警告”创意极佳但范围对时间严重超载”，并提供了一个P0核心(必做) / P1加分 / P2锦上添花 ，先保P0闭环的范围分层管理。有别于一下子就把所有细节都实现的新手常见误区，让我更明确了一种框架意识，先立骨架、再填血肉。
2. 交代清楚需求，AI确实会给出一些不错的或让人眼前一亮的建议，但有些并不完全适配自己的项目。我建议先大概了解AI输出的一些自己不清楚的概念（直接在同一对话中问Agent也可以，但本人不大喜欢这种方式，一来理清概念的过程会不断的追问，这会污染原本的开发氛围，导致后续Agent产出偏离原开发计划的东西；二来Agent回答本身会受到了前文影响，无法给出清爽的概念说明；三来问题太多，开发后期有超出上下文的风险）。
3. 模糊地带AI有时会自行填充，需小心。

三、架构设计

零依赖分层，拒绝"面条代码"
CodeArts 建议采用ES Modules 分层架构，零构建工具、零三方依赖：

src/ ├─ main.js 组装与游戏闭环 ├─ config/ 全局配置（难度/得分/主题参数，集中可调） ├─ core/ 事件总线 / 状态机 / 主循环 ├─ render/ 渲染器 / 相机 / 背景 / 侠客图 / 剑 ├─ audio/ Web Audio 音效引擎（合成 + AAC） ├─ input/ 鼠标悬停 + 触摸滑动 ├─ save/ 存档 / 排行榜 / 知识库 ├─ theme/ 主题管理（水果/细胞/分子） ├─ entities/ 飞行物 / 炮弹 / 知识球 / 生成器 ├─ mechanics/ 刀光轨迹 / 碰撞检测 / 计分 / 难度 ├─ effects/ 粒子系统 / 刀光 / 爆裂 / 大炮 / 浮字 ├─ ui/ 界面编排（9 个面板） └─ utils/ 数学工具 / 响应式

共35 个模块，职责单一、依赖单向、无循环引用。分层依赖方向固定为config → core → render/audio/input → entities/mechanics → effects → ui → main。

几个关键设计让代码在 6 轮迭代后依然整洁：

1. 事件驱动（EventBus）——模块间只靠bus.on/emit通信，不直接互相 import 业务逻辑。例如碰撞命中后发flyer:cut，由 main.js 统一处理计分、粒子、音效，职责边界清晰。
2. 配置集中（gameConfig.js）——难度曲线、生成速率、得分规则全部是纯数据，试玩调参改配置即可，不碰逻辑代码。
3. 语义化命名——所有阈值、颜色、尺寸从 config 读取，让 AI 后续改动时能精准命中。

四、核心功能实现（附真实代码片段）

4.1 固定时间步游戏循环

不同刷新率（60Hz / 144Hz）下游戏手感一致，关键是「固定逻辑步长 + 渲染插值」：

// core/GameLoop.js_tick(now){letframeTime=(now-this.last)/1000;this.last=now;if(frameTime>this.maxFrame)frameTime=this.maxFrame;// 防后台切换大跳this.accumulator+=frameTime;letsteps=0;while(this.accumulator>=this.step&&steps<5){// 固定步长 1/60this.update(this.step,1.0);this.accumulator-=this.step;steps++;}constalpha=this.accumulator/this.step;// 渲染插值因子this.render(alpha);requestAnimationFrame(this._tick);}

maxFrame = 0.25上限是为了防止标签页切后台再切回时，frameTime累积巨大导致一帧内物体瞬移、碰撞漏检——真实踩过的坑。

4.2 事件驱动的状态机

6 状态有限自动机，切换时广播state:change，UI 层据此决定渲染哪个面板：

// core/GameState.jsexportconstState={IDLE:'idle',MODE_SELECT:'mode_select',LOADING:'loading',PLAYING:'playing',PAUSED:'paused',GAMEOVER:'gameover',};transition(next){if(next===this.state)return;this.previous=this.state;this.state=next;bus.emit('state:change',next,this.previous);}

4.3 线段 × 圆碰撞检测（切割的手感核心）

配合「悬停切割」输入模型——无需按住鼠标键，鼠标移入游戏区即挥剑，移出/停住/超速阈值即收刀，疲劳感和误触率都大幅降低。

// utils/MathUtils.js —— 点到线段最短距离functiondistPointToSegment(px,py,ax,ay,bx,by){constdx=bx-ax,dy=by-ay;constlenSq=dx*dx+dy*dy;lett=((px-ax)*dx+(py-ay)*dy)/(lenSq||1);t=clamp(t,0,1);constcx=ax+dx*t,cy=ay+dy*t;returnMath.hypot(px-cx,py-cy);}// mechanics/CollisionDetector.jscheck(flyers,segments){for(constfofflyers){if(f.sliced)continue;for(leti=0;i<segments.length;i++){consts=segments[i];if(distPointToSegment(f.x,f.y,s[0],s[1],s[2],s[3])<=f.radius){f.sliced=true;this.hits.push(f);break;}}}for(constfofthis.hits)bus.emit('flyer:cut',f);}

4.4 Web Audio 合成音效：零版权、零音频文件的古风音乐

整首背景音乐 + 全部音效都用 Web Audio API 合成，唯一的音频文件是一段 0.51s 的真实炮声 AAC。切水果音效由三层合成叠加，逼近真实切割：

// audio/AudioEngine.js —— 切水果音效（三层）playCut(){// 1) 汁液"啪"的短促低频爆音（正弦波 170→55Hz）constthump=this.ctx.createOscillator();thump.type='sine';thump.frequency.setValueAtTime(170,t);thump.frequency.exponentialRampToValueAtTime(55,t+0.09);// 2) 中频"唰"的切片噪声（带通 1700Hz，保留水分感）// 3) 高频"咔"的果皮脆响（方波 3400→700Hz）}

提效到底提在哪：一组实测数据

提效最明显在三点：① 一轮对话出可玩原型（骨架）；② 抠图/裁音/翻转这种体力活 AI 直接操作文件系统；③ 每轮改完node --check+ 冒烟测试自动挡回归。

五、调试与迭代

6 轮迭代，加上以往经验，有些点值得分享的踩坑与解法：

1. 不知是模型没用对，还是skill未选对，CodeArts生成的游戏首页的侠客剪影、炮弹发射的声音实在不忍直视。暂时推荐图片、音频自行解决。
2. 原计划加载页面的左右炮台样式不一样，我翻转好了发给CodeArts，但其竟然又翻转了一遍，导致炮台方向错误，差点没发现。建议demo调试时先通玩一遍，再仔细查看每一个要求改动的地方（有时下达指令后，AI不一定执行）。
3. 强烈建议将Agent的工作区与Git版本控制的代码仓库进行目录级隔离，因为有时AI生成的文件中只有部分是我们想要的，但往往希望保留与希望删去的部分混在同一文件修改中，如果无法理解代码，就不能实现精准分割。并且，Agent会误操作删去有用部分，其生成的临时文件、日志、中间产物还可能污染版本库。
4. 建议要求agent自检无误后再输出。

六、对于 CodeArts 的改进建议

1. 左侧边栏（我也可以通过Ctrl+B来打开/关闭）层级过碎，空间浪费
   现状： 目前左侧分为任务、工作空间、定时任务、扩展等多个独立且高度受限的区块。这种设计导致核心的“任务列表”和“项目列表”可视区域极小。
   问题： 当项目/任务数量增加时，用户需要在几个局促的“小格子”里来回滚动查找，效率低下。
   优化方案： 强烈建议参考Kimi的侧边栏逻辑。将左侧整合为一个全局统一、可无限向下滑动的列表。将“定时任务”、“扩展”等低频功能折叠收纳，把核心的垂直空间全部让给任务列表和项目结构。
2. 算是目前很多 AI 效率工具的通病，主视区中AI 生成的反馈、代码、执行计划被限制在中间极矮的区域内，非常不便于查看。就算收起左侧边栏，总体高度也让用户体验不适。
   
3. 报错时，不应该出现"任务完成"，并且希望agent能报错的同时自主识别错误，并提供解决方案。
4. CodeArts貌似无法持续执行某步骤，如我在最开始提了“每一次修改代码时都要同步生成修改文档”这一要求，但其并没有完美执行。据CodeArts自述，“想让我在项目里正式维护「长期记忆」，可以加一个 memory 文件”，感兴趣的读者可以去尝试一下。
   
5. 虽然右侧有如上图的功能，但项目进行到后期，往往难以向回找期望记录，建议在该栏展开后的上方设置一个搜索框，使用关键词来进行对话历史的快速查阅。
   
6. 目前有这样的限时福利，但每日使用达到上限之后，任务就自动停止，手动换完模型甚至会出现一些bug，十分影响开发进度。建议设置多个模型槽，当A模型额度用完之后自动更换成B模型，以防任务中断。

七、华为云码道 Agent 使用截图

1. 需求拆解对话
   
2. 代码生成过程
   
   

八、项目运行效果截图

欢迎界面（侠客 + 三按钮）

选择模式界面

加载界面（大炮轰击 + 进度条）

游戏画面（水果飞溅 + 刀光 + HUD）

知识点弹窗


排行榜 Top 10（不完全示例）

设置面板

九、AtomGit 项目仓库

• 仓库地址：https://atomgit.com/gcw_SUw3TKIl/cut
• 访问方式：公开托管
• 开源协议：MIT License
• 可运行源码：克隆后双击启动游戏.bat或浏览器打开index.html

总结

华为云码道 CodeArts 代码智能体值得一试。