使用寻路算法写的一个小项目

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>

  

以上是关于使用寻路算法写的一个小项目的主要内容,如果未能解决你的问题,请参考以下文章

寻路开启

自动寻路之A星算法+Qt开发图形界面

算法 & 数据结构——导航网格

游戏的寻路算法

Unity A星(A Star/A*)寻路算法

寻路算法测试工具