推箱子js代码

下面是一个简单的推箱子游戏的JavaScript代码示例：

HTML：

<div id="gameboard">
  <div class="row">
    <div class="cell empty"></div>
    <div class="cell box"></div>
    <div class="cell target"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell target"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

CSS:

#gameboard {
  display: flex;
  flex-direction: column;
  border: 2px solid black;
  width: 400px;
  height: 400px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.cell {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}

.empty {
  background-color: white;
}

.box {
  background-color: brown;
}

.target {
  background-color: yellow;
}

JavaScript:

// 获取游戏板和所有单元格元素
const gameboard = document.getElementById("gameboard");
const cells = gameboard.querySelectorAll(".cell");

// 定义箱子的初始位置和目标位置
let boxPosition = 1;
const targetPositions = [2, 8];

// 将箱子放置在其初始位置
cells[boxPosition].classList.add("box");

// 遍历目标位置，将目标元素标记为目标
for (let i = 0; i < targetPositions.length; i++) {
  cells[targetPositions[i]].classList.add("target");
}

// 监听键盘事件，当玩家按下箭头键时，移动箱子
document.addEventListener("keydown", (event) => {
  // 通过按键代码计算新的箱子位置
  let newBoxPosition = null;
  switch (event.code) {
    case "ArrowUp":
      newBoxPosition = boxPosition - 4;
      break;
    case "ArrowDown":
      newBoxPosition = boxPosition + 4;
      break;
    case "ArrowLeft":
      newBoxPosition = boxPosition - 1;
      break;
    case "ArrowRight":
      newBoxPosition = boxPosition + 1;
      break;
  }

  // 检查新的箱子位置是否合法，如果是，移动箱子
  if (newBoxPosition !== null && newBoxPosition >= 0 && newBoxPosition < cells.length && !cells[newBoxPosition].classList.contains("box")) {
    // 将箱子从旧位置移除
    cells[boxPosition].classList.remove("box");

    // 如果箱子移动到了目标位置，标记为已完成
    if (targetPositions.includes(newBoxPosition)) {
      cells[newBoxPosition].classList.add("box", "completed");
    } else {
      cells[newBoxPosition].classList.add("box");
    }

    // 更新箱子位置
    boxPosition = newBoxPosition;
  }

  // 检查是否已完成所有目标
  let completedTargets = gameboard.querySelectorAll(".target.completed");
  if (completedTargets.length === targetPositions.length) {
    alert("You win!");
  }
});

上面的代码实现了一个简单的推箱子游戏，包括箱子的移动和目标的判定。你可以在此基础上进行扩展和改进，添加更多元素和功能，使游戏更加有趣。