Question

当我在 Webstorm 中运行它时，labeledMap 和 map 彼此相等，这打破了我的 paintCanvas(); 这是一个长镜头，我的代码很乱，因为我已经调试了几个小时，需要帮助。代码如下：

我正在尝试创建寻路算法。数组“map”表示只包含整数的数组，表示数组的每个点是否代表墙/起点/终点/路径，labeledMap将墙/起点/终点转换为字符串，因此路径可以用从一开始就到达那里所需的步骤数。这样，我可以使用labeledMap 找到到达终点的最短路线。这可能不是最有效的方法，但这只是我试验算法的方式。但是当我运行程序时，labeledMap 都转换为字符串，这让我很困惑，因为我从未提到它这样做。

Javascript：

const ctx = canvas.getContext('2d');

const cellSize = 10;
const wallPercent = 35;
const colors = ["#FFFFFF", "#283747", "#1ABC9C", "#E74C3C", "#3498DB", "#F7DC6F"]

var map = [];
var labeledMap = []

var start = [];
var end = [];

function setupArray(){

    var table = []
    var row = []

    for(i = 0; i < canvas.height/cellSize; i++){
        for(j = 0; j < canvas.width/cellSize; j++){
            if(Math.trunc(Math.random()*100) < wallPercent){
                row.push(1);
            } else{
                row.push(0);
            }
        }
        table.push(row);
        row = []
    }

    return table;
}

function selectPoints(){

    let startX = Math.floor(Math.random()*map.length);
    let startY = Math.floor(Math.random()*map[0].length);
    let endX = Math.floor(Math.random()*map.length);
    let endY = Math.floor(Math.random()*map[0].length);

    if(map[startX][startY] === 0 && map[endX][endY] === 0){
        map[startX][startY] = 2;
        map[endX][endY] = 3;
    } else {
        selectPoints();
    }
}

function paintCanvas(){
    ctx.beginPath();
    for(let i = 0; i < map.length; i++){
        for(let j = 0; j < map[0].length; j++){
            ctx.fillStyle = colors[map[i][j]]
            ctx.fillRect(j*cellSize, i*cellSize, cellSize, cellSize);
            ctx.fill();
        }
    }
}

function dijkstraAlgorithm(){
    var parsedLocations = [];
    var iterationCount = 0;
    labeledMap = map;

    for(let i = 0; i < map.length; i++){
        for(let j = 0; j < map[0].length; j++){
            if(map[i][j] === 1){
                labeledMap[i][j] = "wall"
            } else if(map[i][j] === 2){
                labeledMap[i][j] = "start"
                start.push(i);
                start.push(j)
            } else if(map[i][j] === 3){
                labeledMap[i][j] = "end"
                end.push(i);
                end.push(j);
            } else {
                labeledMap[i][j] = 0;
            }
        }
    }

    console.log(map, labeledMap)

    parsedLocations.push([0, start[0], start[1]]);

    setInterval(function(){
        iterationCount += 1;
        for(let i = 0; i < parsedLocations.length; i++){
            if(parsedLocations[i][0] === iterationCount - 1){
                map[parsedLocations[i][1] + 1][parsedLocations[i][2]] = 4;
                map[parsedLocations[i][1] - 1][parsedLocations[i][2]] = 4;
                map[parsedLocations[i][1]][parsedLocations[i][2] + 1] = 4;
                map[parsedLocations[i][1]][parsedLocations[i][2] - 1] = 4;

                console.log(map, labeledMap)
            }
            paintCanvas();
        }
    }, 250)

}

function initialize(){
    map = setupArray();
    selectPoints();
    paintCanvas();

    dijkstraAlgorithm();
}

initialize()

HTML：

<html>
<head>
    <title>Pathfinding</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
    <!--<div id="navbar">
        <div id="algorithms-navbar">
            <button id="algorithms-header">Pathfinding <span><img src="https://www.flaticon.com/svg/vstatic/svg/25/25243.svg?token=exp=1619464904~hmac=16f5273099cf29e2ef39d65ee1bdf395" alt="Dropdown" class="algorithm-dropdown"></span></button>
            <div id="algorithms-body" class="inactive">
                <button id="astar-algorithm" class="pathfinding-active">A* Algorithm</button>
            </div>
        </div>
    </div>-->
    <canvas id="canvas"></canvas>
    <button onclick="initialize()" id="rerunBtn">Rerun</button>
    <script src="js/SetupCanvas.js"></script>
</body>
</html>

LabeledMap 和 Map 彼此相等

0 个答案: