单文件2048实现笔记：合并规则、方向处理与状态管理

本文以一个AI辅助编写的单文件2048小游戏为例，整理前端实现中的关键规则。页面使用HTML、CSS和原生JavaScript，不依赖前端框架，适合作为数组操作、事件处理和状态管理的练习。

一、先把一行数字处理正确 棋盘可以表示为4×4二维数组，0代表空格。处理向左移动时，先过滤0，再从左到右扫描相邻数字：相等则合并，并跳过已参与合并的后一项；最后在末尾补0。每个原始方块在一次移动中最多参与一次合并，不能让刚生成的数字立即再次合并。 例如，[2,2,2,2]应得到[4,4,0,0]，而不是[8,0,0,0]；[2,2,4,0]应得到[4,4,0,0]。本次增加的分数，是所有新生成合并数字之和。

二、复用一套合并逻辑处理四个方向 向右移动时，先反转当前行，执行相同的向左合并，再反转回来。向上、向下则先提取列，再按同样的方法处理。这样能把规则集中在一个函数中，减少四套实现不一致的问题。读取行时使用数组副本，避免反转操作直接修改原棋盘。

三、只有有效移动才生成新数字 移动前保留棋盘快照，计算候选棋盘后再比较。若前后完全相同，则这次按键无效，不应该生成新方块，也不应该覆盖可撤销的历史状态。有效移动后，从空格中随机选择位置，以90%的概率生成2、10%的概率生成4。

四、撤销、最高分与结束判断 撤销保存的是上一次有效移动前的棋盘、分数以及胜负标记；恢复时对二维数组逐行复制，避免引用共享。最高分使用localStorage保存，与当前局面的撤销分开处理。棋盘填满并不一定结束，还要检查横向、纵向是否存在相邻同值方块。

五、把规则变成可复查的用例 可优先准备四类回归用例：空行移动不变化；连续四个同值数字只合并成两个数字；向左与反转后的向右结果对称；满棋盘仍有同值邻居时可以继续。键盘方向键和WASD应映射到同一移动入口，触屏则用主位移方向决定移动，并设置最小滑动距离减少误触。

这个练习的重点不在界面复杂度，而在于把规则、状态更新与渲染分开。进一步完善时，可以补充localStorage不可用的异常处理、自动化规则测试以及更清晰的无障碍提示。