javascript实现A*算法

html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="astar.css">
 7 </head>
 8 <body>
 9    <ul id="ul1"></ul>
10    <input type="button" id="input1" value="开始寻路">
11 </body>
12 <script type="text/javascript" src="astar.js"></script>
13 </html>

css

 1 *{
 2     margin:0;
 3     padding:0;
 4 }
 5 #ul1{
 6     height: auto;
 7     overflow: hidden;
 8     border: 1px solid #000;
 9     border-bottom: none;
10     border-right: none;
11     margin:20px auto;
12 }
13 #ul1 li {
14     border: 1px solid #000;
15     border-top: none;
16     border-left: none;
17     float: left;
18 }
19 li{
20     list-style: none;
21 }
22 #input1{
23     width: 100px;
24     position: absolute;
25     left: 50%;
26     margin-left: -50px;
27 }
28 .sty1{
29     background: red;
30 }
31 .sty2{
32     background: green;
33 }
34 .sty3{
35     background: blue;
36 }

  1 var oUl = document.getElementById("ul1");
  2 var aLi =oUl.getElementsByTagName("li");
  3 var btn =  document.getElementById("input1");
  4 var beginLi = document.getElementsByClassName("sty1");
  5 var endLi = document.getElementsByClassName("sty2");
  6 var map = [
  7     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
  8     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
  9     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 10     0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 11     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 12     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 13     0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,
 14     0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,
 15     0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,
 16     0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,
 17     0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,
 18     0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,
 19     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 20     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 21     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,
 22     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 23     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 24     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 25     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 26     0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
 27 ];
 28 var cols = Math.sqrt(map.length);
 29 var size = 20;
 30 var openArr=[];
 31 var closeArr=[];
 32 
 33 
 34 
 35 init();
 36 function init(){
 37     createMap();
 38     btn.onclick = function(){
 39         openFn();
 40     }
 41     
 42 }
 43 function createMap(){
 44     oUl.style.width = cols *(size+1)+1+"px";
 45     for(var i=0;i<map.length;i++){
 46         var oLi = document.createElement("li");
 47         oLi.style.width=size+"px";
 48         oLi.style.height=size+"px";
 49         oUl.appendChild(oLi);
 50         if(map[i] == 1){
 51             oLi.className="sty1";
 52             openArr.push(oLi);
 53         }else if(map[i] == 2){
 54             oLi.className="sty2";
 55         }else if(map[i] == 3){
 56             oLi.className="sty3";
 57             closeArr.push(oLi);
 58         }
 59     }
 60 }
 61 function openFn(){
 62     var nowLi = openArr.shift();
 63     if(nowLi == endLi[0]){
 64         showLine();
 65         return;
 66     }
 67     closeFn(nowLi);
 68     findLi(nowLi);
 69     openArr.sort(function(li1,li2){
 70         return li1.num-li2.num;
 71     });
 72     openFn();
 73     console.log(openArr);
 74 }
 75 
 76 function closeFn(nowLi){
 77     closeArr.push(nowLi);
 78 }
 79 function findLi(nowLi){
 80     var result=[];
 81     for(var i=0;i<aLi.length;i++){
 82         if(filter(aLi[i])){
 83            result.push(aLi[i]);
 84         }
 85     }
 86     function filter(li){
 87        for(var i=0;i<closeArr.length;i++){
 88               if(closeArr[i] == li){
 89                     return false;
 90               }
 91        }
 92        for(var i=0;i<openArr.length;i++){
 93               if(openArr[i] == li){
 94                  return false;
 95               }
 96        }
 97        return true;
 98     }
 99     for(var i=0;i<result.length;i++){
100         if((Math.abs(nowLi.offsetLeft-result[i].offsetLeft)<=(size+1))&&(Math.abs(nowLi.offsetTop-result[i].offsetTop)<=(size+1))){
101             result[i].num = f(result[i]);
102             result[i].parent = nowLi;
103             openArr.push(result[i]);
104         }
105     }
106 }
107 function showLine(){
108     var result =[];
109     var iNow=0;
110     var lastLi = closeArr.pop();
111     findParent(lastLi);
112     function findParent(li){
113         result.unshift(li);
114         if(li.parent == beginLi[0]){
115             return;
116         }
117         findParent(li.parent);
118     }
119     var timer=setInterval(function(){
120         result[iNow].style.background="red";
121         iNow++;
122         if(iNow == result.length){
123             clearInterval(timer);
124         }
125     },500);
126 }
127 function f(nodeLi){
128     return g(nodeLi)+h(nodeLi);
129 }
130 function g(nodeLi){
131    var a = beginLi[0].offsetLeft-nodeLi.offsetLeft;
132    var b = beginLi[0].offsetTop - nodeLi.offsetTop;
133    return Math.sqrt(a*a + b*b);
134 }
135 function h(nodeLi){
136    var a = endLi[0].offsetLeft-nodeLi.offsetLeft;
137    var b = endLi[0].offsetTop - nodeLi.offsetTop;
138    return Math.sqrt(a*a + b*b);
139 }

posted on 2017-03-22 20:13 syhbb 阅读(224) 评论(0) 收藏举报