<!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>
分享到：
相关推荐
数据结构初学上级必备，简单而又实际学习，对数据结构初学来说帮助还是帮助很大的，我是刚上机学习感觉用处很大与大家分享
迷宫求解的C++源码，程序简单，容易看懂，适合学习C++层度不深的同志
入口坐标和出口坐标分别为(startx,starty)和(endx,eny)，每一个坐标点有两种可能：0或1，其中0表示该位置允许通过，1表示该位置不允许通过。以寻路问题为例实现A*算法的求解程序，设计两种不同的估价函数。
次非递归迷宫算法基于数据结构（清华大学出版社）一书，运用栈的方式来进行操作，内容简单易懂，适合初学者学习使用
代码中包含13种强化学习算法，所调用的环境不仅包含gym下面的一些简单环境，还可以自己设计环境（简单的迷宫游戏），简洁明了，适合算法学习的同学使用，其中A3C与PPO还涉及了并行运算的算法。
并查集生成迷宫及A*算法自动寻找路径，学习算法的时候可以借鉴一下，很简单但是很实用。资源为整套源码。欢迎联系交流，共同学习。
求解强化学习问题所使用的算法可分为策略搜索算法和值函数（value function）算法两类。 强化学习理论受到行为主义心理学启发，侧重在线学习并试图在探索-利用（exploration-exploitation）间保持平衡。不同于监督...
非常简单的回溯法代码，希望对大家学习算法有帮助呀。
代码的目的是提供一个简单的环境，您可以在其中通过实现迷宫生成器或迷宫求解器来学习编写 javascript。 然后，您可以交互式地玩迷宫或将生成器的难度或求解器的效率与其他实现进行比较。去做添加显示的计时器使...
该项目不过是一个平平无奇的小作业，基于python3.8开发，目前提供两种迷宫生成算法与三种迷宫求解算法，希望对大家的学习有所帮助。 这是python3.8，同时我们还包含了两个第三方库，这些我将会放在requirement.txt中...
森林（简单，基于 Prim 算法） 地牢（中等，基于图论 DFS 算法） 地狱（困难，基于暴力 DFS 算法） 选择系列后，进入游戏 WSAD 上下左右，游戏中有计时器 ~~~ ### 文件： ~~~cpp Maze.h : 初始化头文件 Maze.cpp...
朴素贝叶斯算法是贝叶斯算法里面一种比较简单的分类算法，用到了一个比较重要的贝叶斯定理，用一句简单的话概括就是条件概率的相互转换推导。详细介绍链接 SVM 支持向量机算法。支持向量机算法是一种对线性和非...
该库具有2500多种优化算法，其中包括一整套经典和最新的计算机视觉和机器学习算法。 OpenCV应用领域包括： 面部识别系统 手势识别 人机交互（HCI） 移动机器人 运动理解 对象识别 等高线 轮廓可以简单地解释为...
解迷宫的算法(Maze) 解背包问题的算法(Knap) （4）模拟银行(BankSimulation) （5）表达式求值(Exp_reduced) 4． 串的模式匹配 （1）古典算法(Index_BF) （2）求Next 函数值(Get_next)和按Next 函数值进行...
使用MFC写的简单广度优先搜索迷宫算法，可以自己选择起点终点。在探索到终点时会显示一条搜索路径。代码简单，仅供学习交流使用
我在学习Java时只是为了娱乐而创建的一个带有swing UI的简单迷宫游戏。 它会生成简单的迷宫，并且可以使用我实现的数据结构通过回溯找到解决方案。 自定义数据结构（链接列表和堆栈）以及回溯算法是我第三学期...
迷宫游戏非常简单（只是一个带有GUI的硬编码迷宫，您可以四处走动-有关图像，请参见底部）。 这个项目的范围更大-我添加了许多我做第一款游戏时梦dream以求的功能，而这次我进行了单元测试:) 用户故事 作
本仓库包含Python在各领域的一些简单代码，包括机器学习、神经网络、网络爬虫、遗传算法、操作系统、数据库、Opencv、NLP、QT界面、迷宫寻迹、视频处理等。
此项目只是为了在毕业之前复习一下曾经学过的数据结构/算法，初衷是打算仅仅使用Python实现，但写了简单的排序/查找算法之后，觉得对于C/C++我还是应该学习一下，于是就附带了一些之前在BNU上的练习代码。...
简单2D迷宫的Q学习求解器 依赖库 PyGame 2.0.0，NumPy 1.19.4 怎么跑 确保已安装所有依赖库，然后只需在该项目的根目录中运行python ./maze_q_learning_solver.py 。 预期行为 可以在设置用于Q学习算法的各种参数。 ...