<!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>
分享到：
相关推荐
描述部分提到这是一个“简易迷宫算法”，意味着其实现相对简单，并且只包含了基本的功能。该算法使用了STL中的容器来存储迷宫的状态信息。描述中还提到了“仅供参考”，这可能意味着该代码不是最优化的版本，而是...
【迷宫算法简单MFC实例】是针对计算机编程领域中的一种特定应用场景，即利用Microsoft Foundation Classes (MFC) 框架实现一个简单的迷宫求解算法。MFC 是微软提供的一套C++类库，它为Windows应用程序开发提供了丰富...
这种方法简单易实现，但可能产生过于简单的迷宫或者导致死胡同。 4. **递归切割算法（ Recursive Backtracker）生成迷宫**： 这是一种基于深度优先搜索的生成方式，但更注重迷宫的均衡性和美观。它从一个空白的...
在IT领域，迷宫算法是一种常见的路径搜索问题，它涉及到数据结构和算法设计。本文将深入探讨迷宫算法的实现，特别是使用栈这种数据结构来解决这类问题。我们将讨论迷宫的设置、方向选择、绝境与墙的判断，以及如何...
为了进一步理解迷宫算法的实现，你可以通过阅读"Mizmaze"项目的源代码来学习如何在C/C++中有效地使用堆和栈。同时，结合实际的迷宫数据进行测试和调试，将有助于深化对迷宫算法和数据结构应用的理解。
总结，迷宫算法涉及了递归、图论、搜索策略等多个IT领域的知识点，通过学习和实践，不仅可以加深对这些概念的理解，还能锻炼解决问题的能力。无论是迷宫生成还是最优路径寻找，都有多种算法可供选择，根据实际情况...
数据结构初学上级必备，简单而又实际学习，对数据结构初学来说帮助还是帮助很大的，我是刚上机学习感觉用处很大与大家分享
本资源包含C++实现的走迷宫算法及其实验报告，对于理解和掌握数据结构及算法设计具有很高的学习价值。 首先，我们要理解迷宫算法的核心在于路径搜索。常见的迷宫求解算法有深度优先搜索（DFS）和广度优先搜索（BFS...
通过学习该文档，可以更好地理解迷宫算法的实现原理和方法，并掌握JAVA语言的应用。 七、知识点总结 1. 迷宫算法的实现方法：递归算法、使用栈作为辅助结构、使用队列作为辅助结构。 2. 迷宫算法的应用：解决迷宫...
本文将深入探讨基于C语言的简单迷宫算法实现，以及如何利用出栈和入栈的思想来找到解决方案。 首先，我们要理解迷宫问题的基本概念。一个迷宫可以被抽象为一个二维矩阵，其中的每个单元格可以是通路（表示为1或true...
改进后的算法提高了搜索效率，保证了迷宫搜索的时效性和稳定性，并且算法简单易实现，避免了一般算法冗长复杂的问题。通过数学建模和分析，将该算法应用于实际迷宫机器人实验平台，验证了其可行性和时效性。 在迷宫...
《C#实现简易迷宫游戏解析》 在编程领域，迷宫生成与求解是一种常见的算法练习，它能很好地展示编程思维与数据结构的应用。本篇将深入探讨使用C#语言编写的一个基于深度优先遍历（DFS）算法的迷宫游戏程序。这个...
在编程领域，迷宫生成是一种常见的算法挑战，它涉及到图论、随机数生成以及回溯等概念。在C#环境中，我们可以使用不同的算法来创建一个随机的、...通过学习和实践这些算法，你可以更深入地理解计算机科学的基础原理。
对于学习和理解迷宫算法，阅读并分析这样的源码是非常有价值的。 通过研究这些源码，我们可以深入理解迷宫算法的实现细节，比如如何表示迷宫（墙和通道），如何定义起始点和终点，如何进行有效的搜索，以及如何避免...
易语言是一种专为中国人设计的编程语言，它以简体中文作为编程语法，降低了编程的门槛，使得更多的...对于初学者而言，这是一个很好的学习实践机会，可以提升对数据结构和算法的理解，也能进一步熟悉易语言的编程语法。
走迷宫算法是一种在复杂路径中寻找从起点到终点最短路径的问题，广泛应用于计算机科学、人工智能和游戏设计等领域。...通过这个项目，开发者不仅可以学习到迷宫算法的实现，还能加深对Win32编程和MFC的理解。
对于图形用户界面（GUI）的部分，"easyX"是一个C++的图形库，它提供了简单的函数接口，帮助开发者快速绘制图形，包括在迷宫中显示路径、迷宫墙壁等。在项目中，你需要包含easyX库的头文件，并调用其提供的函数来绘制...
本资源“flex简易迷宫源代码”正是一款适合初学者入门学习的项目，它通过构建一个简单的迷宫游戏，生动地展示了Flex在游戏开发中的应用。 首先，我们要理解迷宫游戏的基本逻辑。迷宫通常由一系列可通行或不可通行的...
并查集算法和深度优先搜索算法在实现上相对简单，适合初学者学习；随机算法则更适用于快速生成简单的迷宫；而递归切割算法则能产生更高质量的迷宫结构。寻路算法，如A*算法，通常与迷宫生成算法结合使用，帮助解决在...
【迷宫求解课程设计】是计算机科学领域中常见的一个问题，通常用于教授基本的图论概念和搜索算法。...这些基本的算法和数据结构知识是计算机科学学习的基础，对于理解复杂问题的求解思路至关重要。