从零开发 2048 游戏并发布到华为云作品陈列馆

# 从零到一：用纯前端实现 2048 游戏并发布到华为云作品陈列馆

> 本文分享如何用单个 HTML 文件实现经典 2048 小游戏，并通过华为云 ECS 部署、DevBridge 隧道预览、最终发布到华为云作品陈列馆的全流程实践。

---

## 一、项目背景

2048 是一款简单却令人上瘾的数字合并游戏。规则很 straightforward：在 4×4 的棋盘上，通过滑动操作让相同数字的方块合并，最终目标是拼出 2048。

这次实践的目标是：

- 用**纯前端技术**（无框架、无构建工具）实现完整游戏体验
- 部署到**华为云 ECS**，通过公网 IP 访问
- 使用 **DevBridge 开发隧道**进行开发预览
- 发布到**华为云作品陈列馆**，参与高校布道活动

## 二、游戏实现：单文件搞定一切

整个游戏只用了一个 `index.html` 文件，包含 HTML5 结构、CSS3 样式和 Vanilla JavaScript 逻辑。没有 React、没有 Vue、没有 webpack，真正的零依赖。

### 2.1 核心架构

游戏的核心逻辑围绕一个 4×4 的二维数组展开：

| 变量 | 说明 |
|------|------|
| `board` | 存储当前棋盘状态，每个格子为 0（空）或 2 的幂次方 |
| `score` | 当前得分，每次合并累加 |
| `best` | 历史最高分，通过 `localStorage` 持久化 |
| `gameOver` | 游戏结束标志 |

### 2.2 合并算法

合并是 2048 的灵魂。以向左滑动为例：

1. 将每行的非零元素向左压缩
2. 从左到右扫描，相邻相同数字合并（数值翻倍，计入得分）
3. 再次压缩，消除合并产生的空隙

其他三个方向通过矩阵旋转复用同一套逻辑。

### 2.3 多端输入支持

- **桌面端**：监听 `keydown` 事件，支持方向键和 WASD
- **移动端**：监听 `touchstart` / `touchend`，计算滑动方向，通过 `touch-action: none` 禁用浏览器默认手势干扰

### 2.4 响应式设计

棋盘尺寸使用 CSS 函数自适应：

```css
/* 棋盘宽高：小屏占视口 92%，大屏不超过 420px */
.board { width: min(92vw, 420px); height: min(92vw, 420px); }

/* 标题字号：在 36px 和 52px 之间随视口宽度变化 */
.title { font-size: clamp(36px, 8vw, 52px); }
```

`viewport` 元素锁定缩放（`user-scalable=no`），确保移动端体验流畅。

### 2.5 动画与性能

方块滑动使用 CSS `transition` + `transform` 实现平滑动画，`will-change: transform` 提示浏览器提前优化合成层。比起每帧重绘 DOM，这种方式性能更好，动画更流畅。

## 三、华为云 ECS 部署

### 3.1 服务器准备

选用华为云 ECS（Rocky Linux 9.8）作为部署服务器，配置如下：

| 配置项 | 值 |
|--------|-----|
| 实例规格 | s6.large.2（2 vCPU / 2GB 内存） |
| 操作系统 | Rocky Linux 9.8 |
| 网络 | VPC + 子网 + 弹性公网 IP |
| 安全组 | 开放 80 端口（HTTP） |

### 3.2 Nginx 配置

安装 Nginx 并配置静态文件服务：

```nginx
server {
    listen 80;
    server_name _;
    root /var/www/2048;
    location / {
        try_files $uri $uri/ =404;
    }
}
```

将 `index.html` 上传至 `/var/www/2048/` 目录，启动 Nginx 即可通过公网 IP 访问游戏。

### 3.3 部署验证

```bash
curl -I http://<ECS公网IP>/
# HTTP/1.1 200 OK
# Content-Type: text/html
# Content-Length: 7839
```

## 四、DevBridge 开发隧道

在开发阶段，我使用了华为云 DevBridge 开发隧道来暴露本地服务，方便在不同设备上预览和调试。

### 4.1 什么是 DevBridge

DevBridge 是华为云提供的开发隧道服务，可以将本地开发服务通过华为云中继基础设施安全地暴露到公网，无需在本地开放公网入站端口。

### 4.2 开隧道流程

通过 DevBridge WebUI REST API（沙箱内端口 13000）完成以下操作：

1. **创建隧道**：指定名称、描述、过期时间（默认 72 小时）
2. **配置端口**：映射本地 8080 端口，协议设为 `auto`，开启匿名访问
3. **启动托管**：DevBridge 自动建立到华为云中继的出站连接
4. **获取公网 URL**：格式为 `https://<tunnelId>-<port>.devbridge-s2.hwtunnel.com`

整个流程几秒内完成，无需配置防火墙或端口转发。

### 4.3 实际体验

隧道建立后，在手机浏览器打开公网 URL 即可体验游戏，触屏滑动操作流畅。相比传统的 ngrok 等工具，DevBridge 与华为云生态集成更紧密，且不依赖第三方服务。

## 五、发布到华为云作品陈列馆

### 5.1 发布流程概述

华为云作品陈列馆（Gallery）是面向高校开发者的作品展示平台。发布流程包含以下步骤：

1. **IAM 身份认证**：创建 `SELF_VERIFY` 自委托，生成最小权限 STS 临时凭证
2. **项目准备**：生成封面截图、系统架构图、一句话简介、详情文章
3. **活动选择**：从当前可投稿的高校活动中选择目标活动
4. **作品上传**：通过 Gallery API 上传封面图片和详情包

### 5.2 封面生成

封面通过 Playwright 无头浏览器对本地运行的项目截图，再合成成 16:9 比例的封面图。需要预先安装 CJK 字体（Noto Sans CJK）以确保中文正常渲染。

### 5.3 系统架构图

使用自定义 HTML + Playwright 渲染生成系统架构图，展示从用户浏览器到 Nginx 到静态资源的请求流向，以及 ECS 生产部署和 DevBridge 开发隧道并行的部署架构。

### 5.4 发布结果

作品成功发布，获得：

- **作品 ID**：`0069e5a904000000`
- **作品链接**：[https://gallery.developer.huaweicloud.com/gallery/0069e5a904000000](https://gallery.developer.huaweicloud.com/gallery/0069e5a904000000)
- **投稿活动**：布道活动-河北司法警官职业学院
- **成长积分**：+200

## 六、总结与心得

这次实践让我深刻体会到华为云开发者生态的完整性：

1. **极简前端的魅力**：单文件 HTML 实现完整游戏，零依赖、零构建，部署只需一个 Nginx 静态服务。在追求框架和工具链的今天，有时候回归本源反而更高效。

2. **DevBridge 的便利性**：开发隧道让本地服务秒级暴露到公网，跨设备调试不再需要部署到测试服务器，大幅缩短了开发反馈循环。

3. **作品陈列馆的一站式发布**：从 IAM 认证、封面生成、详情打包到上传发布，整个流程虽然步骤多但每步都有明确的脚本支撑，自动化程度高。

4. **安全实践**：STS 临时凭证（900 秒有效期）替代永久 AK/SK 上传，最小权限原则贯穿始终，既安全又便捷。

> 如果你也参与华为云高校活动，不妨试试这个流程，把自己的项目发布到作品陈列馆吧！

---

*本文涉及的项目仓库：[2048-game](https://gitcode.com/gcw_CC3o8WcG/2048-game)*
*作品陈列馆：[查看作品](https://gallery.developer.huaweicloud.com/gallery/0069e5a904000000)*