深度优先算法(DFS) js Demo

最新推荐文章于 2024-07-08 14:16:38 发布
最新推荐文章于 2024-07-08 14:16:38 发布
阅读量2.4k 收藏 1
点赞数 1
分类专栏： 算法 JavaScript 文章标签： 算法 function list html input button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwseaman/article/details/7592855
版权

展示效果如下图：

DFS算法就像老鼠走迷宫：朝着一个方向走到不能走，然后转向继续走，若3个方向都是是障碍，那么回到上一个位置转向···，直到找到出口，或者走完所有可能的路未找到出口。深度优先算法属于盲目搜索，无法保证搜索到的路径为最短路径。

算法实现基本思路为：把所有可能的路径看做一个从根节点出发的树形结构，从出发点开始，依次递归考察每个节点的连通性，直到找到终点或者搜索完整棵树。

核心算法：

function Position(x,y,prePOS){
	this.X=x;
	this.Y=y;
	this.PrePOS = prePOS;
}
Position.prototype.validate = function(nextPos){
	//1 在方格范围之内的，2 非障碍物，3 若当前pos的previous pos存在且，next pos不为previous pos
	if( nextPos.X >=0 && nextPos.X < X && nextPos.Y >=0 && nextPos.Y < Y && grid[nextPos.X][nextPos.Y]==1 && !searchedQ.has(nextPos)){
		if( this.PrePOS && nextPos.X == this.PrePOS.X && nextPos.Y == this.PrePOS.Y){
			return false;
		}
		return true;
	}
	return false;
}
Position.prototype.Down = function(){
	var pos = new Position(this.X + 1, this.Y);
	if(this.validate(pos)){
		pos.PrePOS = this;
		return pos;
	}
	return undefined;
};
Position.prototype.Right = function(){
	var pos = new Position(this.X, this.Y + 1);
	if(this.validate(pos)){
		pos.PrePOS = this;
		return pos;
	}
	return undefined;
};
Position.prototype.Up = function(){
	var pos = new Position(this.X - 1, this.Y);
	if(this.validate(pos)){
		pos.PrePOS = this;
		return pos;
	}
	return undefined;
};
Position.prototype.Left = function(){
	var pos =  new Position(this.X, this.Y - 1);
	if(this.validate(pos)){
		pos.PrePOS = this;
		return pos;
	}
	return undefined;
};

function Queue(){
	var me = this;
	var _list = [];
	this.length = function(){
		return _list.length;
	};
	this.push=function(position){
		if(startPos.constructor.name != "Position")
			throw "Should be Position object.";
		_list.push(position);
		return me;
	}
	this.fetch=function(){
		return _list.shift();
	}
	this.pop=function(){
		return _list.pop();
	}
	this.has=function(position){
		for(var i=0,len=_list.length;i<len;i++){
			if(_list[i].X == position.X && _list[i].Y == position.Y){
				return _list[i];
			}
		}
		return undefined;
	}
	this.Item = _list;
}

function searchPath(POS){
	if(!POS){
		return false;
	}
	searchCount++;
	searchedQ.push(POS);
	if((POS.X == endPos.X && POS.Y == endPos.Y)){
		return true;
	}else{
		var found = false;
		var down = POS.Down();
		var right = POS.Right();
		var up = POS.Up();
		var left = POS.Left();
		
		if(!found && down){
			found = searchPath(down)
		}
		if(!found && right) {
			found = searchPath(right);
		}
		if(!found && up) {
			found = searchPath(up);
		}
		if(!found && left) {
			found = searchPath(left);
		}
		if(!found){
			grid[POS.X][POS.Y] = -1;
			return searchPath(POS.PrePOS);
		}else{
			return true;
		}	
	}
}


以下为实现代码，仅供参考（算法还需要完善，如果有发现错误，请批评指正，谢谢）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

