《从一句话到公网上线：我用 CodeArts Agent 20 分钟完成 2048 小游戏的生成与华为云 ECS 部署》
【摘要】 # 从一句话到公网上线：我用 CodeArts Agent 20 分钟完成 2048 小游戏的生成与华为云 ECS 部署## 前言最近参加了华为云"开放能力闯关挑战"活动，体验了一把 CodeArts Agent（码道代码智能体）的完整工作流：从一句话需求，到生成单文件 HTML 小游戏，再到按量付费 ECS 云上部署、公网访问验证、活动提交，全程约 20 分钟。本文完整复盘这条链路，希望给...
# 从一句话到公网上线：我用 CodeArts Agent 20 分钟完成 2048 小游戏的生成与华为云 ECS 部署
## 前言
最近参加了华为云"开放能力闯关挑战"活动，体验了一把 CodeArts Agent（码道代码智能体）的完整工作流：从一句话需求，到生成单文件 HTML 小游戏，再到按量付费 ECS 云上部署、公网访问验证、活动提交，全程约 20 分钟。本文完整复盘这条链路，希望给想体验 AI 辅助开发 + 华为云部署的开发者一个参考。
## 需求与产物
我给 Agent 的原始需求只有一句话：
> 生成一个 2048 小游戏，纯单文件 HTML（CSS/JS 全部内联，不依赖 npm、Vite 或任何构建工具），4x4 网格、方向键操作、合并得分、游戏结束判定，适配 PC 和移动端。
最终产物是一个 9.9KB 的 `index.html`：
- CSS/JS 全部内联，零外部依赖，零构建工具
- 4x4 网格经典玩法，相同数字合并得分
- 三套操作：方向键、WASD、移动端触摸滑动
- 撤销一步、最高分 localStorage 持久化
- 胜利（达成 2048）与游戏结束双判定
- 响应式布局，PC 与手机自适应
## 单文件实现的技术要点
### 数据模型
游戏状态就是一个 4x4 二维数组：
```javascript
board = [
[2, 0, 0, 0],
[0, 4, 0, 2],
...
];
```
### 四方向移动的统一算法
不写四份方向逻辑，而是用"旋转-滑动-旋转"的技巧：把任意方向的移动都转换成"向左滑动"处理：
```javascript
function move(dir) {
let b = clone(board);
let rotations = { left: 0, up: 1, right: 2, down: 3 }[dir];
for (let i = 0; i < rotations; i++) b = rotateCW(b); // 旋转到统一方向
for (let r = 0; r < 4; r++) b[r] = slide(b[r]).row; // 统一向左滑
for (let i = 0; i < rotations; i++) b = rotateCCW(b); // 旋转回去
}
```
滑动合并时注意"一次移动中每行每对只合并一次"，用过滤零值后相邻比较实现。
### 渲染层
瓷砖用绝对定位 + `transform: translate()` 定位到网格坐标，新块和合并块分别加 `pop` / `merge` CSS 动画。相比重排 DOM，性能和视觉效果都更好。
### 移动端适配
触摸事件监听 `touchstart` / `touchend`，计算起止点位移的横纵分量绝对值，取大的方向判定滑动方向（阈值 24px 防误触）。整个棋盘容器 `touch-action: none` 阻止页面滚动。
## 华为云 ECS 部署：cloud-init 一次性完成全部配置
这是本次体验中我认为最值得分享的部分。Agent 创建 ECS 时通过 cloud-init `user_data` 传递了一段 shell 脚本，机器开机后自动完成全部配置，无需人工 SSH 登录：
```bash
#!/bin/bash
echo "root:xxxx" | chpasswd # 设置 root 密码
dnf install -y nginx # 安装 Nginx
mkdir -p /usr/share/nginx/html/hc-activity
echo "<base64>" | base64 -d > /usr/share/nginx/html/hc-activity/index.html
systemctl enable --now nginx # 启动并设开机自启
```
index.html 以 base64 内嵌在 user_data 里，ECS 创建成功即等于部署完成。
### 资源清单
| 资源 | 规格 | 说明 |
|---|---|---|
| ECS | s6.medium.2（1核2G）| cn-north-4a，按量付费 |
| 镜像 | Rocky Linux 9.8 | dnf 系，与 cloud-init 脚本匹配 |
| 磁盘 | GPSSD 40G | SATA 常售罄，GPSSD 更稳 |
| EIP | 5_bgp，5M 按流量 | 创建时随 ECS 一并绑定 |
| 安全组 | 仅 HTTP 80 放通 0.0.0.0/0 | SSH 22 只放通调试出口 IP |
### 部署参数的传递技巧
ECS CreateServers 的参数较多，尤其 user_data 的 base64 长达 18KB。直接命令行传参容易出错，KooCLI 提供了 `--cli-jsonInput` 方式，把参数写进 JSON 文件：
```bash
hcloud ECS CreateServers --cli-region=cn-north-4 --cli-jsonInput=ecs_create.json
```
注意 JSON 结构要按参数在 request 中的位置组织（`path` / `body` 分层），这与 API Explorer 页面的结构一致。
### 验证
ECS ACTIVE 后轮询 cloud-init 完成标志（HTTP 返回 200 即 nginx 已就绪）：
```bash
$ curl -sI http://{EIP}/hc-activity/index.html
HTTP/1.1 200 OK
Server: nginx/1.20.1
Content-Length: 9955
```
从创建到公网可访问，全程约 4 分钟（含系统安装和 dnf 装 nginx 的时间）。
## 资源清理
按量付费资源用完记得删，否则会持续计费。删除 ECS 时注意两个参数，避免资源泄漏：
```bash
hcloud ECS DeleteServers \
--servers.1.id=<id> \
--delete_publicip=true \
--delete_volume=true
```
`delete_publicip` 和 `delete_volume` 默认都是 false——不显式设置 true 的话，EIP 和磁盘会残留下来继续计费。
## 体验小结
这次完整链路体验下来，几个印象深刻的点：
1. **单文件 HTML 是 AI 生成代码的最佳载体之一**：无依赖、无构建、可直接验证，生成即可用
2. **cloud-init 让"开机即部署"成为现实**：基础设施代码化，从装 nginx 到上线全自动
3. **按量付费 + 用完即删**：整个验证过程花费不到 1 元，适合做临时验证和活动任务
4. **CLI 优先的工作流**：从创建到删除全程命令行，可复现、可自动化
作品已归档在 GitCode：https://gitcode.com/Code-Arts/2048-game
## 参考
- 华为云 CodeArts Agent（码道代码智能体）
- KooCLI 命令行工具：https://support.huaweicloud.com/hcli/
- ECS cloud-init 用户数据：https://support.huaweicloud.com/ecs/
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）