用JavaScript canvas做的走迷宫游戏，看看你能通关吗？

前言：迷宫的魅力
或许你曾经在某个夜晚坐在电脑前，键盘敲打着，在游戏中操控着一个小人在一个迷宫里穿梭，寻找着出口。也许你也会好奇，这样的游戏是如何制作出来的呢？

使用JavaScript canvas进行迷宫游戏制作

1. 创建一个 canvas 元素

首先，我们需要创建一个 canvas 元素，这个元素将作为游戏的画布。

<canvas id="canvas"></canvas>

2. 获取 canvas 的上下文

接下来，我们需要获取 canvas 的上下文，以便我们可以开始绘画。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

3. 定义一个迷宫算法

我们需要定义一个算法来生成迷宫。可以使用多种算法，这里我们使用的是递归回溯算法。

function generateMaze(width, height) {
  // 创建一个二维数组来表示迷宫
  const maze = new Array(height);
  for (let i = 0; i < height; i++) {
    maze[i] = new Array(width);
  }

  // 随机选择一个单元格作为起点
  const startCell = {
    x: Math.floor(Math.random() * width),
    y: Math.floor(Math.random() * height),
  };

  // 从起点开始递归回溯生成迷宫
  generateMazeRecursive(maze, startCell);

  // 返回生成的迷宫
  return maze;
}

function generateMazeRecursive(maze, currentCell) {
  // 将当前单元格标记为已访问
  maze[currentCell.y][currentCell.x] = 1;

  // 随机选择一个方向
  const directions = ["up", "down", "left", "right"];
  const randomDirection = directions[Math.floor(Math.random() * directions.length)];

  // 根据随机方向生成下一个单元格
  let nextCell = {
    x: currentCell.x,
    y: currentCell.y,
  };

  switch (randomDirection) {
    case "up":
      nextCell.y--;
      break;
    case "down":
      nextCell.y++;
      break;
    case "left":
      nextCell.x--;
      break;
    case "right":
      nextCell.x++;
      break;
  }

  // 检查下一个单元格是否有效
  if (
    nextCell.x >= 0 &&
    nextCell.x < maze[0].length &&
    nextCell.y >= 0 &&
    nextCell.y < maze.length &&
    maze[nextCell.y][nextCell.x] === 0
  ) {
    // 如果下一个单元格有效，则将其标记为已访问并继续递归
    maze[nextCell.y][nextCell.x] = 1;
    generateMazeRecursive(maze, nextCell);
  }
}

4. 使用 canvas 绘制迷宫

我们使用 canvas 的 fillRect() 方法来绘制迷宫的墙壁，使用 fillStyle 属性来设置墙壁的颜色。

function drawMaze(maze) {
  for (let i = 0; i < maze.length; i++) {
    for (let j = 0; j < maze[0].length; j++) {
      if (maze[i][j] === 1) {
        ctx.fillRect(j * 10, i * 10, 10, 10);
      }
    }
  }
}

5. 添加玩家

我们需要添加一个玩家角色，以便用户可以控制他在迷宫中移动。

// 创建玩家对象
const player = {
  x: 0,
  y: 0,
};

// 绘制玩家
function drawPlayer() {
  ctx.fillStyle = "red";
  ctx.fillRect(player.x * 10, player.y * 10, 10, 10);
}

6. 添加键盘事件监听器

我们需要添加键盘事件监听器，以便用户可以使用键盘控制玩家移动。

document.addEventListener("keydown", (event) => {
  switch (event.key) {
    case "ArrowUp":
      player.y--;
      break;
    case "ArrowDown":
      player.y++;
      break;
    case "ArrowLeft":
      player.x--;
      break;
    case "ArrowRight":
      player.x++;
      break;
  }

  // 防止玩家走出迷宫边界
  player.x = Math.max(0, Math.min(player.x, maze[0].length - 1));
  player.y = Math.max(0, Math.min(player.y, maze.length - 1));

  // 重绘迷宫和玩家
  drawMaze(maze);
  drawPlayer();
});

挑战你的智慧和策略
各位看官，这就是用JavaScript canvas和一个简单的算法做出来的走迷宫游戏啦。不过，我们还可以进一步优化和完善游戏，比如添加不同的迷宫难度级别，添加更多的游戏元素（如敌人、宝藏等），或者使用更高级的算法来生成更加复杂的迷宫。