</head>
<body οncοntextmenu="return false" onselectstart="return false">
格子长：<input type="text" id="txtLength" value="10" /> 格子宽：<input type="text" id="txtWidth" value="10"/> 
<input type="button" value="绘制格子" id="btnPrint" οnclick="initGrid();" />
<input type="button" value="搜索路径" id="btnPrint" οnclick="startSearch();" />
<br/>
提示：点击格子设置/取消障碍
<div id="container">
</div>
<div id="msg">
</div>
<div>
<script>
var tdTitle = "点击格子设置/取消障碍";
var grid = [];
var X = Y = 0;
var gridUI = [];
var pathLength = 0;
var searchedQ = new Queue();
var searchCount = 0;
var startPos = new Position(0,0), endPos = new Position(0,0);

initGrid();
function $(id) {
	return document.getElementById(id);
}
function initGrid(){
	pathLength = 0;
	closedQ = new Queue();
	X = parseInt($("txtLength").value) || 0;
	Y = parseInt($("txtWidth").value) || 0;
	var html = "<table id='mainTable' border='0' cellpadding='1' cellspacing='1' style='background:#999999;' ><tbody>";
	for(var i=0;i<X;i++){
		html += "<tr>";
		grid[i] = [];
		for(var j=0;j<Y;j++){
			grid[i][j] = 1;
			html += "<td title='"+ tdTitle +"' width='20' height='20' style='background:#ffffff;' οnclick='setBlock(this,"+ i +","+ j +")'> </td>";
		}
		html += "</tr>";
	}
	html += "</tbody></table>";
	$("container").innerHTML = html;
	
	var table = $('mainTable');
	for (var i = 0; i < X; i++) {
		gridUI[i] = new Array(Y);
		for (var j = 0; j < Y; j++) {
			gridUI[i][j] = table.rows[i].cells[j];
		}
	}
	
	//print start and end position.
	endPos = new Position(X-1,Y-1);
	gridUI[startPos.X][startPos.Y].style.background='#339933';
	gridUI[endPos.X][endPos.Y].style.background='#339933';
	gridUI[startPos.X][startPos.Y].οnclick="return false;";
	gridUI[endPos.X][endPos.Y].οnclick="return false;";
	gridUI[startPos.X][startPos.Y].title="start";
	gridUI[endPos.X][endPos.Y].title="end";
}

function setBlock(td,i,j){
	if(grid[i][j] == 1){
		gridUI[i][j].style.background='#666666';
		grid[i][j] = 0;//block
	}else{
		gridUI[i][j].style.background='#ffffff';
		grid[i][j] = 1;
	}
}

function Position(x,y,prePOS){
	this.X=x;
	this.Y=y;
	this.PrePOS = prePOS;
}
Position.prototype.validate = function(nextPos){
	//1 在方格范围之内的，2 非障碍物，3 若当前pos的previous pos存在且，next pos不为previous pos
	if( nextPos.X >=0 && nextPos.X < X && nextPos.Y >=0 && nextPos.Y < Y && grid[nextPos.X][nextPos.Y]==1 && !searchedQ.has(nextPos)){
		if( this.PrePOS && nextPos.X == this.PrePOS.X && nextPos.Y == this.PrePOS.Y){
			return false;
		}
		return true;
	}
	return false;
}
Position.prototype.Down = function(){
	var pos = new Position(this.X + 1, this.Y);
	if(this.validate(pos)){
		pos.PrePOS = this;
		return pos;
	}
	return undefined;
};
Position.prototype.Right = function(){
	var pos = new Position(this.X, this.Y + 1);
	if(this.validate(pos)){
		pos.PrePOS = this;
		return pos;
	}
	return undefined;
};
Position.prototype.Up = function(){
	var pos = new Position(this.X - 1, this.Y);
	if(this.validate(pos)){
		pos.PrePOS = this;
		return pos;
	}
	return undefined;
};
Position.prototype.Left = function(){
	var pos =  new Position(this.X, this.Y - 1);
	if(this.validate(pos)){
		pos.PrePOS = this;
		return pos;
	}
	return undefined;
};

function Queue(){
	var me = this;
	var _list = [];
	this.length = function(){
		return _list.length;
	};
	this.push=function(position){
		if(startPos.constructor.name != "Position")
			throw "Should be Position object.";
		_list.push(position);
		return me;
	}
	this.fetch=function(){
		return _list.shift();
	}
	this.pop=function(){
		return _list.pop();
	}
	this.has=function(position){
		for(var i=0,len=_list.length;i<len;i++){
			if(_list[i].X == position.X && _list[i].Y == position.Y){
				return _list[i];
			}
		}
		return undefined;
	}
	this.Item = _list;
}

