从零到一：用华为云CodeArts开发并发布一个贪吃蛇游戏

前言

本文记录了在华为云开发者空间中，使用
CodeArts（码道）代码智能体从零开发一个贪吃蛇游戏的完整过程。涵盖需求分析、代码生成、预览调试、GitCode
代码托管、作品陈列馆发布等全链路环节，适合对云上开发感兴趣的初学者参考。

在线体验地址：贪吃蛇游戏在线预览

源码仓库：GitCode - Eddygit/snake-game

作品陈列馆：华为云开发者作品展览馆

一、开发环境准备

1.1 华为云开发者空间

华为云为每位开发者提供了一套免费的云开发环境，零配置秒级启动。本次开发使用的是
CodeArts 沙箱环境，内置完整的开发工具链：

• 沙箱路径：/root/job-envs/sandboxes/codearts-1786865683/

• 项目目录：snake-game/

• 预览端口：8080（自动暴露为公网可访问的 HTTPS URL）

1.2 工具链一览

二、开发过程

2.1 需求分析与 Prompt 设计

开发的第一步不是写代码，而是想清楚要做什么。我向 CodeArts 发送了如下 prompt：

帮我创建一个贪吃蛇游戏，要求：

使用 HTML5 Canvas 实现，单文件 index.html

24×24 网格，深色主题

蛇身渐变色，食物带光晕效果

键盘方向键控制，空格暂停，R 重置

计分板 + 最高分（localStorage 持久化）

逐步加速机制

要点：prompt
越具体，生成质量越高。明确技术栈、视觉风格、交互方式、数据持久化方式，能大幅减少后续修改轮次。

2.2 代码生成

通过 acpx CLI 工具建立 ACP 会话，将 prompt 发送给 CodeArts：

# 建立 ACP 会话
acpx session --sandbox codearts-1786865683

# 发送生成 prompt
acpx prompt --session ses_xxx "帮我创建一个贪吃蛇游戏..."

CodeArts 在沙箱内自动完成了以下工作：

1. 创建 snake-game/index.html 文件（542 行，单文件包含 HTML + CSS + JS）

2. 启动预览服务器（端口 8080）

3. 返回预览 URL

生成过程中遇到的一个坑：acpx 初始化时产生了一个非致命的 JSON 解析错误 ——
“Failed to parse JSON message: Performing one time database
migration…”。这是一次性数据库迁移消息，不影响后续调用，后续 acpx
命令均正常执行。

2.3 预览与验证

CodeArts 自动启动了预览服务器，生成的 URL 格式为：

https://8080-e8c5836d96844cba9ebd4060d1daf45e.workspace.developer.huaweicloud.cn/

通过 curl 验证预览服务正常返回 HTTP 200，确认游戏页面可访问。

2.4 截图与封面制作

使用 Playwright 对游戏进行截图，然后合成 PPT 风格的封面图：

// 封面设计要点：
// - 1280×720 分辨率（PPT 标准）
// - 深色渐变背景（与游戏主题一致）
// - 游戏截图居中展示
// - 标题 + 副标题 + 技术标签

封面图生成后，还需要通过字形校验（verify-glyphs.py），确保中文字符正确渲染，没有乱码或方块字。

三、核心技术要点

3.1 Canvas 渲染架构

游戏采用 Canvas 2D API 进行渲染，核心渲染循环如下：

键盘输入 → 游戏逻辑更新 → Canvas 清屏 → 重绘蛇身/食物/网格 → requestAnimationFrame → 循环

关键设计：

• 使用 requestAnimationFrame 而非
  setInterval，保证渲染与浏览器刷新率同步，画面更流畅

• 每帧清屏后重绘，避免画面残留

• 蛇身使用渐变色填充，从头到尾颜色渐变，视觉效果出色

3.2 游戏逻辑核心

碰撞检测

// 撞墙检测
if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {
    gameOver = true;
}

// 撞自身检测
for (let i = 1; i < snake.length; i++) {
    if (snake[i].x === head.x && snake[i].y === head.y) {
        gameOver = true;
    }
}

防止 180° 反向移动

// 不能直接掉头
if (newDir === OPPOSITE[currentDir]) return;

这是一个容易被忽略的细节。如果不做这个判断，玩家在快速操作时可能直接掉头导致蛇撞自身游戏结束，体验很差。

3.3 状态管理与持久化

// 最高分持久化
const HIGH_SCORE_KEY = 'snakeGameHighScore';
let highScore = parseInt(localStorage.getItem(HIGH_SCORE_KEY)) || 0;

