用原生 JS 写 2048：布局与动画的三个坑

为什么用原生 JS 写一遍

2048 规则简单，但很适合练习状态管理与 DOM 动画。这次的目标是不引入框架、不依赖外部资源，单个 HTML 文件即可运行。写完之后回头看，真正花时间的不是算法，而是三个布局与动画上的坑。

坑一：用表格或 flex 排棋盘

一开始想用 4×4 的表格放方块，结果每次移动都要重建单元格，过渡动画直接失效。后来改成两层结构：背景是固定的 16 个格子，方块则是独立的绝对定位元素。每个方块只保存行、列与数值，渲染时把行列换算成 left/top。移动时只改坐标，DOM 结构不重排，过渡也稳定了。

坑二：先合并再压缩，顺序反了会连消

正确的顺序是：按行取出所有方块并保持顺序，先压缩掉空位，再判断相邻同值合并，最后再压缩一次。用一个 target 指针指向下一个可放置的位置：前一个方块数值相同且本回合未合并过，就合并并加倍；否则放到 target 位置。合并过的方块必须打标记，否则一次移动里会出现连续合并三次的情况。四个方向只需把行列互换、必要时反转顺序，就能复用同一套逻辑。

坑三：位移和缩放抢同一个 transform

最初把位移也放在 transform 上，结果新方块的出现动画会覆盖位移，方块瞬间跳到左上角。解决办法是分工：位移过渡交给 left/top，transform 只负责 pop 和 merge 的缩放。两个属性互不干扰，动画就正常了。

怎么自测

用无头 Chrome 打开页面，连续派发 80 次方向键，然后检查三件事：方块数量不超过 16、所有方块的 left/top 组合唯一、控制台没有异常。再加一条：页面不能引用任何外部脚本或图片，避免离线或跨域问题。

部署

把 index.html 放到 ECS 的 /var/www 下，用 nginx 做静态托管，开放 80 端口即可公网访问。整个过程不需要构建，也没有额外依赖，适合作为最小可用的上线练习。

小结

这个小项目的关键不在算法，而在边界：动画属性不要互相覆盖，合并标记要及时清理，渲染要以数据为准而不是直接操作 DOM。把这三点处理好，代码量并不大，但可维护性会好很多。