以深度优先搜索算法完成迷宫寻路，超简单！！！

yhw52066

于 2024-09-15 20:02:53 发布

阅读量517

点赞数 13

文章标签：深度优先算法 python html5

本文链接：https://blog.csdn.net/yhw52066/article/details/142287794

版权

前言：

‌‌深度优先搜索算法（Depth-First Search, ‌DFS）是一种用于遍历或搜索树或‌图的算法。‌ 它沿着树的深度遍历树的节点，尽可能深的搜索树的分支。当节点v的所有边都已被探寻过，或者节点不满足条件时，搜索将回溯到发现节点v的那条边的起始节点。整个进程反复进行，直到所有节点都被访问为止。‌

思路：

创建一个二维数组来表示迷宫，并初始化一个同样大小的二维数组来记录已经访问过的位置。
在迷宫的起点位置开始进行递归搜索。

a. 首先判断当前位置是否是终点。如果是，说明已经找到了一条路径，返回True。 b. 否则，将当前位置标记为已访问，并继续向上、下、左、右四个方向进行递归搜索。 c. 对于每个邻居位置，如果位置合法且未被访问过，并且该位置不是墙壁，则递归搜索该位置。 d. 如果在四个方向上都没有找到路径，则返回False。
在主函数中调用深度优先搜索算法，并根据返回值判断是否成功找到了一条路径。
如果找到了路径，可以根据已访问的记录数组来回溯并打印路径。
如果没有找到路径，则输出提示信息。

代码实现：

ai.py

def dfs_maze(maze, start, end):
    # 走过位置的列表 visited
    visited = []
    current = start
    visited.append(current)

    # 正确路径的列表 path
    path = []
    path.append(current)

    while True:
         # 判断是否到达终点
        if current == end:
            # 返回正确路径列表
            return path
            
        # 获取当前位置行列
        row = current[0]
        col = current[1]

        # 判断上方通路和是否走过
        if maze[row - 1][col] == 1 and [row - 1, col] not in visited:
            current = [row - 1, col]
            visited.append(current)
            path.append(current)

        # 判断下方通路和是否走过
        elif maze[row + 1][col] == 1 and [row + 1, col] not in visited:
            current = [row + 1, col]
            visited.append(current)
            path.append(current)

        # 判断左方通路和是否走过
        elif maze[row][col - 1] == 1 and [row, col - 1] not in visited:
            current = [row, col - 1]
            visited.append(current)
            path.append(current)

        # 判断右方通路和是否走过
        elif maze[row][col + 1] == 1 and [row, col + 1] not in visited:
            current = [row, col + 1]
            visited.append(current)
            path.append(current)

        else:
            # 删除错误位置（列表最后一个）
            path.pop()
            # 更新当前位置 （删除错误位置后，当前位置设置为列表最后位置）
            current = path[-1]

main_app.py

from flask import Flask, render_template, request, jsonify
from flask_cors import CORS
from ai import *

app = Flask(__name__)
CORS(app)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/api/path/', methods=['POST'])
def find_path():
    """返回迷宫出路坐标列表"""
    maze = request.form.get('maze')
    start = request.form.get('start')
    end = request.form.get('end')

    maze = eval(maze)
    start = eval(start)
    end = eval(end)

    paths = dfs_maze(maze, start, end)

    return jsonify(paths)


app.run(port=8000)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迷宫寻路</title>
    <link rel="stylesheet" href="../static/css/style.css">
</head>
<body>
    <div id="w">
        <div class="paper">
            <div class="title">
                <img src="../static/images/title.png" alt="">
            </div>


            <div class="maze">
                
                    <canvas id="canvas" width="500" height="500"></canvas>

                    <div class="btn-w">
                        <img src="../static/images/start.png" alt="" id="btn">
                        <img src="../static/images/help.png" alt="" id="help">
                    </div>
                    
                
            </div>
        </div>
        <div id="cover">
            <img src="../static/images/success.png" alt="">
        </div>
    </div>



    <script src="../static/js/axios.js"></script>
    <script src="../static/js/generate.js"></script>
    <script src="../static/js/index.js"></script>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
}

#w {
    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    min-width: 1200px;
    padding-top: 30px;
    box-sizing:border-box;
}

.paper{
    background-image:url(../images/bg-paper.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1200px;
    height: 700px;
    margin: 0 auto;
    position: relative;
}

.title {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 10px;
}

.title img {
    width: 300px;
    
}

.cover{
    text-align: center;
    background-color: yellow;

}

.maze{
    text-align: center;


}

.btn-w{
    /* background-color: red; */
    width: 200px;
    height: 100px;
    position: absolute;

    bottom: 100px;
    right: 120px;
    text-align: center;
}

#btn {
    width: 200px;
    
}

#help{
    width: 110px;
    display: none;
}



#cover{
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    box-sizing:border-box;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    padding: 100px;
    display: none;
}

#cover img{
    width: 600px;
}

由于js代码过多，有需要的可以找我私信！