Article Directory
Picture presentation
The interface is really ugly
Input format maze: passage; 0 wall; separated by spaces between a number; each row -spaced
Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
html {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
}
div#content {
display: inline-block;
border: 1px solid black;
position: relative;
}
div#content .child {
box-sizing: border-box;
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid black;
}
div.wall {
background-color: #362E3D;
}
div#position {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #362E3D;
left: 40px;
top: 40px;
}
</style>
</head>
<body>
<div id="content">
<div id="position" style="left: 40px;top: 40px;"></div>
</div>
<script>
let map = reLoad(), // 地图录入
re = [], // 标记
road = [], // 路径
count = 0;
let m = map[0].length, //列
n = map.length; // 行
for (let i = 0; i < n; i++) {
let newarr = [];
for (let j = 0; j < m; j++) {
newarr.push(0);
}
re.push(newarr);
}
document.getElementById('content').style.width = m * 100 + "px";
for (let i = 0; i < n; i++) {
for (let j = 0; j < m; j++) {
let div = document.createElement('div');
div.className = 'child';
if (map[i][j] == 0)
div.className += ' wall';
document.getElementById('content').appendChild(div);
}
}
function dfs(x, y) {
if (x < 0 || x > n - 1 || y < 0 || y > m - 1 || re[x][y] == 1 || map[x][y] == 0) return 0; //走出界外或之前走过或遇到障碍
count++;
if (arguments[2])
road.push(arguments[2]);
if (x == n - 1 && y == m - 1) {
recallMark(arguments[2]);
return 1; //走到终点
}
re[x][y] = 1; //该点标记为走过
dfs(x - 1, y, 'top'); //向上走
dfs(x, y + 1, 'right'); //向右走
dfs(x + 1, y, 'down'); //向下走
dfs(x, y - 1, 'left'); //向左走
if (!(x == 0 && y == 0)) // 最后一次回溯在起点不记录
recallMark(arguments[2]); // 记录回溯路径
re[x][y] = 0; //该点还原为没有走过
}
function recallMark(act) {
switch (act) {
case 'top':
act = 'down';
break;
case 'right':
act = 'left';
break;
case 'down':
act = 'top';
break;
case 'left':
act = 'right';
break;
}
road.push(act);
}
function reLoad() {
let str = prompt("输入地图 用-间隔");
let arr = str.split('-');
let map = [];
for (let i = 0; i < arr.length; i++) {
map.push(arr[i].trim().split(' ').map(Number));
}
return map; // 返回二维数组
}
function draw() {
let div = document.getElementsByClassName('child');
let pos = document.getElementById('position');
let i = 0,
flag = 1;
let timer = setInterval(() => {
if (road[i] == 'right') {
pos.style.left = parseInt(pos.style.left) + 100 + 'px';
}
if (road[i] == 'down') {
pos.style.top = parseInt(pos.style.top) + 100 + 'px';
}
if (road[i] == 'left') {
pos.style.left = parseInt(pos.style.left) - 100 + 'px';
}
if (road[i] == 'top') {
pos.style.top = parseInt(pos.style.top) - 100 + 'px';
}
i++;
if (i == road.length + 1) {
clearInterval(timer);
}
}, 500, i, pos);
}
dfs(0, 0);
draw();
</script>
</body>
</html>
Partial explanation
1. dfs() search route
Algorithm core: deep search to achieve maze search
function dfs(x, y) {
if (x < 0 || x > n - 1 || y < 0 || y > m - 1 || re[x][y] == 1 || map[x][y] == 0) return 0; //走出界外或之前走过或遇到障碍
if (arguments[2])// 排除从头开始，第一次没有第三个参数
road.push(arguments[2]); // 记录路径
if (x == n - 1 && y == m - 1) {
recallMark(arguments[2]); // 会return，提前记录路径
return 1; //走到终点
}
re[x][y] = 1; //该点标记为走过
dfs(x - 1, y, 'top'); //向上走
dfs(x, y + 1, 'right'); //向右走
dfs(x + 1, y, 'down'); //向下走
dfs(x, y - 1, 'left'); //向左走
if (!(x == 0 && y == 0)) // 最后一次回溯在起点不记录
recallMark(arguments[2]); // 记录回溯路径
re[x][y] = 0; //该点还原为没有走过
}
The order is upper right, lower left, because js single thread does not have sleep, so all results are recorded first (in order to facilitate storage each time the third string parameter is passed to dfs to represent the direction), and then the results are used for drawing.
Road traveling direction with an array of records, while the opposite back within dfs parameters, with recallMarkfunction of the reverse direction recording and then stored into the array road
2. reLoad() read the maze
function reLoad() {
let str = prompt("输入地图 用-间隔");
let arr = str.split('-');
let map = [];
for (let i = 0; i < arr.length; i++) {
map.push(arr[i].trim().split(' ').map(Number));
}
return map; // 返回二维数组
}
The string obtained by prompt is stored in str, and then spliteach row array arr is divided by the string method . Each item of arr is a row of numbers in the maze with spaces, and then each item of arr (which is a string) is traversed, and the string trimmethod is removed Close the space, and then splitdivide each digit of map(Number)the string into one item of the new array, turn the string into a number, and finally push into the map array, and push each item of the array into another array is a two-dimensional array, above.