初始化4×4空棋盘需用array(4).fill().map(() => array(4).fill(0))避免引用共享；addnumber()先收集空位再随机填充2（90%）或4（10%）；合并逻辑按方向遍历并去重补零；游戏结束需同时满足全非零且横纵均无相邻相等。
直接用 div + grid + 原生 JS 就能跑通核心逻辑，不用框架、不依赖 Canvas，4x4 合并判断写对了，游戏就活了。
怎么初始化一个空的 4x4 游戏板？
别用 Array(4).fill(Array(4).fill(0)) —— 这会创建 4 个指向同一数组的引用，改一行全变。必须用 map 每次新建：
const board = Array(4).fill().map(() => Array(4).fill(0));
初始化后立刻调用两次 addNumber()，确保开局有两个数字（2 占 90%，4 占 10%）：
-
addNumber()要先遍历找所有board[i][j] === 0的坐标，存进emptyCells数组 - 再用
Math.floor(Math.random() * emptyCells.length)取随机索引，避免空数组时崩溃 - 生成值用
Math.random() ，别硬写死 <code>2
方向移动时为什么合并总漏掉或重复？
关键在遍历顺序和“合并标记”：比如 moveLeft() 必须按行遍历，每行内从左到右扫描，但合并只允许每个格子最多参与一次（即合并后该位置不能再被后续格子合并）。
典型错误写法是两层 for 循环里直接 board[i][j] += board[i][j+1]，没考虑“已合并格子是否还能动”。正确做法是：
- 为每行建一个临时数组
row = board[i].filter(n => n !== 0) - 再单趟遍历
row，if (row[j] === row[j+1]) { row[j] *= 2; row.splice(j+1, 1); } - 补零至长度 4，再写回
board[i]
上下方向同理，只是把“行”换成“列”，遍历维度要转过来。
怎么判断游戏真正结束了？
不能只看有没有空格——满格时还可能有相邻相等数字可合并。必须同时检查两个条件：
- 所有格子非零：
board.flat().every(n => n !== 0) - 横向无相邻相等：
!board.some(row => row.some((n, j) => j - 纵向无相邻相等：
!board[0].some((_, j) => board.some((row, i) => i
三个条件全满足才触发 gameOver。漏掉任一，就会出现“明明还能合并却提示 Game Over”的 bug。
键盘事件监听容易卡死或重复触发？
keydown 事件默认会连续触发（长按方向键），导致一次按键执行多次移动。必须加防抖：
- 用一个布尔变量
isMoving标记当前是否正在处理移动 - 在
handleKeyPress开头加if (isMoving) return; - 进入
move()后立刻设isMoving = true，渲染完、新方块加完再设isMoving = false
否则玩家猛按左键，可能一次滑动就把整行全吸到左边，中间根本没机会合并。
最易被忽略的是：每次移动后，必须严格区分“是否真发生了位置变化或合并”，只有 hasMoved === true 才调用 addNumber()。否则空按方向键也会塞新数字，棋盘很快爆满。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
