# JS pathfinding algorithm

Source: Internet
Author: User
Tags abs

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;

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

Related Keywords:

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

## A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

• #### Sales Support

1 on 1 presale consultation

• #### After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

• Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.