简单的迷宫算法学习

最新推荐文章于 2023-06-17 20:58:01 发布

froshloveC

最新推荐文章于 2023-06-17 20:58:01 发布

阅读量142

点赞数

分类专栏：一些小函数

一些小函数专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style>
body,html{
	background-color:black;
}
#box{
	width:656px;
	height:656px;
	margin:100px auto;
}
.normal{
	float:left;
	background-color:#fff;
	border:1px solid #ddd;
	width:80px;
	height:80px;
	position:relative;
}
.start{
	background-color:red;
}
.end{
	background-color:yellow;
}
.stop{
	background-color:black;
}
#control{
	position:absolute;
	right:0;
	top:300px;
	color:white;
	font-size:12px;
	cursor:pointer;
}
.g,.h,.f{
	font-size:12px;
	position:absolute;
}
.f{
	top:2px;
	left:2px;
}
.g{
	bottom:2px;
	left:2px;
}
.h{
	right:2px;
	bottom:2px;
}
</style>
</head>
<body>
<div id="control">
	<span id="fgh">Find Path</span>
</div>
<div id="box">
</div>
<script>
var map = [
	[0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0],
	[0,0,0,0,1,0,0,0],
	[0,0,0,0,1,0,0,0],
	[0,5,0,0,1,0,8,0],
	[0,0,0,0,1,0,0,0],
	[0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0]
];
init();
function $(){
	return document.getElementById(arguments[0]);
}
function init(){
	var html = "";
	for(var i = 0 ; i < map.length ; i++){
		for(var j = 0 ; j < map[i].length ; j++){
			if(map[i][j] == 0){
				html += '<div class="normal" id="b'+i+'_'+j+'"></div>';
			}else if(map[i][j] == 5){
				html += '<div class="normal start" id="b'+i+'_'+j+'"></div>';
			}else if(map[i][j] == 8){
				html += '<div class="normal end" id="b'+i+'_'+j+'"></div>';
			}else if(map[i][j] == 1){
				html += '<div class="normal stop" id="b'+i+'_'+j+'"></div>';
			}
		}
	}
	$("box").innerHTML = html;
}
var startx = 4,
	starty = 1,
	endx   = 4,
	endy   = 6;
var openlist = ["b4_1"];
var trueopenlist = [];
var closelist = [];
$("fgh").onclick = function(){
	var copen = openlist[0],
		x = copen.replace("b","").split("_")[0],
		y = copen.replace("b","").split("_")[1];
	closelist.push(copen);
	openlist.pop(copen);
	pushIntoOpenlist(x,y);
	drawFGH();
}
function pushIntoOpenlist(x,y){
	x = parseInt(x,10);
	y = parseInt(y,10);
	openlist.push("b"+(x-1)+"_"+y);
	openlist.push("b"+(x+1)+"_"+y);
	openlist.push("b"+x+"_"+(y+1));
	openlist.push("b"+x+"_"+(y-1));
	
}
function drawFGH(){
	var lower = 100000,
		lowerxy = null;
	for(var i = 0 ; i < openlist.length ; i++){
		var copen = openlist[i],
			x = copen.replace("b","").split("_")[0],
			y = copen.replace("b","").split("_")[1];
		var g = 10 * closelist.length,//parseInt(Math.sqrt(Math.pow(Math.abs(x - startx),2) + Math.pow(Math.abs(y - starty),2)) * 10,10),
			h = 10*(Math.abs(x - endx) + Math.abs(y - endy)),
			f = g + h;
		if(x == endx &&  y == endy){
			alert("Done");
			console.log(closelist);
			showResult();
		}
		if($(copen).className == "normal stop"){
			continue;
		}
		var lo = true;
		
		for(var m = 0 ; m < closelist.length ; m++){
			if(copen == closelist[m]){
				lo = false;
				break;
			}
		}
		if(!lo){
			continue;
		}
		if(f < lower){
			lower = f;
			lowerxy = copen;
		}
		console.log(copen);
		trueopenlist.push(copen);
		$(copen).innerHTML = "<div class='f'>"+f+"</div><div class='g'>"+g+"</div><div class='h'>"+h+"</div>";
	}
	updateList(lowerxy);
}
function updateList(data){
	openlist = [];
	openlist.push(data);
	//closelist.push(data);
	trueopenlist.pop(data);
}
function showResult(){
	var i = 0 ;
	var t = setInterval(function(){
		if(closelist.length > 0){
			var copen = closelist[0];
			$(copen).style.backgroundColor = "pink";
			$(copen).innerHTML = "<p style='font-size:20px;font-weight:bold;text-align:center;line-height:42px;'>"+(i+1)+"</p>";
			closelist.shift();
			i++;
		}else{
			clearInterval(t);
		}
	},500);
}
</script>
</body>
</html>

froshloveC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的迷宫算法学习

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;body,html{ background-color:black;}#box{ width:656px; height:656px; margin:100px auto;}.normal{ float:left; bac...
复制链接

扫一扫

专栏目录