单文件 2048 小游戏：从 DevKit 沙箱开发到华为云 ECS 上 Nginx 部署的完整实践

最近想找个小项目练手，顺便熟悉一下华为云 DevKit 沙箱和 ECS 的部署流程，就做了一个单文件版的 2048 小游戏。整个游戏只有一个 HTML 文件，HTML/CSS/JS 全在一块，支持键盘和触屏操作，做完直接部署到一台华为云 ECS 上，通过 Nginx 对外提供访问。

一、需求与设计

2048 的玩法大家都很熟悉：4x4 棋盘，滑动合并相同数字，目标是拼出 2048。为了让它足够轻量、随处可跑，我定了几个原则：

1. 单文件交付：HTML、CSS、JavaScript 全部写在一个 index.html 里，不依赖任何外部资源，离线也能玩；

2. 双端操作：桌面端用方向键（上下左右），移动端支持触屏滑动；

3. 部署简单：纯静态文件，任何 Web 服务器（Nginx/Apache）都能直接托管。

二、在 DevKit 沙箱中开发

华为云 DevKit 提供了开箱即用的开发沙箱环境，在浏览器里就能写代码、实时预览，不用在本地折腾环境。

开发过程大致是这样：

1. 在沙箱中新建 index.html，先搭棋盘骨架：一个 4x4 的 grid 容器，16 个格子用 CSS Grid 布局；

2. 游戏逻辑用原生 JavaScript 实现：状态用一个 4x4 的二维数组表示，滑动时按方向压缩、合并、再补空格，合并一次得分累加；

3. 每次有效滑动后在空格子中随机生成 2 或 4（2 的概率 90%），用 CSS transition 做移动动画；

4. 键盘事件监听 keydown 的方向键；移动端监听 touchstart/touchend 计算滑动方向，阈值 24px 以上判定为有效滑动；

5. 游戏结束判定：棋盘填满且任意相邻格子都无法合并时弹出“游戏结束”，拼出 2048 时弹出胜利提示（可继续挑战更高分）。

在沙箱里边写边预览，调样式特别方便。整个文件几百行，零依赖。

三、部署到华为云 ECS（Nginx）

开发完成后，把文件部署到一台华为云 ECS 上长期运行。

1. 在 ECS 上安装 Nginx（以 Ubuntu 为例）：sudo apt update && sudo apt install -y nginx；

2. 把 index.html 上传到服务器，例如放到 /var/www/hc-activity/ 目录下；

3. 在 Nginx 配置中加一个 location：location /hc-activity/ { alias /var/www/hc-activity/; index index.html; }，然后 nginx -t 检查配置，systemctl reload nginx 重载；

4. 安全组放行 80 端口。

部署完成后，浏览器访问 http://1.92.82.9/hc-activity/index.html 就能直接玩了。手机浏览器打开同样可以滑动操作。

四、效果与验证

- PC 端：方向键滑动流畅，合并动画自然，得分实时更新；

- 移动端：触屏滑动灵敏，无需缩放，竖屏体验良好；

- 页面为纯静态资源，加载快，ECS 上的 Nginx 扛几十人同时在线毫无压力。

五、总结

这次实践验证了一条很顺的链路：在 DevKit 沙箱里快速开发调试 → 打包成单文件 → 上传 ECS 用 Nginx 托管。对于个人小项目、活动页、Demo 展示来说，这种“单文件 + 静态托管”的方式成本最低、维护最省心。

后续可以考虑加个排行榜（用云函数加表格存储存最高分），或者把游戏做成 PWA 支持离线安装。欢迎访问体验交流。

在线体验地址：http://1.92.82.9/hc-activity/index.html