function searchPath(POS){
	if(!POS){
		return false;
	}
	searchCount++;
	searchedQ.push(POS);
	if((POS.X == endPos.X && POS.Y == endPos.Y)){
		return true;
	}else{
		var found = false;
		var down = POS.Down();
		var right = POS.Right();
		var up = POS.Up();
		var left = POS.Left();
		
		if(!found && down){
			found = searchPath(down)
		}
		if(!found && right) {
			found = searchPath(right);
		}
		if(!found && up) {
			found = searchPath(up);
		}
		if(!found && left) {
			found = searchPath(left);
		}
		if(!found){
			grid[POS.X][POS.Y] = -1;
			return searchPath(POS.PrePOS);
		}else{
			return true;
		}	
	}
}
function paintSearchResult(closedQ){
	var path = [];
	var lastPOS = closedQ.pop();
	while( lastPOS.X!=startPos.X || lastPOS.Y!=startPos.Y){
		path.push(gridUI[lastPOS.X][lastPOS.Y]);
		lastPOS = lastPOS.PrePOS;
		pathLength++;
	}
	var timer = window.setInterval(function(){
		var point = path.pop();
		if(point) point.style.background="#339933";
		else clearInterval(timer);
	},200);
}

function startSearch(){
	if(searchPath(startPos)){
		paintSearchResult(searchedQ);
		$("msg").innerHTML = "Found a path need: "+ pathLength +" steps. Searched position count: " + searchCount;
	}else{
		$("msg").innerHTML = "Not connected.";
	}
}

</script>
</div>
<div>
</div>
</body>
</html>







