如何让HTML小游戏中的move函数正常运行并自动更新游戏与地图？

你需要补充3处核心代码即可实现完整的移动逻辑：

1. 修正setup函数的单元格初始化逻辑，存储格子原始类型 #

因为玩家离开格子后需要恢复格子原本的样式，所以在生成单元格时添加一行代码存储原始格子类型：

for (var j = 0; j < size; j++) {
  var type = Math.round(Math.random());
  var cell = document.createElement("td");
  cell.className = "cell" + type;
  cell.dataset.type = type; // 新增这行，存储格子原始类型
  htmlRow.appendChild(cell);
  row.push(cell);
}

2. 新增缺失的键盘事件处理函数keyEvent #

你已经注册了键盘监听但没有写对应的触发逻辑，在script标签中添加这段代码：

function keyEvent(e) {
  if(!playing) return;
  switch(e.keyCode) {
    case 37: // 左方向键
      move(-1, 0);
      break;
    case 38: // 上方向键
      move(0, -1);
      break;
    case 39: // 右方向键
      move(1, 0);
      break;
    case 40: // 下方向键
      move(0, 1);
      break;
  }
}

3. 补全move函数内部逻辑 #

把下面的代码填入move函数的边界判断代码块内即可：

// 1. 扣除移动消耗的燃料
fuel -= 1;
// 2. 恢复旧位置的原有样式
const oldCell = gameBoard[positionY][positionX];
if (positionX === 0 && positionY === 0) {
  oldCell.className = "home";
} else {
  oldCell.className = "cell" + oldCell.dataset.type;
}
// 3. 更新玩家坐标
positionX += x;
positionY += y;
// 4. 给新位置添加玩家样式
gameBoard[positionY][positionX].className = "player";
// 5. 更新顶部状态显示
updateStatus();
// 6. 判断游戏结束条件
if (positionX === 0 && positionY === 0) {
  playing = false;
  document.getElementById("outcome").innerText = "恭喜你成功到家！游戏胜利";
} else if (fuel <= 0) {
  playing = false;
  document.getElementById("outcome").innerText = "燃料耗尽，游戏失败";
}

可选：添加屏幕点击操作按钮 #

如果不需要键盘也能操作，可以在body的表格下方添加4个按钮：

<div style="margin: 10px 0;">
  <button onclick="move(0,-1)">上</button>
  <div style="margin: 4px 0;">
    <button onclick="move(-1,0)">左</button>
    <button onclick="move(1,0)">右</button>
  </div>
  <button onclick="move(0,1)">下</button>
</div>

内容的提问来源于stack exchange，提问作者Veer Thakrar