使用寻路算法写的一个小项目
Posted 飞尽堂前燕
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用寻路算法写的一个小项目相关的知识，希望对你有一定的参考价值。
用寻路算法写的一个小项目
地址
https://a1115040996.github.io/arithmetic/html/寻路应用.html
没来得及仔细优化，后面再优化
代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/way-finding.css"/> </head> <body> <ul id="ul-table"> </ul> <script src="../js/plugin/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /************************************* * 估价函数 * f(n) = g(n) + h(n) * g(n) 起始点距离目标点的距离 * h(n) 结束点距离目标点的距离 * f(n) 估价 最小距离为最优解决方案 * * * 创建矩阵 * 1. 起点 * 2. 终点 * 3. 障碍 * 4. 移动路径 **************************************/ var sizeGrid = 25;// 点的长宽 var startLocation;// 起点 var endLocation;// 终点 var openArr = [];// 开始点 var closeArr = [];// 结束点结果 var rocksArr = []; //障碍物 var canClose = true; // 是否已经找到路径 var mList = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,3,3,0,0,0,0,3,0,0,0,0,3,3,0,0,0,0, 0,0,0,1,3,0,0,0,0,3,0,0,0,0,3,3,0,0,0,0, 0,0,0,0,3,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0, 0,0,0,3,3,3,0,0,0,3,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,3,0,0,0,3,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,3,3,0,0,0,3,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,3,0,3,3,3,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,3,0,3,0,0,0,0,0,0,0,0, 0,0,0,3,3,3,3,3,3,3,0,3,3,3,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] function createList(list){ $("#ul-table").width(sizeGrid*20+1+1) var fragment = document.createDocumentFragment() for (var i=0;len = list.length,i<len;i++) { var _li = $(‘<li uid=‘+(i+1)+‘ x=‘+(i % 20 + 1)+‘ y=‘+(Math.floor(i / 20)+1)+‘></li>‘).css({‘width‘: sizeGrid,‘height‘:sizeGrid}) if(list[i] === 1){ // 起始点 startLocation = _li openArr.push(_li) _li.addClass(‘start‘) }else if(list[i] === 2){ // 结束点 endLocation = _li _li.addClass(‘end‘) //closeArr.push(_li) }else if(list[i] === 3){ // 障碍 closeArr.push(_li) rocksArr.push(_li) _li.addClass(‘remora‘) }else if(list[i] === 4){ // 移动点 _li.addClass(‘move‘) } fragment.appendChild(_li[0]) } return fragment } $("#ul-table").append(createList(mList)) // 寻迹算法 function f(nodeGrid){ return g(nodeGrid) + h(nodeGrid) } // 目标点 距离起始点的距离 function g(nodeGrid){ var a = nodeGrid.offset().left - startLocation.offset().left var b = nodeGrid.offset().top - startLocation.offset().top return Math.sqrt(a*a + b*b) } // 目标点距离结束点的距离 function h(nodeGrid){ var a = nodeGrid.offset().left - endLocation.offset().left var b = nodeGrid.offset().top - endLocation.offset().top return Math.sqrt(a*a + b*b) } // 获取可能的落脚点 function findNextStepList(){ var result = [];// 存储结果集 var preStep = openArr.shift() var startX = +preStep.attr(‘x‘) var startY = +preStep.attr(‘y‘) closeArr.push(preStep) getPossibleGrid(startX, startY) // 获取可能的落脚点 function getPossibleGrid(x,y){ var _startX = (x-1) > 1 ? (x-1) : x; var _startY = (y-1) > 1 ? (y-1) : y; var _endX = (x+1) <= 20 ? (x+1) : x; var _endY = (y+1) <= 20 ? (y+1) : y; for(var i=_startX;i<=_endX;i++){ for (var j=_startY;j<=_endY;j++) { if(!(i===startX&&j===startY)){ if(locationFilter(i,j)){ console.log() $(‘li[x=‘+i+‘][y=‘+j+‘]‘)[0].par = preStep $(‘li[x=‘+i+‘][y=‘+j+‘]‘)[0].distance = f($(‘li[x=‘+i+‘][y=‘+j+‘]‘)) openArr.push($(‘li[x=‘+i+‘][y=‘+j+‘]‘)) if(endLocation.attr(‘x‘)==i&&endLocation.attr(‘y‘)==j){ canClose = false } } } } } // 排序 openArr.sort(function(v1, v2){ return v1[0].distance - v2[0].distance }) // 从数据中去除关闭的 和 已经设置父级指针的 function locationFilter(x,y){ for (var i=0;i<closeArr.length;i++) { if(+closeArr[i].attr(‘x‘) === x && +closeArr[i].attr(‘y‘) === y){ return false } } for (var i=0;i<openArr.length;i++) { if(+openArr[i].attr(‘x‘) === x && +openArr[i].attr(‘y‘) === y){ return false } } return true } } } // 寻路 function findLocationLoop(){ while(canClose){ findNextStepList() } } function getRecallLocation(){ var result = [] function getRecall(dom){ if($(dom).attr(‘x‘)==startLocation.attr(‘x‘)&&$(dom).attr(‘y‘)==startLocation.attr(‘y‘)){ return result }else{ result.push(dom) getRecall(dom[0].par) } } getRecall(closeArr.pop()) return result } //findLocationLoop() /*$("#startFind").click(function(){ findLocationLoop() var result = getRecallLocation() result.forEach(function(v,i){ v.addClass(‘move‘) }) }) */ $("li").click(function(){ if(this.className!==‘remora‘){ $("li").removeClass(‘end‘).removeClass(‘move‘) $(this).addClass(‘end‘) endLocation = $("li[uid="+($(this).index()+1)+"]") openArr = [startLocation] closeArr = [...rocksArr] canClose = true findLocationLoop() console.log(openArr) var result = getRecallLocation().reverse() result.push(endLocation) console.log(result) result.forEach(function(v,i){ var timer = setTimeout(function(){ $("li").removeClass(‘start‘) v.addClass(‘start‘) if(i>=result.length-1){ startLocation = v $("li.end").removeClass(‘end‘) } },120*i) }) } }) </script> </body> </html>
以上是关于使用寻路算法写的一个小项目的主要内容，如果未能解决你的问题，请参考以下文章