vivi沧海月明
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现深度优先搜索(DFS)和广度优先搜索(BFS)
weixin_46734347的博客
04-05 4523
深度优先搜索（DFS） 首先构造一个我们需要遍历的结构，这里用html演示 <div id="root"> <p></p> <label></label> <ul> <li> <span></span> </li> <li></li>
JS算法 —— 二叉树的dfs(深度)和bfs(广度)遍历
小绵杨
03-23 4321
目录一、二叉树二、dfs深度优先遍历三、bfs广度优先遍历（层次遍历） 一、二叉树 演示图 tree: const tree = { val: 1, left: { val: 2, left: null, right: { val: 4, left: null, right: { val: 7, left:
【DFS（深度优先搜索）详解】看这一篇就够啦
最新发布
2202_76097976的博客
07-08 2584
DFS算法的基本思想是从图中的某个顶点v出发，访问此顶点，然后依次从v的未被访问的邻接点出发深度优先遍历图，直至图中所有和v有路径相通的顶点都被访问到。若此时图中尚有顶点未被访问，则另选图中一个未曾被访问的顶点作起始点，重复上述过程，整个进程反复进行直到所有顶点都被访问为止。指数型枚举是指一共有n个数，每一个数都有两种状态，也就是选或不选，时间复杂度也就是2^n，指数级的。
JavaScript中的深度优先(dfs)和广度优先(bfs)
weixin_50789156的博客
07-09 767
前端bfs和dfs的应用，欢迎来学习交流！！
javascript中采用深度优先和广度优先遍历DOM树算法
weixin_51431277的博客
04-02 1319
javascript中采用深度优先和广度优先遍历DOM树算法
深度优先算法（DFS）
天才猴吼的博客
06-26 860
深度优先搜索是一种在开发爬虫早期使用较多的方法。
DFS（深度优先）算法编程实践
世上只有一种英雄主义
09-19 4849
DFS定义DFS（Depth-First-Search）深度优先搜索算法，是搜索算法的一种。是一种在开发爬虫早期使用较多的方法。它的目的是要达到被搜索结构的叶结点 。特点每次深度优先搜索的结果必然是图的一个连通分量。深度优先搜索可以从多点发起。如果将每个节点在深度优先搜索过程中的“结束时间”排序(具体做法是创建一个list,然后在每个节点的相邻节点都已被访问的情况下，将该节点加入list结尾，然后逆
基于java开发的商城类完整demo：DFS：前端、PHP后端
05-10
DFS在本项目中可能指的是深度优先搜索（Depth-First Search），一种常用的算法，用于遍历或搜索树或图。让我们详细了解一下这个项目可能涉及的知识点。 1. **Java开发**： - **MVC模式**：此项目很可能采用了Model...
解数独demo 纯js
06-17
2. **回溯法**：这是求解数独的常用方法，也称为深度优先搜索（DFS）。从空的格子开始，尝试填入数字1到9，并递归地检查填入的合法性。如果合法，继续填充下一个空格；如果不合法，回溯到上一步，尝试下一个可能的...
gena-demo:JavaScript演示中的通用算法
05-05
- **深度优先搜索（DFS）**和**广度优先搜索（BFS）**：用于遍历或搜索树或图，DFS常用于寻找路径，BFS常用于找最短路径。 - **最小生成树**：如Prim算法或Kruskal算法，用于找到连通图的最小成本树。 - **拓扑...
微信小程序商城类完整demo：DFS：前端、PHP后端
03-15
4. DFS（深度优先搜索）：在前端部分提到DFS，通常是在处理数据结构或算法时使用，如遍历或查找。在电商应用中，DFS可能用于商品分类的递归展示，或者用户行为的深度分析。 5. 前端：前端是用户直接交互的部分，...
algorithm-demo
05-08
4. **递归算法**：递归是解决复杂问题的一种常用方法，项目中的递归示例可能包括树的遍历（如深度优先搜索DFS）和其他需要自调用的场景。 5. **回溯算法**：回溯是一种试探性的解决问题方法，当遇到障碍时会撤销上...
JavaScript数据结构与算法总结四——图（深度优先、广度优先、最短路径、最小生成树）
weixin_44037272的博客
05-17 350
图由边的集合及顶点的集合组成。图的表示图的遍历深度优先搜索广度优先搜索 最短路径Dijkstra 算法Floyd-Warshall 算法 最小生成树Prim 算法Kruskal 算法
大话前端： JavaScript中的广度优先和深度优先搜索
weixin_43903608的博客
12-15 695
如果我们用比喻来描述这两种搜索方法，可以想象BFS像是逐层剥开洋葱，而DFS则像是挖掘地道。BFS一层层展开，确保每层都被完全探索；DFS则专注于一条路，不断深入，直到无法继续，然后尝试其他路径。
JS-树：深度优先搜索与广度优先搜索
smileKH的博客
10-09 454
最近总结一下树的算法，研究树相关的知识。这就是树的深度优先搜索和树的广度优先搜索，希望能帮助到你！
JavaScript:实现深度优先搜索迭代算法（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
08-22 229
JavaScript:实现深度优先搜索迭代算法（附完整源码）
JS 复制页面源代码和复制页面内容
zwSeaman的专栏
01-11 3241
页面上有这样一个div，现在采用两种方式复制div中的内容：1  复制源代码window.clipboardData.setData("text",document.getElementById("div1").innerHTML)2  复制显示内容var obj = document.getElementById("div1"); var rng = document.body.createTextRange(); rng.moveToElementText(obj); rng.select();
Asp.net Ajax WebService开发文档
zwSeaman的专栏
02-11 2903
 Asp.net Ajax WebService开发文档基础使用1         新建一个解决方案，右键解决方案名称选择“添加—新建网站”，新建一个asp.net 网站WebSite1，右键Website1，选择“添加新项—Web服务”，添加一个Web服务WebService1。则在跟目录下生成WebService1.asmx，App_Code文件夹中生成WebService1.cs
广度优先算法 (BFS) js Demo
zwSeaman的专栏
05-20 2542
BFS算法原理：从起始点开始，分别考察距离起始点为1,2,3...的点，直到找到结束点，或者考察完整个可达区域依然没有找到结束点。 实现方法：首先将起点加入队列，判断当前点是否为终点，若否，则取起点的四个方向的点加入队列（一般四方位考察顺序为下右上左），依次类推，直到队列为空或找到终点。 效果如下，如有发现错误欢迎批评指正： 起点和终点： 点击设置障碍： 搜索路径：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值