I'm doing a pathfinding test in jquery with JS, and gave a strong wrap. I looked for several places, but I can not 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])
Icanevengettheareamapped,butIdonotunderstandhowto"probe the neighbors" to know the best way.
Here'sthecode:
//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>