HTML+JS实现经典推箱子游戏

HTML+JS实现经典推箱子游戏的完整攻略可以分为以下几个步骤：

第一步：设计游戏地图

首先，我们需要设计游戏地图，即游戏界面。游戏界面需要包含若干行若干列的方格，每个方格可以是空白、墙壁、箱子和目标点。我们可以使用HTML+CSS实现游戏界面的布局和样式，如下所示：

<div id="game">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="wall"></div>
    <div class="target"></div>
  </div>
  <div class="row">
    <div class="player"></div>
    <div class="wall"></div>
    <div class="box"></div>
    <div class="target"></div>
  </div>
  <!-- more rows... -->
</div>

同时，我们要为每个方格定义相应的CSS样式，例如：

#game {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 400px;
}
.row {
  display: flex;
  flex-wrap: nowrap;
  height: 25%;
  width: 100%;
}
.box, .player, .wall, .target {
  width: 25%;
  height: 100%;
  background-color: #ccc;
  border: 1px solid #000;
}
.player {
  background-color: #f00; /* 红色 */
}
.box {
  background-color: #0f0; /* 绿色 */
}
.wall {
  background-color: #000; /* 黑色 */
}
.target {
  background-color: #00f; /* 蓝色 */
}

第二步：定义游戏状态

游戏状态包括玩家的位置、箱子的位置、目标点的位置等信息，可以使用JavaScript对象来表示，例如：

const state = {
  player: {row: 1, col: 0},
  boxes: [{row: 0, col: 2}, {row: 1, col: 2}],
  targets: [{row: 0, col: 3}, {row: 1, col: 3}],
  walls: [{row: 0, col: 1}, {row: 1, col: 1}, /* more walls... */],
  rows: 2,
  cols: 4
};

其中，player表示玩家的位置，boxes表示所有箱子的位置，targets表示目标点的位置，walls表示墙壁的位置，rows和cols分别表示游戏地图的行数和列数。

第三步：实现游戏控制

游戏控制包括玩家移动、箱子移动等操作。可以在HTML代码中添加玩家控制按钮，例如：

<button id="btn-up">UP</button>
<button id="btn-down">DOWN</button>
<button id="btn-left">LEFT</button>
<button id="btn-right">RIGHT</button>

同时，在JavaScript中编写相应的事件处理函数，例如：

document.querySelector("#btn-up").addEventListener("click", moveUp);
document.querySelector("#btn-down").addEventListener("click", moveDown);
document.querySelector("#btn-left").addEventListener("click", moveLeft);
document.querySelector("#btn-right").addEventListener("click", moveRight);

function moveUp() {
  // 检查上面是否是墙壁或箱子
  // 如果是箱子，检查箱子上面是否是墙壁或箱子
  // 如果没有障碍物，移动玩家或箱子
}

// 同理，实现moveDown、moveLeft、moveRight函数

在这里，需要注意检查移动方向上是否存在障碍物，包括墙壁和箱子。如果是箱子，则还需要判断箱子在移动后是否撞到墙壁或者其他箱子。如果移动合法，则需要更新游戏状态，例如：

function moveUp() {
  const {player, boxes, walls} = state;
  const nextPos = {row: player.row - 1, col: player.col};
  const boxIndex = getBoxIndex(nextPos, boxes);

  if (!isWall(nextPos, walls) && !(boxIndex >= 0 && isWall(getNextPos(nextPos), walls) || isBox(getNextPos(nextPos), boxes))) {
    // 移动合法
    if (boxIndex >= 0) {
      // 玩家推箱子
      boxes[boxIndex] = getNextPos(nextPos);
    }
    player.row--;
    render(state);
  }
}

其中，isWall函数用于判断指定位置是否是墙壁，isBox函数用于判断指定位置是否存在箱子，getBoxIndex函数用于获取指定位置上的箱子在boxes数组中的索引，getNextPos函数用于获取移动方向上的下一个位置。

第四步：实现游戏渲染

游戏渲染指的是将游戏状态转换为界面上的方格，并更新相应的样式。可以在JavaScript中编写render函数来实现游戏渲染，例如：

function render(state) {
  const {player, boxes, targets, walls, rows, cols} = state;
  const cells = document.querySelectorAll("#game .box, #game .player, #game .target, #game .wall");
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      const index = row * cols + col;
      const cell = cells[index];
      const pos = {row, col};
      if (isBox(pos, boxes)) {
        cell.classList.add("box");
        cell.classList.remove("player", "wall", "target");
      } else if (isPlayer(pos, player)) {
        cell.classList.add("player");
        cell.classList.remove("box", "wall", "target");
      } else if (isWall(pos, walls)) {
        cell.classList.add("wall");
        cell.classList.remove("box", "player", "target");
      } else if (isTarget(pos, targets)) {
        cell.classList.add("target");
        cell.classList.remove("box", "player", "wall");
      } else {
        cell.classList.remove("box", "player", "target", "wall");
      }
    }
  }
}

其中，isPlayer函数用于判断指定位置是否是玩家所在位置，isTarget函数用于判断指定位置是否是目标点，isBox函数和isWall函数前面已经讲过。

示例说明1：移动箱子

在移动箱子的时候，需要判断箱子在移动后是否撞到墙壁或者其他箱子。如果撞到，则不能移动。可以在isBlocked函数中判断指定位置是否被堵住，例如：

function isBlocked(pos, boxes, walls) {
  return isWall(pos, walls) || isBox(pos, boxes) || isBox(getNextPos(pos), boxes) && isWall(getNextPos(pos), walls) ||
    isBox(getNextPos(pos), boxes) && isBox(getNextPos(getNextPos(pos)), boxes);
}

其中，getNextPos(pos)用于获取从指定位置出发，按照当前的移动方向所到达的下一个位置。如果下一个位置上已经存在箱子，则需要再获取这个箱子按照当前的移动方向所到达的下一个位置，也就是下下个位置。只有下下个位置上不存在箱子和墙壁，才认为当前方向上是没有障碍物的。

示例说明2：判断游戏胜负

判断游戏胜负的时候，需要判断所有的箱子是否都被收集到了目标点上。可以在isWin函数中判断箱子的位置和目标点的位置是否完全一致，例如：

function isWin(state) {
  const {boxes, targets} = state;
  return boxes.every(box => targets.some(target => isEqual(box, target)));
}

其中，isEqual函数用于判断两个位置是否相等。如果所有箱子都被收集到了目标点上，则认为游戏胜利。在移动箱子和玩家后，需要判断游戏是否胜利，并弹出相应的提示框：

if (isWin(state)) {
  alert("恭喜您过关了！");
}

至此，HTML+JS实现经典推箱子游戏的完整攻略就介绍完毕了。