1、迷宫问题解决方案
（1）网页演示
（2）代码
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>迷宫动画演示</title><style>body {display: flex;flex-direction: column;align-items: center;font-family: Arial, sans-serif;}#maze {display: grid;grid-template-columns: repeat(10, 30px);grid-template-rows: repeat(10, 30px);gap: 1px;}.cell {width: 30px;height: 30px;background-color: #fff;border: 1px solid #ccc;}.wall {background-color: #000;}.path1 {background-color: #0f0; /* 第一条路径为绿色 */}.path2 {background-color: #ff0; /* 第二条路径为黄色 */}.path3 {background-color: rgb(208, 0, 255); /* 第三条路径为紫色 */}.start {background-color: #00f;}.end {background-color: #f00;}#steps {margin-top: 20px;font-size: 18px;}#controls {margin-top: 20px;}</style>
</head>
<body><h1>迷宫问题解决方案</h1><div id="maze"></div><div id="controls"><button id="startButton">开始解决迷宫</button><button id="resetButton" style="display: none;">返回</button></div><div id="steps"></div><script>const maze = [[0, 1, 0, 0, 0, 0, 0, 1, 0, 0],[0, 1, 0, 1, 1, 1, 0, 1, 0, 0],[0, 0, 0, 1, 0, 0, 0, 1, 0, 0],[0, 1, 1, 1, 0, 1, 1, 1, 0, 0],[0, 0, 0, 0, 0, 0, 0, 1, 0, 0],[0, 1, 1, 1, 1, 1, 0, 1, 1, 1],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[1, 1, 1, 1, 1, 1, 1, 1, 1, 0],[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],[0, 1, 1, 1, 1, 1, 0, 0, 0, 0],];const mazeContainer = document.getElementById('maze');const stepsDisplay = document.getElementById('steps');const startButton = document.getElementById('startButton');const resetButton = document.getElementById('resetButton');function createMaze() {mazeContainer.innerHTML = ''; // 清空迷宫maze.forEach((row, i) => {row.forEach((cell, j) => {const cellDiv = document.createElement('div');cellDiv.classList.add('cell');if (cell === 1) {cellDiv.classList.add('wall');}if (i === 0 && j === 0) {cellDiv.classList.add('start');}if (i === maze.length - 1 && j === maze[0].length - 1) {cellDiv.classList.add('end');}mazeContainer.appendChild(cellDiv);});});}function findPaths() {const paths = [];const visited = new Set();const directions = [[1, 0], [0, 1], [-1, 0], [0, -1]]; // 下、右、上、左function dfs(x, y, path) {if (x < 0 || y < 0 || x >= maze.length || y >= maze[0].length || maze[x][y] === 1 || visited.has(`${x},${y}`)) {return;}visited.add(`${x},${y}`);path.push([x, y]);if (x === maze.length - 1 && y === maze[0].length - 1) {paths.push([...path]);if (paths.length >= 3) return; // 找到三条路径后停止}for (const [dx, dy] of directions) {dfs(x + dx, y + dy, path);}path.pop();visited.delete(`${x},${y}`);}dfs(0, 0, []);return paths;}function animatePaths(paths) {paths.forEach((path, pathIndex) => {const pathLength = path.length;stepsDisplay.innerHTML += `路径 ${pathIndex + 1} 步数: ${pathLength}<br>`; // 显示步数path.forEach((position, index) => {setTimeout(() => {const [x, y] = position;const cell = mazeContainer.children[x * maze[0].length + y];cell.classList.add(`path${pathIndex + 1}`); // 根据路径索引设置不同的颜色}, index * 500 + pathIndex * 5000); // 不同路径之间的延迟});});// 显示返回按钮setTimeout(() => {resetButton.style.display = 'inline-block';}, paths.length * 5000);}startButton.addEventListener('click', () => {const paths = findPaths();stepsDisplay.innerHTML = ''; // 清空之前的显示animatePaths(paths);startButton.style.display = 'none'; // 隐藏开始按钮resetButton.style.display = 'none'; // 隐藏返回按钮});resetButton.addEventListener('click', () => {createMaze();stepsDisplay.innerHTML = ''; // 清空步数显示startButton.style.display = 'inline-block'; // 显示开始按钮resetButton.style.display = 'none'; // 隐藏返回按钮});createMaze();</script>
</body>
</html>
