js实现迷宫游戏
使用JavaScript实现迷宫游戏
基本思路
迷宫游戏的核心是生成迷宫地图、处理玩家移动以及判断胜利条件。可以通过HTML5 Canvas或DOM元素渲染迷宫，用键盘事件控制玩家移动。
迷宫生成算法
深度优先搜索（DFS）是常用的迷宫生成算法，递归回溯实现简单：
function generateMaze(width, height) {
const grid = Array(height).fill().map(() => Array(width).fill(1));
const stack = [];
const startX = 1, startY = 1;
grid[startY][startX] = 0;
stack.push([startX, startY]);
while (stack.length) {
const [x, y] = stack[stack.length - 1];
const directions = [[1, 0], [-1, 0], [0, 1], [0, -1]]
.map(([dx, dy]) => [x + dx * 2, y + dy * 2])
.filter(([nx, ny]) => nx > 0 && nx < width - 1 && ny > 0 && ny < height - 1 && grid[ny][nx] === 1);
if (directions.length) {
const [nx, ny] = directions[Math.floor(Math.random() * directions.length)];
grid[ny][nx] = 0;
grid[(y + ny) / 2][(x + nx) / 2] = 0;
stack.push([nx, ny]);
} else {
stack.pop();
}
}
return grid;
}渲染迷宫
使用Canvas绘制迷宫和玩家：
const canvas = document.getElementById('maze');
const ctx = canvas.getContext('2d');
const cellSize = 20;
function drawMaze(maze) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
maze.forEach((row, y) => {
row.forEach((cell, x) => {
ctx.fillStyle = cell === 1 ? '#000' : '#fff';
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
});
});
}玩家控制
监听键盘事件移动玩家：
let player = { x: 1, y: 1 };
const maze = generateMaze(21, 21);
document.addEventListener('keydown', (e) => {
const moves = {
ArrowUp: [0, -1], ArrowDown: [0, 1],
ArrowLeft: [-1, 0], ArrowRight: [1, 0]
};
const [dx, dy] = moves[e.key] || [0, 0];
const newX = player.x + dx, newY = player.y + dy;
if (maze[newY]?.[newX] === 0) {
player = { x: newX, y: newY };
drawPlayer();
checkWin();
}
});
function drawPlayer() {
ctx.fillStyle = 'red';
ctx.fillRect(player.x * cellSize, player.y * cellSize, cellSize, cellSize);
}胜利条件
当玩家到达终点时触发胜利：
function checkWin() {
if (player.x === maze[0].length - 2 && player.y === maze.length - 2) {
alert('You Win!');
}
}完整实现步骤
- 创建HTML文件包含Canvas元素
- 实现迷宫生成算法
- 添加Canvas渲染逻辑
- 实现键盘控制玩家移动
- 添加胜利条件检测
优化方向
- 添加动画效果
- 实现多关卡系统
- 增加计时功能
- 添加移动设备触摸控制
这种实现方式可以扩展为更复杂的迷宫游戏，包括敌人、道具等游戏元素。核心在于迷宫数据的表示和玩家位置的更新逻辑。
