用 AI 开发者空间发布一个单文件 2048：从合并规则到公网验证

为什么先做成单文件

这次目标是完成一个可以直接打开和分享的 2048 网页游戏。我把范围限制为一个 index.html：样式与脚本全部内联，不引入 npm 包，也不使用 Vite 等构建工具。对于这样的小型应用，这能减少构建与上传环节，出现问题时也容易判断是页面代码、静态服务还是访问链路出了问题。

最终页面包含 4×4 棋盘、方向键与 WASD 操作、手机滑动、合并计分、最高分记录、重新开始，以及胜利和无路可走时的提示。最高分写入浏览器 localStorage，没有用户登录或云端排行榜。

把一个方向的规则写清楚

代码用二维数组保存棋盘，空格记为 0。核心思路是先实现向左移动：去掉 0、按相邻数值合并、在行尾补 0。其余方向通过反转和转置，转换为相同的行处理。

例如，向左移动时：

[2, 0, 2, 4] → [4, 4, 0, 0]
[2, 2, 2, 2] → [4, 4, 0, 0]

第二个例子很适合检查“一次移动中，新合并的数字不能再次参与合并”这一规则。若错误地算成 [8, 0, 0, 0]，游戏就改变了原本的玩法。

本次代码的行处理函数如下：

function sr(row) {
  const values = row.filter(value => value);
  let gained = 0;
  for (let i = 0; i < values.length; i++) {
    if (i + 1 < values.length && values[i] === values[i + 1]) {
      values[i] *= 2;
      gained += values[i];
      values.splice(i + 1, 1);
    }
  }
  while (values.length < 4) values.push(0);
  return { row: values, gained };
}

这段摘录保留了实际实现的处理方法，变量名作了展开，便于阅读。只有棋盘确实改变，才计入本次合并得分并随机生成新方块，避免无效按键也不断增加数字。

PC 与手机共用移动入口

键盘事件把方向键和 WASD 映射为四个方向。触屏事件记录滑动起点与终点，比较水平、垂直距离，以位移较大的轴判断方向；小于 20 像素的移动被忽略，减少轻触造成的误操作。两种输入最终都调用同一个移动函数，因此无需维护两套游戏规则。

棋盘使用正方形容器，方块尺寸根据可用宽度计算。窗口尺寸变化时重新绘制。当前页面还禁止了浏览器缩放；这让演示中的手势行为更直接，但有可访问性上的取舍，若继续完善，应该优先恢复缩放能力并缩小手势拦截范围。

在沙箱发布，再检查真实页面

开发过程使用华为云 AI 开发者空间中的 AI Shell 与 HuaweiCloud DevKit。生成单文件后，在免费体验环境启动静态服务，再通过 DevBridge 取得公网访问地址。代码与部署过程使用 AI 辅助完成，以下核验结果来自实际操作。

这几个阶段需要分开判断：文件上传成功，不代表静态服务已经启动；本地端口能访问，也不代表公网地址已经可用。发布后的基础检查可以使用：

curl -sI 'https://<实际分配的沙箱域名>/'

这里的域名只是占位符，必须替换成平台真实返回的地址。HTTP 成功状态只能说明对应请求可达，还要打开页面检查棋盘、按钮与游戏内容，避免把网关提示页当成应用。

本次已经完成沙箱部署并得到可公开访问的游戏页面，页面代码也已保留为独立 HTML 文件。华为云活动的沙箱部署里程碑已成功提交，成长中心实际增加 100 积分。这是本次观察到的到账结果，不代表其他时间或其他活动的固定奖励。

这次完成了什么，还有哪些边界

本次实践完成的是浏览器端单文件游戏与沙箱发布，没有部署 ECS，也没有建立数据库、云端账户或多人联机服务。代码中实现了键盘与触屏输入，但没有做完整的浏览器兼容性和无障碍测试，不能把“已发布”视作所有终端都已验证。

沙箱访问地址适合演示与学习，能否长期访问取决于运行环境和访问链路的存续状态。保存 HTML 源文件，比只留下一个链接更可靠。后续若确有长期托管需求，再评估静态托管或持久化资源的成本与维护方式。

对我而言，这个小项目最有用的收获，是把 AI 生成、规则检查、部署和公网核验串成了一个可追踪的过程。先把规则写小、把交付物做轻，再逐层验证访问路径，小型网页应用也能完成一次真实的上线实践。

参考入口

• 华为云 AI 开发者空间：https://developer.huaweicloud.com/devspace/
• HuaweiCloud DevKit 官方仓库：https://github.com/huaweicloud/huaweicloud-devkit
• 华为云开放能力线上闯关活动：https://open.huaweicloud.com/openplatform/activity/