f()=g()+h(); //g爲每一個節點到起點得距離;h爲每一個節點到終點得距離。兩個距離經過勾股定理能夠算出;css
如下代碼基本的解釋和註釋都有。不懂得能夠留言哦html
cssnode
<style>
ul{ list-style: none; margin: 0; padding: 0; border: 1px solid #f5f5f5; border-right: none; border-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>
htmlapp
<body> <ul id="map-ul"></ul> <input id="btn" type="button" value="開始" /> </body>
jsspa
<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爲起點;2爲障礙物,3爲終點 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 = [];//可能要走的路線 var closeArr = [];//已經關閉的路線 var cols = Math.sqrt(map.length) var sizeBox = 20; //初始化 init() function init(){ creatMap();//初始化地圖 startBtn.onclick = function(){ openFn(); } } function creatMap(){ 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)//障礙物添加到關閉得線路 } else if(map[i] == 0){ oLi.className = "start" openArr.push(oLi)//起始點添加到要走得線路 }else if(map[i] == 3){ oLi.className = "end" } } } function f(nodeLi){//nodeLi每一個li節點 return g(nodeLi) + h(nodeLi);//g爲節點到初始位置的距離,h爲節點到結束位置的距離 } function g(nodeLi){ //勾股定理算出距離 var x = beginLi[0].offsetLeft - nodeLi.offsetLeft; var y = beginLi[0].offsetTop - nodeLi.offsetTop; return Math.sqrt(x*x+y*y); } function h(nodeLi){ var x = endLi[0].offsetLeft - nodeLi.offsetLeft; var y = endLi[0].offsetTop - nodeLi.offsetTop; return Math.sqrt(x*x+y*y); } function openFn(){ //以起始位置爲可能要走的第一個Li var nowLi = openArr.shift(); if(nowLi == endLi[0]){ showLine(); return; } closeFn(nowLi);//將找過得節點添加到關閉的路線 findLi(nowLi);//尋找第一個Li周圍的可能要走的Li openArr.sort(function(li1,li2){//將可能走得線路得節點經過距離從下到大排序。當下次循環得時候能夠直接拿到上個最近得節點, return li1.num - li2.num; }) openFn(); } function findLi(nowLi){ var result = [];//全部沒走過的路線。去除closeArr裏存在的路線 for (var i=0;i<Li.length;i++) { if( filter(Li[i])){ result.push(Li[i]) } } function filter(Li){//若是closeArr裏沒有就添加到隊列 for (var i=0;i<closeArr.length;i++) { if(closeArr[i] == Li){ return false; } } for (var i=0;i<openArr.length;i++) { if(openArr[i] == Li){ return false; } } return true; } //在全部沒走過的節點找到與當前節點相鄰的8個方向的節點 for(var 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;//設置指針 openArr.push(result[i]) } } } function showLine(){ var result = []; var lastLi = closeArr.pop(); var iNow = 0; findParent(lastLi); function findParent(li){ result.unshift(li); if( li.parent == beginLi[0] ){ return; } findParent(li.parent);//經過指針遞歸 console.log(li.parent) } for (var i=0;i<result.length;i++) { result[i].style.backgroundColor = "plum"; } } function closeFn(nowLi){ closeArr.push(nowLi); } </script>