0
I’m taking a test of pathfinding in jquery with JS, and gave a strong empacada. I searched several places, but I’m not able to reason how to start reading the "neighbors" to make a line between the "Origin" (square where the user clicks) and the destination (square[14,15])
I can even get the area mapped, but I don’t understand how to "probe the neighbors" to know the best way.
Here comes the code:
//ASTAR.JS
// function that builds a grid in the "container"
function createGrid(x) {
for (var rows = 0; rows < x; rows++) {
for (var columns = 0; columns < x; columns++) {
$("#container").append("<div class='grid' id='"+rows+"_"+columns+"' onClick='createAStar("+rows+","+columns+")' nodevalue='1'></div>");
};
};
$(".grid").width(320/x);
$(".grid").height(320/x);
$("#14_15").css("background-color", "blue");
$("#14_15").remove("onClick");
$("#14_15").css("cursor", "default" );
};
// function that prompts the user to select the number of boxes in a new grid
// the function then also creates that new grid
// create a 16x16 grid when the page loads
// creates a hover effect that changes the color of a square to black when the mouse passes over it, leaving a (pixel) trail through the grid
// allows the click of a button to prompt the user to create a new grid
$(document).ready(function() {
createGrid(16);
});
function createAStar(xis, yps){
var goalX = 14;
var goalY = 15;
//var dx = Math.abs(goalX - xis);
//var dy = Math.abs(goalY - xis);
//var distancia = Math.abs(dx+dy);
//alert(distancia);
//analisa_vizinhos();
for (ix = xis; ix <= goalX; ix++ ){
for (iy = yps; iy <= goalY; iy++ ){
$("#"+ix+"_"+iy).css("background-color","yellow");
}
}
}/* ESTILO.CSS */
body{
}
#container {
position: relative;
top: 30px;
outline:2px solid #000;
font-size: 0;
margin:auto;
height:320px;
width:320px;
padding: 0;
border: none;
}
.grid{
/*width: 10px;
height: 10px;
background-color: #cccccc;
border: solid thin black;*/
margin:0;
padding:0;
border:none;
outline:1px solid #000;
display:inline-block;
cursor: pointer;
}
.node{
}
.neighbor{
}
.current{
}
.closed{
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script><script type="text/javascript" src="astar.js"></script>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="container"></div>
</body>
</html>
Try to explain better with clearer examples. This way it became complicated to know the problem. What would be
quadrado[14,15]?– Sam
I set the square [14.15] as the END point. The idea is for the user to click on a square and JS to calculate the smallest path to the END point
– RPG Deivid Pacheco
You want to create a straight line from one square to another?
– Sam
not necessarily straight, it depends on where the guy clicks, like this: https://www.redblobgames.com/pathfinding/a-star/introduction.html
– RPG Deivid Pacheco