用CodeArts做单文件2048：方向合并算法、上下颠倒修复与验证

这次示例由华为云CodeArts辅助生成，并由AI工具执行源码检查、自动测试和Chrome验收。整个游戏只有一个HTML文件，本文记录实现方式，以及实际发现并修复的上下方向颠倒问题。

源代码已在GitCode公开，仓库路径为 hid81111154/fingertip-2048。

作品《指尖2048》已发布至华为云开发者作品展览馆。

先把范围收小

2048的核心是四行四列的棋盘、方向移动、相同数字合并和分数累计。这个示例将CSS与JavaScript内联到index.html，使用二维数组保存棋盘，不接入远程脚本或后端接口。下载后直接在浏览器打开即可运行，也可以在项目目录启动一个静态HTTP服务。

界面支持方向键、WASD和触屏滑动；最高分写入当前浏览器的localStorage，撤销功能保存上一次有效移动前的棋盘和分数。清理浏览器存储会清除最高分，撤销只支持最近一步。

先处理一行，再复用到四个方向

向左移动可以分成三步：去掉零、合并相邻同值元素、补零到四项。当前实现如下：

function slideLeft(row) {
    var filtered = row.filter(function (v) { return v !== 0; });
    var gained = 0;
    var mergedFlags = [false, false, false, false];
    for (var i = 0; i < filtered.length - 1; i++) {
      if (filtered[i] === filtered[i + 1]) {
        filtered[i] *= 2;
        gained += filtered[i];
        mergedFlags[i] = true;
        filtered.splice(i + 1, 1);
      }
    }
    while (filtered.length < SIZE) filtered.push(0);
    return { row: filtered, gained: gained, merged: mergedFlags };
  }

合并后删除右侧元素，随后循环索引继续前进，从而避免刚产生的数字在同一次移动中再次参与合并。例如[2,2,4,0]应得到[4,4,0,0]，本次只增加4分，不能继续把两个4合成8。

四个方向都可以先旋转棋盘，统一调用向左合并逻辑，再恢复原方向。这里使用的rotateCW是顺时针旋转：

实际遇到的问题：上下方向颠倒

初始生成版本将上移和下移的旋转次数写反：上移设为1次，下移设为3次。合并算法本身可以运行，页面也能响应按键，因此只检查“有方块移动”很容易漏掉这个问题。

修复时没有调整输入键位，而是纠正方向到矩阵旋转的映射：上移使用3次顺时针旋转，下移使用1次。随后通过只含一个方块的确定性棋盘验证方向：将数字2放在第二行第二列，向上后应位于第一行第二列，向下后应位于第四行第二列。左右也采用同样方式检查落点。

用确定性测试隔离随机数

游戏每次有效移动后会添加随机方块。为了验证移动算法，测试中将addRandom、render等界面副作用替换为无操作函数，直接执行从实际源码提取的move和slideLeft。这使断言可以准确比较棋盘，而不会把新增随机方块误认为移动错误。

合并测试使用了以下四组数据：

四个方向的落点断言和四组合并计分断言均通过。随后在Chrome中实际检查了上移、下移、单步撤销和合并后的4分显示。算法断言覆盖确定性规则，浏览器验收则检查按键输入、状态恢复与页面显示是否连接正确。

运行方式与本次边界

python3 -m http.server 8099

在项目目录执行后打开本机地址 127.0.0.1:8099，或直接用浏览器打开index.html。源代码已公开，main分支只包含index.html、README.md和.gitignore。

本次免费沙箱返回资源不足，尚未部署公网体验地址；作品页提供代码和说明。后续使用静态托管环境时，直接上传HTML即可，不需要构建流程。这个小项目的主要收获是：AI生成的页面即便能够运行，方向映射和合并顺序仍需要明确的输入、预期结果及真实浏览器操作来检验。