从单文件 2048 到华为云 ECS：一次可验证的静态站点上线复盘

最近完成了一个面向华为云开放能力闯关活动的 2048 小游戏。项目最终没有引入前端框架或后端服务，而是用单文件 HTML 承载界面、样式和游戏逻辑，再分别通过 DevBridge 沙箱与华为云 ECS + Nginx 对外提供访问。

这篇文章复盘实现过程中的几个关键选择，以及静态站点上线时容易忽略的验证和清理问题。

一、为什么采用单文件实现

这个项目的目标很明确：让访问者打开链接后立即开始游戏，不依赖安装、构建或登录。

最终结构只有一个核心文件 index.html，其中包含：

• 4×4 棋盘与响应式视觉样式
• 方向键、WASD 和移动端滑动的输入处理
• 数字合并、计分、步数和胜负判定
• 最近一步撤销
• 浏览器 localStorage 最高分
• 无第三方运行时依赖

这种写法的优势是部署边界非常清楚：只要浏览器能访问静态文件，游戏就能运行。后续迁移时不需要处理数据库迁移、服务端依赖或环境变量。

二、把移动逻辑做成可复用的数据变换

棋盘用二维数组保存，非空单元格包含唯一标识、数字值和动画标记。移动不是直接操作 DOM，而是先生成下一帧数据：

1. 从当前行或列中提取非空方块
2. 压缩空位
3. 只合并一次相邻同值方块
4. 补回空位并写回新的棋盘
5. 只有棋盘真的发生变化时，才生成新方块、增加步数并写入历史

右移和下移会先反转数据方向，处理完成后再反转回来，因此四个方向共享同一套合并函数。这样既减少了重复分支，也让撤销状态更容易保持一致。

撤销时保存的是移动前的完整快照，包括棋盘、得分、步数、胜负状态和继续游戏状态。历史栈设置上限，避免长时间游玩带来无限增长。

三、输入层的统一处理

键盘输入通过方向键和 WASD 映射到相同的四个方向。移动端使用 Pointer Events：记录按下位置，在抬起时计算水平和垂直位移，超过阈值后才判定为滑动。

这样做不会依赖触摸事件和鼠标事件的差异，也能让桌面浏览器用鼠标拖拽完成测试。只有发生有效移动时才重新渲染，可以避免无效按键带来的额外状态变化。

四、从沙箱验证到持久化部署

部署分成两个阶段。

第一阶段使用 DevBridge 将本地静态服务映射到临时 HTTPS 公网地址，用于快速验证页面加载、触控操作和键盘操作。这个阶段的重点是尽快看到真实页面，而不是一次搭完整基础设施。

第二阶段在华为云创建低配置 ECS：

• Ubuntu 24.04
• Nginx 监听 80 端口
• 页面放置在 /usr/share/nginx/html/hc-activity/
• 安全组只开放 HTTP 80 和受限 SSH
• 公网入口使用弹性公网 IP

页面上线后，分别检查了首页 GET 状态码、静态资源加载、键盘移动和移动端布局。验证时不会只看服务器进程是否启动，而是直接访问公网 URL，确认用户真正能看到并操作页面。

五、容易被忽略的云主机细节

这次部署遇到过一个典型问题：只更新 user_data 并不会让已有 ECS 自动重新执行初始化脚本。云主机的初始化数据主要面向首次创建流程，后续修改并不会自动触发。

如果需要让系统初始化重新运行，应使用服务端支持的重新安装系统或重新初始化能力，并明确这会重建系统盘。执行前要确认镜像、磁盘、密钥和已有数据，避免把“更新启动脚本”误当成“热更新配置”。

另一个经验是，临时活动和长期业务应分开处理资源命名。本次使用 game2048-activity-ecs、game2048-activity-sg 等独立名称，清理时可以按名称和资源 ID 交叉确认，避免误删账号中的其他业务。

六、验收与清理同样属于交付

上线并不等于任务结束。本次验收至少覆盖了：

• 沙箱地址返回 200 且页面可玩
• ECS 公网地址返回 200 且 Nginx 正确加载页面
• 活动提交接口返回成功
• 成长中心能看到对应积分明细
• 作品展览馆可以正常访问

验收完成后，再按资源清单逐项删除。删除 ECS 时同步处理弹性公网 IP 和系统盘，再确认安全组不再被引用后删除。隧道和本地服务也应有明确的生命周期，不能因为“发布成功”就假定它们可以永久保留。

七、项目地址

完整源代码和部署说明：

• GitCode：https://gitcode.com/lllo123/huawei-cloud-2048-activity
• 作品展览馆：https://gallery.developer.huaweicloud.com/gallery/00690c481c400000

总结

这个项目规模不大，但覆盖了从数据状态设计、跨端输入、响应式界面，到云主机部署、公网验证和资源清理的完整链路。

对于静态站点来说，代码简单不代表上线简单。真正决定交付质量的，是能否把“地址可访问、功能可操作、结果可验收、资源可回收”这四件事同时做完整。