F () =g () +h (); G is the distance from each node to the starting point; H is the distance from each node to the end point. Two distances are calculated by the Pythagorean theorem;
The basic explanations and comments for the following code are available. Do not know can leave a message oh
Css
<style> ul{List-style:NoneMargin0;Padding0;Border1px solid #f5f5f5;Border-right:NoneBorder-bottom: none; margin: 100px auto;} ul li{ float: left ; border: solid 1px #f5f5f5; border-left: none; border-top: None ; display: inline-block; background: black;} . start{ background: Skyblue;} . end{ background: Green;} . usual{ background: Pink;} </style>
Html
<body> <id= "map-ul"></ul<id= "btn" type = "button" value/></body>
Js
<script>var Oul = document.getElementById ("Map-ul");var startbtn = document.getElementById ("btn");var li = oul.getelementsbytagname ("li");var Beginli = Document.getelementsbyclassname ("Start");var Endli = Document.getelementsbyclassname ("End");var map =[1,1,1,1,1,1,1,1,1,1,//0 is the starting point; 2 is an obstacle and 3 is the end point 1,1,0,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,2,2,2,1,1, 1,1,1,1,1,2,1,1,1,1, 1,1,1,1,1,2,1,1,1,1, 1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1,3, 1,1,1,1,1,1,1,1,1,1];var openarr = [];//A route that might have to govar closearr = [];//Routes that have been closedvar cols =MATH.SQRT (Map.length)var sizebox = 20;//InitializationInit ()functionInit () {creatmap ();//Initialize Map Startbtn.onclick =function() {OPENFN ();}}functionCreatmap () {oUl.style.width = cols * (Sizebox + 1) + 1 + "px"; OUl.style.height = cols * (Sizebox + 1) + 1 + "px";for (var i=0;i<map.length;i++) {var oLi = document.createelement ("li"); OLi.style.width = Sizebox + "px"; OLi.style.height = Sizebox + "px"; Oul.appendchild (OLi)if (map[i] = = 2) {oli.classname = "usual"Closearr.push (OLi)//Obstacle added to Closed line}Elseif (map[i] = = 0) {Oli.classname = "start"Openarr.push (OLi)//Add the starting point to the line you want to go to}Elseif (map[i] = = 3) {oli.classname = "End"} } }function f (nodeli) {//Nodeli each Li nodereturn g (Nodeli) + H (Nodeli);//G is the distance from the node to the initial position, and H is the distance from the node to the end position.}functionG (Nodeli) {//The Pythagorean theorem calculates the distancevar x = beginli[0].offsetleft-Nodeli.offsetleft;var y = beginli[0].offsettop-Nodeli.offsettop;Return Math.sqrt (x*x+y*y); }functionH (Nodeli) {var x = endli[0].offsetleft-Nodeli.offsetleft;var y = endli[0].offsettop-Nodeli.offsettop;Return Math.sqrt (x*x+y*y); }functionOpenfn () {//Take the starting position as the first Li that may govar Nowli =Openarr.shift ();if (Nowli = = Endli[0]) {showline ();Return; } closefn (Nowli);//Add the found node to the closed route Findli (NOWLI);//Looking for a possible Li Openarr.sort around the first Li (function (LI1,LI2) {//The line will probably go to the node through the distance from the bottom to the large sort. When the next cycle comes, you can get the last node directly,Return Li1.num-Li2.num; }) Openfn (); }functionFindli (Nowli) {var result = [];//All the routes that have not been traversed. Remove the route that exists in the Closearrfor (var i=0;i<li.length;i++) {If(Filter (Li[i])) {Result.push (Li[i])}}function Filter (Li) {//Add to queue if not in Closearrfor (var i=0;i<closearr.length;i++) {if (closearr[i] = =Li) {ReturnFalse; } }for (var i=0;i<openarr.length;i++) {if (openarr[i] = =Li) {ReturnFalse; } }ReturnTrue; }//Find nodes in 8 directions adjacent to the current node in all the nodes that have not been traversedForvar i=0;i<result.length;i++){if (Math.Abs (nowli.offsetleft-result[i].offsetleft) <=21&&math.abs (Nowli.offsettop-result[i]. OFFSETTOP) <=21) {Result[i].num =F (Result[i]); Result[i].parent = Nowli;//Set pointerOpenarr.push (Result[i])}}}function ShowLine () {var result = []; Span data-mce-= "" >var lastli = Closearr.pop (); var Inow = 0function Findparent (LI) {result.unshift (LI); if (li.parent = = Beginli[0]) {return;} Findparent (li.parent); // recursion by pointer Console.log (li.parent)} for (var i=0;i<result.length;i++; }} function Closefn (nowli) {Closearr.push (nowli);} </script>
JS pathfinding algorithm
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
