单文件 2048：从零实现到 devbridge 隧道公网可玩

缘起：一个 10KB 的单文件小游戏

最近想给朋友做个能直接打开就玩的小游戏，目标是：不依赖 npm、不用构建工具、没有任何外部请求，一个 index.html 双击就能玩，还要能一键挂到公网。最后选了 2048——规则清晰、交互简单、非常适合演示"单文件应用"的工程边界。

一、单文件 2048 的核心实现

1. 数据结构

棋盘用 4x4 二维数组存每个格子的 tile 引用，tile 对象记录 {v, r, c, el, in}（数值、行列、DOM 节点）。视图层绝对定位按 left/top 百分比摆放，配合 CSS transition 实现 100ms 的滑动动画：

function put(t){
  t.el.style.left = (t.c * 25) + '%';
  t.el.style.top  = (t.r * 25) + '%';
}

2. 移动与合并算法

四个方向统一抽象成"按方向取线"：向上移动就是逐列自上而下取格子，向右就是逐行倒序取。对每条线先压缩再合并，合并规则与原版一致——相邻等值合并翻倍、每回合每块只合并一次：

while (j + 1 < seq.length) {
  if (seq[j].v === seq[j+1].v) {   // 相邻等值
    seq[j].v *= 2;                 // 翻倍
    gained += seq[j].v;            // 计分
    removed.push(seq[j+1]);        // 被吞掉的块移除 DOM
    j += 2;                        // 跳过一对，保证一次只合一次
  } else { out.push(seq[j]); j++; }
}

3. 随机生成与结束判定

每步移动后，在空格里等概率随机放一个新块（90% 是 2，10% 是 4）。结束判定很朴素：棋盘满且任意相邻块不等值即 Game Over；任意块达到 2048 则胜利：

function canMove(){
  for (let r = 0; r < 4; r++) for (let c = 0; c < 4; c++) {
    if (!board[r][c]) return true;                       // 有空位
    if (c + 1 < 4 && board[r][c].v === board[r][c+1].v) return true;  // 可横合
    if (r + 1 < 4 && board[r][c].v === board[r+1][c].v) return true;  // 可竖合
  }
  return false;
}

4. 移动端适配

touch-action:none 关掉浏览器默认手势，touchstart/touchend 记录起止坐标，位移超过 24px 且主导轴明确才触发滑动，避免误触。字体大小随容器宽度自适应，1024 以上的块自动缩小字号防溢出。

二、部署：devbridge 隧道一键公网可玩

页面写完后，本机 python -m http.server 8080 起个静态服务，然后用华为云开源的 devbridge 把本地端口映射成公网 HTTPS 地址：

# 安装 devbridge（以 0.2.x 为例，支持 API Key 登录）
curl -fsSL https://github.com/huaweicloud/devspace-devbridge/releases/latest/download/install.sh -o /tmp/db.sh
bash /tmp/db.sh

# 在 devstation 控制台创建 API Key 后登录
devbridge auth login --api-key <你的APIKey>

# 把本地 8080 映射为公网隧道（-e 为有效期小时数）
devbridge host -p 8080 -e 48
# 输出形如：Tunnel URL: https://xxxx-8080.devbridge-s2.hwtunnel.com

几十秒后终端会打印一个 https://xxx-8080.devbridge-s2.hwtunnel.com 形式的地址，手机电脑直接打开就能玩，HTTPS 自动配好。整个"开发到公网可玩"的过程不超过 10 分钟，成本为零。

三、踩过的坑

1. 合并顺序：一行内 [2,2,4] 向左应得 [4,4] 而不是 [8]，所以合并必须"从靠边一侧两两配对"，且一次移动中每块只参与一次合并。
2. 动画与状态分离：DOM 位置动画用 CSS transition，棋盘状态在按下方向键时立即结算，动画只是表现层，避免"连按丢步"。
3. 触屏判定阈值：小于 24px 的位移判为点击不响应，否则手机上轻点屏幕就会走棋。
4. devbridge 0.1.x 老版本：网关已迁移，旧版连不上，务必升级到 0.2.x 并用 API Key 认证（release 版不再支持 AK/SK 登录）。

总结

单文件应用是把"工程约束"变成"产品卖点"的典型场景：所有 CSS/JS 内联、零依赖、约 10KB，配上 devbridge 这类隧道工具，从想法到"发个链接朋友就能玩"非常顺滑。完整 index.html 我整理好了，需要的朋友可以在评论区留言。

以上操作均在本人账号环境完成，隧道地址随本地服务存活，仅供演示。