用 CodeArts Agent 打造深色玻璃态 2048：从玩法到视觉重制

背景

1024 程序员节期间，华为云开放能力线上闯关挑战给出了一个有意思的命题：打造你的专属 2048 游戏。闯关路线分为沙箱部署与 ECS 持久化部署两档，我决定借这次任务，完整走一遍「AI 辅助开发 → 视觉重制 → 云端部署 → 作品投稿」的全流程。

第一版：先把玩法立住

在 CodeArts Agent 的对话里描述需求：4×4 棋盘、方向键操作、相同数字合并、2048 过关。智能体很快给出了单文件 HTML 实现——渲染层用 CSS Grid 加绝对定位方块，逻辑层是一个 4×4 二维数组状态机，负责移动合并与死局判定。这一版能玩，但界面还是默认样式。

第二版：一键美化触发风格重制

真正的转折点是预览页签工具栏里的「一键美化」按钮。点击后智能体收到「用 frontend-design skill 优化当前页面」指令，加载 Linear Aesthetic 主题，把界面重写为深色玻璃态：纯黑底色搭配 indigo/purple 发光方块，磨砂玻璃层级与微光 shimmer。文件从 10 KB 涨到 16 KB，结构保持完整。

我选择「进一步打磨细节」，随后又加入了三层表现：5 个 canvas 粒子层营造空间纵深、两个 WebAudio 实例用代码合成合并音与里程碑音效、以及合成 128/256/512/1024/2048 时触发的全屏里程碑动效。最终成品 605 行、28.5 KB，仍然是零依赖的单文件。

部署：沙箱与 ECS 两连跳

第一关把作品部署进 CodeArts 沙箱拿到即开即玩的预览地址；第二关为了持久化，把应用部署到华为云 ECS，配好安全组与 Nginx，让链接长期有效。两关的积分先后到账，也验证了「临时验证」到「长期托管」的差别。

投稿：从本地仓库到展览馆

最后一步是把作品投到开发者作品展览馆的「闯关活动」。流程比想象中规范：作品目录需要是一个 git 仓库，于是补了 git init、推到 GitCode，再用平台 Skill 生成封面图、架构图与详情包，一次发布成功。

小结

回看这条链路，AI 负责的是重复劳动——样板代码、样式重构、配图与文案；人负责的是判断——什么时候停手、哪版视觉是对的、部署架构怎么选。工具把「做出来」的成本打到接近零，「想清楚要什么」就成了最贵的能力。这次 2048 重制，算是把这个判断练习了一遍。