用一个 HTML 文件做一次可验证的云端实践

这次实践选择了华为云开放能力实战案例中的 2048 小游戏。目标不是先搭建复杂工程，而是用一个自包含的 index.html，把游戏逻辑、页面展示和云端访问串起来。本文由 AI 辅助整理，记录实际准备过程、验证结果及遇到的问题。
案例入口：https://open.huaweicloud.com/openplatform/activity/case

一、先明确交付物

页面使用 4×4 网格，CSS 和 JavaScript 全部内联，不依赖 npm、Vite 或第三方 CDN。交互需要覆盖电脑方向键与手机滑动，并实现合并计分、最高分记录、新游戏和游戏结束判断。这样部署时只需处理一个静态文件，便于区分代码问题和环境问题。
截至本文整理时，已有沙箱公开地址返回 HTTP 200，响应页面标题为 2048。这个检查只能说明页面可以被访问，并不等于所有交互都已通过验收。ECS 持久化部署和活动积分提交也不能因此直接算作完成。

二、合并逻辑要防止一个方块重复合并

2048 的关键不在网格绘制，而在一次移动中的合并顺序。以向左移动为例，先去掉空格，再从左到右处理相邻数字，合并完成后补零。刚合并出的方块不能在同一次移动中再次合并。

function mergeLine(line) {
  const values = line.filter(Boolean);
  const result = [];
  let gain = 0;
  for (let i = 0; i < values.length; i++) {
    if (values[i] === values[i + 1]) {
      const merged = values[i] * 2;
      result.push(merged);
      gain += merged;
      i++;
    } else {
      result.push(values[i]);
    }
  }
  while (result.length < 4) result.push(0);
  return { line: result, gain };
}

本地对合并函数检查了以下边界：

• [2, 2, 2, 2] 得到 [4, 4, 0, 0]，得分增加 8。
• [2, 0, 2, 4] 得到 [4, 4, 0, 0]，得分增加 4。
• [4, 4, 8, 0] 得到 [8, 8, 0, 0]，不能直接变成 16。
  这三项检查已经通过。四个方向可以复用同一合并函数，通过改变一行或一列的读取顺序实现，避免写四套逻辑。

三、输入与状态更新

电脑端监听方向键并阻止页面滚动；手机端记录按下与抬起的位置，用横向、纵向位移的绝对值判断主方向，并设置最小滑动距离，避免把点击误判为移动。
只有棋盘确实发生变化时才生成新方块。否则连续按一个无效方向也会增加方块，使游戏规则失真。结束条件是没有空格，且相邻行列中均不存在相同数字。最高分可存入 localStorage，但需要容错：浏览器不允许本地存储时，游戏主体仍应可用。

四、部署前先检查环境资格与运行状态

华为云活动使用 DevKit 配合沙箱进行预览。准备过程包括 Node.js 环境、插件安装和账号认证。访问密钥应通过受保护的凭据配置方式提供，不能放进 HTML、截图或博客代码。
本次遇到过沙箱启动返回 HD.99003001: No available node pool。这表示启动请求在平台资源分配阶段失败，不能靠修改游戏合并函数来解决。应先核对环境状态和平台错误，再决定是否重试，避免反复改动无关代码。
这里还有一个容易混淆的点：某次连接接口失败，不代表所有已生成的公开地址都不可用。后来拿到已有沙箱链接后，单独检查了公开页面，确认它返回 200，且标题为 2048。因此环境管理接口和站点访问应分别记录证据。

五、分层验收，避免只看见 200 就宣布完成

建议按以下顺序检查：

1. 文件层：index.html 自包含，引用的资源真实存在。
2. 逻辑层：合并顺序正确，无效移动不生成新方块。
3. 页面层：键盘、触摸、新游戏及结束提示实际可用。
4. 服务层：静态服务能返回目标页面。
5. 公网层：从外部检查状态码和响应正文，而非只测试本机端口。
6. 活动层：提交接口明确返回成功后，再确认任务完成状态。
   可使用下面的命令检查自己的公开地址，替换示例占位符即可：

curl -sI "<沙箱公开地址>"
curl -s "<沙箱公开地址>"

第一条检查响应头，第二条检查正文。返回 200 的内容也可能是提示页或旧站点，所以还应确认页面标题与游戏内容一致。本文没有把 HTTP 检查扩大解释为完整交互测试，也没有把沙箱预览写成 ECS 上线。

六、这次实践的收获

单文件项目降低了部署变量，也让验证边界更清楚。游戏代码、平台资源分配、公开访问和活动提交是不同环节，每一步都应有对应证据。对于小型演示项目，先完成一个可检查的最小页面，再逐层补齐部署与验收，比一开始引入庞大工具链更容易发现真正的问题。