生成新的关卡 生成正方形关卡的大小在4-7箱子数在1-关卡大小除以二 墙在1-关卡大小 请实现完整代码说中文!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width initial-scale=10title推箱子游戏titlestylebody display flex

要实现生成新的关卡功能，可以按照以下步骤进行：

1. 修改生成随机关卡的函数generateRandomLevel()，使其生成正方形关卡的大小在4-7之间。

function generateRandomLevel() {
  const levelSize = Math.floor(Math.random() * 4) + 4; // 生成4-7之间的随机数作为关卡大小
  gridWidth = levelSize;
  gridHeight = levelSize;
  playerPosition = generateRandomPosition();
  boxes = [];
  targets = [];
  walls = [];
  // 生成箱子的数量
  const numBoxes = Math.floor(levelSize / 2);
  // 生成墙的数量
  const numWalls = Math.floor(Math.random() * levelSize) + 1;
  // 生成随机位置的箱子
  while (boxes.length < numBoxes) {
    const newPosition = generateRandomPosition();
    if (!isOccupied(newPosition)) {
      boxes.push(newPosition);
    }
  }
  // 生成随机位置的目标点
  while (targets.length < numBoxes) {
    const newPosition = generateRandomPosition();
    if (!isOccupied(newPosition) && !boxes.some(box => box.x === newPosition.x && box.y === newPosition.y)) {
      targets.push(newPosition);
    }
  }
  // 生成随机位置的墙
  while (walls.length < numWalls) {
    const newPosition = generateRandomPosition();
    if (!isOccupied(newPosition) && !boxes.some(box => box.x === newPosition.x && box.y === newPosition.y) && !targets.some(target => target.x === newPosition.x && target.y === newPosition.y)) {
      walls.push(newPosition);
    }
  }
}

2. 修改生成随机位置的函数generateRandomPosition()，使其根据关卡大小生成随机位置。

function generateRandomPosition() {
  return { x: Math.floor(Math.random() * gridWidth), y: Math.floor(Math.random() * gridHeight) };
}

3. 在代码中添加一个初始化函数initGame()，用于初始化游戏。

function initGame() {
  generateRandomLevel();
  renderGame();
}

4. 在页面加载完成时调用initGame()函数。

window.addEventListener('DOMContentLoaded', initGame);

这样就完成了生成新的关卡的功能。当页面加载完成时，会生成一个新的关卡，并且可以通过按下键盘上的"e"键来生成新的关卡