从零到一：用华为云码道开发像素贪吃蛇并发布到作品陈列馆

标题：从零到一：用华为云码道开发像素贪吃蛇并发布到作品陈列馆

正文：

前言

最近在华为云开发者平台上体验了一把"从想法到上线"的全流程：用 CodeArts（码道） 的代码智能体写了一个像素风贪吃蛇小游戏，然后通过 作品陈列馆 发布展示。整个过程不到半小时，本文记录一下关键步骤和踩坑经验，希望能帮到同样想快速实践的开发者。

一、项目简介

像素贪吃蛇 是一个极简版贪吃蛇游戏：

• 技术栈：纯单文件 HTML，内嵌 CSS + JavaScript，零依赖
• 渲染方式：Canvas 2D，20×20 网格
• 核心玩法：方向键控制蛇移动，吃食物变长，撞墙或撞自己结束
• 代码量：约 166 行

没有用任何框架，没有 build 步骤，浏览器打开就能玩。刻意保持极简，是为了把重点放在"开发 → 发布"的流程体验上。

二、开发：CodeArts 代码智能体

2.1 什么是 CodeArts ACP

CodeArts 是华为云的代码智能体平台，ACP 是其中的沙箱编码服务。简单说，你用自然语言描述需求，它在沙箱里帮你写代码、跑起来、还能截图验收。

2.2 生成游戏

整个生成过程就一句话：

“帮我创建一个最简单的像素贪吃蛇游戏”

CodeArts 在沙箱里生成了 index.html，自动启动了 HTTP 服务（端口 8080），游戏直接就能跑。

关键点：

• 沙箱环境：CodeArts 会在沙箱里装好运行环境，不需要本地配 Node.js 或 Python
• 即时预览：生成完代码自动起服务，curl localhost:8080 就能拿到页面
• 单文件交付：对于这种小项目，一个 HTML 文件就够了，不用搞工程化

2.3 代码结构

核心逻辑很直白：

// 20×20 网格
const GRID_SIZE = 20;
let snake = [{x: 10, y: 10}];  // 蛇身坐标数组
let food = {x: 5, y: 5};        // 食物坐标
let direction = 'right';         // 当前方向

// 游戏循环：每 150ms 更新一次
function gameLoop() {
    update();   // 移动蛇、检测碰撞
    draw();     // Canvas 重绘
}

Canvas 渲染就是把蛇身和食物画成彩色方块，碰撞检测就是坐标比对。没有花哨的东西，但该有的都有：得分、游戏结束、重新开始。

三、准备发布：Git 仓库 + 公网访问

作品陈列馆要求提交的项目有 Git 仓库地址和可访问的在线演示 URL，所以需要两步准备。

3.1 推送到 GitCode

把沙箱里的代码拿到宿主机，初始化 Git 仓库并推送到 GitCode：

git init
git remote add origin https://gitcode.com/<user>/snake-game.git
git add . && git commit -m "feat: pixel snake game"
git push origin main

GitCode 是华为云的代码托管平台，和 GitHub 用法类似。发布作品时需要 GitCode OAuth 授权，扫码登录即可。

3.2 用 DevBridge 暴露公网 URL

沙箱里的 HTTP 服务跑在 localhost:8080，外面访问不到。DevBridge 是华为云的开发者隧道服务，能把本地端口暴露成公网 HTTPS URL：

本地 localhost:8080 → https://xxxxx-8080.devbridge-s2.hwtunnel.com

创建隧道只需一个 API 调用，几秒钟就拿到公网地址。这个 URL 会作为作品的在线演示链接提交到陈列馆。

四、发布到作品陈列馆

4.1 什么是作品陈列馆

华为云作品陈列馆（Gallery）是面向开发者的作品展示平台，提交的作品会展示在 gallery.developer.huaweicloud.com 上，其他开发者可以浏览、体验。

4.2 发布流程

整个发布流程有 8 步：

4.3 封面图生成

封面图是用 Playwright（无头浏览器）对游戏页面截图生成的：

# 1280×720 截图，16:9 比例
page.set_viewport_size({"width": 1280, "height": 720})
page.goto("https://xxxxx-8080.devbridge-s2.hwtunnel.com")
page.screenshot(path="cover.png")

陈列馆要求封面图是 16:9 比例，Playwright 可以精确控制视口大小来满足这个要求。

4.4 最终效果

发布成功后，作品页面：

https://gallery.developer.huaweicloud.com/gallery/00635954d6800000

页面展示了游戏封面、简介、Git 仓库链接和在线演示按钮。其他开发者点进去就能直接玩。

五、总结

做了什么

1. 用 CodeArts 代码智能体 一句话生成贪吃蛇游戏
2. 推送到 GitCode 仓库
3. 用 DevBridge 隧道暴露公网访问
4. 发布到华为云作品陈列馆

一些体会

• CodeArts 适合快速原型：对于这种小项目，自然语言描述需求 → 自动生成代码 → 即时预览，效率很高。不需要本地搭环境，沙箱里一条龙。
• DevBridge 很方便：以前要暴露本地服务得用 ngrok 之类的第三方工具，DevBridge 是华为云原生的，和平台集成更好。
• 作品陈列馆的流程偏长：8 步发布流程对新手来说有点多，但每一步都有引导，跟着走不会迷路。
• 单文件项目的优势：对于展示类作品，单文件 HTML 部署最简单，没有构建依赖，打开就能跑。

代码

完整代码已开源在 GitCode：

https://gitcode.com/2301_81769094/snake-game.git

欢迎 star 🌟

提交入口：打开 https://bbs.huaweicloud.com/blogs/article ，登录后把标题和正文粘贴进去即可。博客编辑器支持 Markdown 格式，代码块和表格都能直接渲染。