// 更新最高分
if (score > highScore) {
    highScore = score;
    localStorage.setItem(HIGH_SCORE_KEY, highScore.toString());
}

使用 localStorage 存储最高分，关闭浏览器后依然保留。这是 Web
游戏的常见做法，简单有效。

3.4 逐步加速机制

随着分数增长，游戏速度逐渐加快，难度递增：

// 速度 = 基础速度 - 分数 * 加速因子（有下限）
const speed = Math.max(MIN_SPEED, BASE_SPEED - score * SPEED_FACTOR);

这给游戏增加了挑战性，避免后期过于简单。

四、代码托管与版本管理

4.1 GitCode 仓库创建

使用 PAT（Personal Access Token）通过 GitCode API v5 创建仓库：

curl -X POST "https://gitcode.com/api/v5/user/repos" \
  -H "private-token: $PAT" \
  -d '{"name":"snake-game","description":"贪吃蛇游戏 - Canvas实现","auto_init":true}'

注意：OAuth token 不能用于 git push 或仓库创建，必须使用 PAT。PAT
管理地址：https://gitcode.com/-/user/profile/personal_access_tokens

4.2 代码推送

# 设置远程仓库（带认证）
git remote set-url origin "https://Eddygit:${PAT}@gitcode.com/Eddygit/snake-game.git"

# 由于 auto_init=true 创建了初始 commit，需要先 pull 合并
git pull origin main --allow-unrelated-histories
git add -A
git commit -m "feat: 贪吃蛇游戏 - Canvas实现"
git push -u origin main

踩坑记录：如果仓库创建时设置了 auto_init=true，远程已有一个初始
commit，直接 push 会失败。需要先 pull --allow-unrelated-histories 合并后再
push。

五、发布到作品陈列馆

5.1 发布流程

使用 publish-work-to-gallery skill
将作品发布到华为云开发者作品展览馆，完整流程如下：

生成作品 → GitCode登录 → 创建仓库 → 推送代码 → 生成封面 → 生成详情包 → 门禁复核 → 发布 → 领取积分

5.2 关键步骤说明

封面图生成

封面图需要满足以下要求：

• 分辨率 1280×720

• 通过字形校验（无乱码）

• 包含作品截图和标题

门禁复核

发布前需要通过门禁检查（check-gates.mjs），包括：

• ✅ 封面图片存在且大小合理

• ✅ 详情包存在且大小合理

• ⚠️ 截图标记文件（宽松模式下仅警告）

发布参数

{
  "domainID": "555f940562974279bd0dccee20c002c3",
  "trainingCampId": "ef23fbc1-3cb7-40fc-a1cc-1458406086f5",
  "workName": "贪吃蛇游戏",
  "introduction": "基于Canvas的贪吃蛇游戏...",
  "gitUrl": "https://gitcode.com/Eddygit/snake-game.git",
  "gitBranch": "main",
  "envUrl": "https://hqoti6e5-8080.cn-north-4-bridge.myhuaweicloud.com"
}

5.3 发布结果

六、开发心得与总结

6.1 AI 辅助开发的体会

使用 CodeArts 代码智能体开发，最大的感受是prompt
质量决定代码质量。一个结构化的 prompt 应该包含：

1. 技术栈：明确使用什么技术（HTML5 Canvas + JavaScript）

2. 视觉风格：深色主题、渐变色、光晕效果

3. 交互方式：键盘控制、暂停、重置

4. 功能需求：计分板、最高分、加速机制

5. 约束条件：单文件实现

6.2 全链路开发的优势

在华为云开发者空间中，从代码编写到预览、从代码托管到作品发布，全链路在云端完成，无需本地安装任何工具。这对初学者非常友好：

• 零配置：沙箱环境预装了所有必要工具

• 即时预览：代码生成后自动启动预览服务器

• 一键发布：通过 skill 自动化发布流程

• 积分激励：发布作品可获得成长积分

6.3 技术选型思考

为什么选择单文件 HTML 而非框架？

• 零依赖：不需要 npm install，打开即用

• 易分享：一个文件就是完整应用

• 适合演示：对于小游戏这类简单应用，框架反而增加复杂度

• 学习友好：初学者能在一个文件中看到全部逻辑

当然，如果是复杂应用，还是建议使用框架进行模块化管理。

七、延伸阅读

• 华为云开发者空间 - 免费云开发环境

• CodeArts 码道 - 代码智能体

• GitCode - 华为云代码托管平台

• 华为云 Skills 库 - Agent 技能市场

本文作者：Eddygit 发表平台：华为云开发者社区
作品链接：贪吃蛇游戏 源码链接：GitCode