用JS演示A*算法

于 2019-10-09 15:36:07 发布
阅读量629 收藏 2
点赞数
分类专栏： 算法 JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013605060/article/details/102462232
版权

比如像这样子：

JS代码如下：

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style>
			div {
				position: absolute;
				width: 50px;
				height: 50px;
				margin: 1px 1px;
				background-color: gray;
				border: 1px dashed #cccccc;
			}
			
			body {
				position: relative;
				font-family: "微软雅黑";
			}
			
			header,
			section {
				position: relative;
				margin: 0 auto;
				width: 998px;
			}
		</style>
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>

	<body>
		<section id="main">
			<div colindex="0" rowindex="0" style="top: 5px; left: 5px;"></div>
			<div colindex="0" rowindex="1" style="top: 5px; left: 55px;background: red;">1</div>
			<div colindex="0" rowindex="2" style="top: 5px; left: 105px;"></div>
			<div colindex="0" rowindex="3" style="top: 5px; left: 155px;"></div>
			<div colindex="0" rowindex="4" style="top: 5px; left: 205px;"></div>
			<div colindex="0" rowindex="5" style="top: 5px; left: 255px;"></div>
			<div colindex="1" rowindex="0" style="top: 55px; left: 5px;"></div>
			<div colindex="1" rowindex="1" style="top: 55px; left: 55px;"></div>
			<div colindex="1" rowindex="2" style="top: 55px; left: 105px;"></div>
			<div colindex="1" rowindex="3" style="top: 55px; left: 155px;"></div>
			<div colindex="1" rowindex="4" style="top: 55px; left: 205px;"></div>
			<div colindex="1" rowindex="5" style="top: 55px; left: 255px;"></div>
			<div colindex="2" rowindex="0" style="top: 105px; left: 5px;"></div>
			<div colindex="2" rowindex="1" style="top: 105px; left: 55px;"></div>
			<div colindex="2" rowindex="2" style="top: 105px; left: 105px;"></div>
			<div colindex="2" rowindex="3" style="top: 105px; left: 155px;"></div>
			<div colindex="2" rowindex="4" style="top: 105px; left: 205px;"></div>
			<div colindex="2" rowindex="5" style="top: 105px; left: 255px;"></div>
			<div colindex="3" rowindex="0" style="top: 155px; left: 5px;"></div>
			<div colindex="3" rowindex="1" style="top: 155px; left: 55px;"></div>
			<div colindex="3" rowindex="2" style="top: 155px; left: 105px;"></div>
			<div colindex="3" rowindex="3" style="top: 155px; left: 155px;"></div>
			<div colindex="3" rowindex="4" style="top: 155px; left: 205px;"></div>
			<div colindex="3" rowindex="5" style="top: 155px; left: 255px;"></div>
			<div colindex="4" rowindex="0" style="top: 205px; left: 5px;"></div>
			<div colindex="4" rowindex="1" style="top: 205px; left: 55px;"></div>
			<div colindex="4" rowindex="2" style="top: 205px; left: 105px;"></div>
			<div colindex="4" rowindex="3" style="top: 205px; left: 155px;"></div>
			<div colindex="4" rowindex="4" style="top: 205px; left: 205px;"></div>
			<div colindex="4" rowindex="5" style="top: 205px; left: 255px;"></div>
			<div colindex="5" rowindex="0" style="top: 255px; left: 5px;"></div>
			<div colindex="5" rowindex="1" style="top: 255px; left: 55px;background: red;"></div>
			<div colindex="5" rowindex="2" style="top: 255px; left: 105px;"></div>
			<div colindex="5" rowindex="3" style="top: 255px; left: 155px;"></div>
			<div colindex="5" rowindex="4" style="top: 255px; left: 205px;"></div>
			<div colindex="5" rowindex="5" style="top: 255px; left: 255px;"></div>
		</section>
	</body>
	<script>
		var luxian = searchRoad(0, 1, 5, 1);
		zhixing();

		function zhixing() {
			for(var jj in luxian) {
				console.log(luxian[jj]);
				$("#main div").each(function() {
					if($(this).attr("colindex") == luxian[jj].x && $(this).attr("rowindex") == luxian[jj].y) {
						//$(this).css('background', 'red');
					}
				})
			}

		}

		//其中的MAP.arr是二维数组
		function searchRoad(start_x, start_y, end_x, end_y) {
			var openList = [], //开启列表
				closeList = [], //关闭列表
				obstacleList = [], //障碍列表
				result = [], //结果数组
				result_index; //结果数组在开启列表中的序号

			obstacleList.push({
				x: 2,
				y: 0,
				G: 0
			});
			obstacleList.push({
				x: 2,
				y: 1
			});
			obstacleList.push({
				x: 2,
				y: 2
			});
			obstacleList.push({
				x: 2,
				y: 3
			});
			obstacleList.push({
				x: 2,
				y: 4
			});
			obstacleList.push({
				x: 3,
				y: 5
			});
			
			openList.push({
				x: start_x,
				y: start_y,
				G: 0
			}); //把当前点加入到开启列表中，并且G是0
			$("#main div").each(function() {
				for(var ob in obstacleList) {
					if($(this).attr("colindex") == obstacleList[ob].x && $(this).attr("rowindex") == obstacleList[ob].y) {
						$(this).css('background', 'black');
					}
				}
			})
			do {
				var currentPoint = openList.pop();
				console.log(currentPoint);
				console.log("-------------------");

				$("#main div").each(function() {
					if($(this).attr("colindex") == currentPoint.x && $(this).attr("rowindex") == currentPoint.y) {
						$(this).css('background', 'beige');
						$(this).html("H:" + currentPoint.H)
					}
				})

				closeList.push(currentPoint);
				var surroundPoint = SurroundPoint(currentPoint);
				for(var i in surroundPoint) {
					var item = surroundPoint[i]; //获得周围的八个点
					if(
						item.x >= 0 && //判断是否在地图上
						item.y >= 0 &&
						item.x < 6 &&
						item.y < 6 &&
						!existList(item, obstacleList) &&
						!existList(item, closeList) //判断是否在关闭列表中

					) {
						//g 到父节点的位置
						//如果是上下左右位置的则g等于10，斜对角的就是14
						var g = currentPoint.G + ((currentPoint.x - item.x) * (currentPoint.y - item.y) == 0 ? 10 : 14);
						if(!existList(item, openList)) { //如果不在开启列表中
							//计算H，通过水平和垂直距离进行确定
							item['H'] = Math.abs(end_x - item.x) * 10 + Math.abs(end_y - item.y) * 10;
							item['G'] = g;
							item['F'] = item.H + item.G;
							item['parent'] = currentPoint;
							openList.push(item);
						} else { //存在在开启列表中，比较目前的g值和之前的g的大小
							var index = existList(item, openList);
							//如果当前点的g更小
							if(g < openList[index].G) {
								openList[index].parent = currentPoint;
								openList[index].G = g;
								openList[index].F = g + openList[index].H;
							}

						}
					}
				}
				//如果开启列表空了，没有通路，结果为空
				if(openList.length == 0) {
					alert("没有路了");
					break;
				}
				openList.sort(sortF); //这一步是为了循环回去的时候，找出 F 值最小的, 将它从 "开启列表" 中移掉
			} while (!(result_index = existList({
					x: end_x,
					y: end_y
				}, openList)));

			//判断结果列表是否为空
			if(!result_index) {
				result = [];
			} else {
				var currentObj = openList[result_index];
				do {
					//把路劲节点添加到result当中
					result.unshift({
						x: currentObj.x,
						y: currentObj.y
					});
					currentObj = currentObj.parent;
				} while (currentObj.x != start_x || currentObj.y != start_y);

			}
			return result;

		}
		//用F值对数组排序
		function sortF(a, b) {
			return b.F - a.F;
		}
		//获取周围八个点的值
		function SurroundPoint(curPoint) {
			var x = curPoint.x,
				y = curPoint.y;
			return [{
					x: x - 1,
					y: y - 1
				},
				{
					x: x,
					y: y - 1
				},
				{
					x: x + 1,
					y: y - 1
				},
				{
					x: x + 1,
					y: y
				},
				{
					x: x + 1,
					y: y + 1
				},
				{
					x: x,
					y: y + 1
				},
				{
					x: x - 1,
					y: y + 1
				},
				{
					x: x - 1,
					y: y
				}
			]
		}
		//判断点是否存在在列表中，是的话返回的是序列号
		function existList(point, list) {
			for(var i in list) {
				if(point.x == list[i].x && point.y == list[i].y) {
					return i;
				}
			}
			return false;
		}
	</script>

</html>

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值