P5.js路径查找算法尝试演示动画

A Star Path Finding，在这么复杂的路况下，人眼几乎无法找出结果，人工智能才行。

html5, maze

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2699
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/**

Watch a path get plotted from a random start position to a random end position

**/

var cellSize = 8;
var w = window.innerWidth;
var h = window.innerHeight;
var cols = Math.floor(w / cellSize);
var rows = Math.floor(h / cellSize);
var gridWidth = w;
var gridHeight = h;
var grid = [];
var chanceOfWalls = 0.3;
var intervalTime = 1 / 60;

var openNodes = [];
var closedNodes = [];
var start = null;
var end = null;
var path = [];

function setup() {

createCanvas(gridWidth, gridHeight);
    reset();
    setInterval(onUpdate, intervalTime);
}

function restart() {
    setTimeout(reset, 2000);
}

function reset() {

openNodes = [];
    closedNodes = [];

//Build navigation grid
    for (var i = 0; i < cols; i++) {
        for (var j = 0; j < rows; j++) {
            if (grid[i] == null)
                grid[i] = [];

grid[i][j] = new Node(i, j);
        }
    }

//find neighbours
    for (var i = 0; i < cols; i++) {
        for (var j = 0; j < rows; j++) {
            grid[i][j].addNeighbours(grid);
        }
    }

start = getRandomCell();
    start.wall = false;

end = getRandomCell();
    end.wall = false;

openNodes.push(start);
}

function getRandomCell() {
    return grid[Math.floor(Math.random() * cols)][Math.floor(Math.random() * rows)];
}

function heuristic(a, b) {

//find the manhatten distance (best for grids)
    // var d = abs(a.x-b.x) + abs(a.y-b.y);

//euclidean - find the direct distance
    var d = dist(a.x, a.y, b.x, b.y);
    return d;
}

function onUpdate() {

if (openNodes.length > 0) {

//find the lowest f in open nodes
        var lowestF = 0;
        for (var i = 0; i < openNodes.length; i++) {
            if (openNodes[i].f < openNodes[lowestF].f) {
                lowestF = i;
            }

if (openNodes[i].f == openNodes[lowestF].f) {
                if (openNodes[i].g > openNodes[lowestF].g) {
                    lowestF = i;
                }
            }
        }
        var current = openNodes[lowestF];

if (current === end) {
            //reached the end node so wait a sec and restart
            restart();
            return;
        }

//calculate path
        path = [];
        var temp = current;
        while (temp.previous) {
            path.push(temp.previous);
            temp = temp.previous;
        }

openNodes.splice(openNodes.indexOf(current), 1);
        closedNodes.push(current);

//check neighbours
        var neighbours = current.neighbours;
        for (var i = 0; i < neighbours.length; i++) {
            var neighbour = neighbours[i];

if (!closedNodes.includes(neighbour) && !neighbour.wall) {
                var tempG = current.g + heuristic(neighbour, current);

if (!openNodes.includes(neighbour)) {
                    openNodes.push(neighbour);
                } else {
                    continue;
                }

neighbour.g = tempG;
                neighbour.h = heuristic(neighbour, end);
                neighbour.f = neighbour.g + neighbour.h;
                neighbour.previous = current
            }
        }

return;
    } else {
        //no solution so wait a sec and restart
        restart();

return;
    }
}

function draw() {

background(0);

//iterate grid
    for (var i = 0; i < cols; i++) {
        for (var j = 0; j < rows; j++) {
            grid[i][j].show(color(255, 255, 255));
        }
    }

//render open nodes
    for (var i = 0; i < openNodes.length; i++) {
        openNodes[i].show(color(0, 0, 255));
    }

//render closed nodes
    for (var i = 0; i < closedNodes.length; i++) {
        closedNodes[i].show(color(255, 0, 0));
    }

for (var i = 0; i < path.length; i++) {
        path[i].show(color(0, 255, 0));
    }
}

//Node
function Node(x, y) {
    this.f = 0;
    this.h = 0;
    this.g = 0;
    this.x = x;
    this.y = y;
    this.neighbours = [];
    this.previous = null;
    this.wall = false;

if (random(1) < chanceOfWalls) {
        this.wall = true;
    }

this.show = function(c) {
        // var w = gridWidth / cols;
        // var h = gridHeight / rows;

fill(c);
        if (this.wall) {
            fill(0);
        }

if (this === end) {
            fill(color(255, 0, 255)); //end is pink
        }

noStroke();
        rect(this.x * cellSize, this.y * cellSize, cellSize - 1, cellSize - 1);
    }

this.addNeighbours = function(grid) {

var x = this.x;
        var y = this.y;

if (x < cols - 1)
            this.neighbours.push(grid[x + 1][y]);

if (y < rows - 1)
            this.neighbours.push(grid[x][y + 1]);

if (x > 0)
            this.neighbours.push(grid[x - 1][y]);

if (y > 0)
            this.neighbours.push(grid[x][y - 1]);

if (x > 0 && y > 0)
            this.neighbours.push(grid[x - 1][y - 1]);

if (x < cols - 1 && y < rows - 1)
            this.neighbours.push(grid[x + 1][y + 1]);

if (x > 0 && y < rows - 1)
            this.neighbours.push(grid[x - 1][y + 1]);

if (x < cols - 1 && y > 0)
            this.neighbours.push(grid[x + 1][y - 1]);
    }
}

编译

CSS

HTML

A Star Path Finding，在这么复杂的路况下，人眼几乎无法找出结果，人工智能才行。

html5, maze

编辑器支持Emmet

快捷键

A Star Path Finding，在这么复杂的路况下，人眼几乎无法找出结果，人工智能才行。

html5, maze

使用React.js实现的生命游戏算法演示动画

使用HTML5动画演示A*最短路径算法

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：