广度优先算法 (BFS) js Demo

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

BFS算法原理：从起始点开始，分别考察距离起始点为1,2,3...的点，直到找到结束点，或者考察完整个可达区域依然没有找到结束点。

实现方法：首先将起点加入队列，判断当前点是否为终点，若否，则取起点的四个方向的点加入队列（一般四方位考察顺序为下右上左），依次类推，直到队列为空或找到终点。

效果如下，如有发现错误欢迎批评指正：

起点和终点：


点击设置障碍：


搜索路径：



算法核心代码：

function Position(x,y,lastPOS){
	this.X=x;
	this.Y=y;
	this.LastPOS = lastPOS;
}
Position.prototype.validate = function(currPos,queue,closedQ){
	//1 在方格范围之内的，2 非障碍物，3 不在open列表中，4 不在closed列表中
	if(currPos.X >=0 && currPos.X < X && currPos.Y >=0 && currPos.Y < Y && grid[currPos.X][currPos.Y]==1 && !queue.has(currPos) && !closedQ.has(currPos)){
		return true;
	}
	return false;
}
Position.prototype.Down = function(queue,closedQ){
	var curr = new Position(this.X + 1, this.Y);
	if(this.validate(curr,queue,closedQ)){
		curr.LastPOS = this;
		return curr;
	}
	return undefined;
};
Position.prototype.Right = function(queue,closedQ){
	var curr = new Position(this.X, this.Y + 1);
	if(this.validate(curr,queue,closedQ)){
		curr.LastPOS = this;
		return curr;
	}
	return undefined;
};
Position.prototype.Up = function(queue,closedQ){
	var curr = new Position(this.X - 1, this.Y);
	if(this.validate(curr,queue,closedQ)){
		curr.LastPOS = this;
		return curr;
	}
	return undefined;
};
Position.prototype.Left = function(queue,closedQ){
	var curr =  new Position(this.X, this.Y - 1);
	if(this.validate(curr,queue,closedQ)){
		curr.LastPOS = this;
		return curr;
	}
	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 true;
			}
		}
		return false;
	}
	this.Item = _list;
}

function searchPath(){
	var openQ = new Queue(),found = false;
	var closedQ = new Queue();
	var searchCount = 0;
	openQ.push(startPos);
	while(!found && openQ.length() && searchCount < 1000){
		searchCount++;
		var POS = openQ.fetch();
		closedQ.push(POS);
		if(POS.X == endPos.X && POS.Y == endPos.Y){
			found = true;
		}else{
			var down = POS.Down(openQ,closedQ);
			var right = POS.Right(openQ,closedQ);
			var up = POS.Up(openQ,closedQ);
			var left = POS.Left(openQ,closedQ);
			
			if(down) openQ.push(down);
			if(right) openQ.push(right);
			if(up) openQ.push(up);
			if(left) openQ.push(left);
		}
	}
	
	if(found){
		//to do
	}else{
		//to do
	}
}

附上html源代码：

<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="searchPath();" />
<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 startPos = new Position(0,0), endPos = new Position(0,0);

initGrid();
function $(id) {
	return document.getElementById(id);
}
function initGrid(){
	pathLength = 0;
	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(currPos,queue,closedQ){
	//1 在方格范围之内的，2 非障碍物，3 不在open列表中，4 不在closed列表中
	if(currPos.X >=0 && currPos.X < X && currPos.Y >=0 && currPos.Y < Y && grid[currPos.X][currPos.Y]==1 && !queue.has(currPos) && !closedQ.has(currPos)){
		return true;
	}
	return false;
}
Position.prototype.Down = function(queue,closedQ){
	var curr = new Position(this.X + 1, this.Y);
	if(this.validate(curr,queue,closedQ)){
		curr.PrePOS = this;
		return curr;
	}
	return undefined;
};
Position.prototype.Right = function(queue,closedQ){
	var curr = new Position(this.X, this.Y + 1);
	if(this.validate(curr,queue,closedQ)){
		curr.PrePOS = this;
		return curr;
	}
	return undefined;
};
Position.prototype.Up = function(queue,closedQ){
	var curr = new Position(this.X - 1, this.Y);
	if(this.validate(curr,queue,closedQ)){
		curr.PrePOS = this;
		return curr;
	}
	return undefined;
};
Position.prototype.Left = function(queue,closedQ){
	var curr =  new Position(this.X, this.Y - 1);
	if(this.validate(curr,queue,closedQ)){
		curr.PrePOS = this;
		return curr;
	}
	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 true;
			}
		}
		return false;
	}
	this.Item = _list;
}

function searchPath(){
	var openQ = new Queue(),found = false;
	var closedQ = new Queue();
	var searchCount = 0;//If search more than 10000 times, end. 
	openQ.push(startPos);
	while(!found && openQ.length() && searchCount < 10000){
		searchCount++;
		var POS = openQ.fetch();
		closedQ.push(POS);
		if(POS.X == endPos.X && POS.Y == endPos.Y){
			found = true;
		}else{
			var down = POS.Down(openQ,closedQ);
			var right = POS.Right(openQ,closedQ);
			var up = POS.Up(openQ,closedQ);
			var left = POS.Left(openQ,closedQ);
			
			if(down) openQ.push(down);
			if(right) openQ.push(right);
			if(up) openQ.push(up);
			if(left) openQ.push(left);
		}
	}
	
	if(found){
		paintSearchResult(closedQ);
		$("msg").innerHTML = "At least "+ pathLength +" steps. Searched position count: " + searchCount;
	}else{
		$("msg").innerHTML = "Not connected.";
	}
}


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);
}



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



vivi沧海月明
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript:实现BreadthFirstSearch广度优先搜索算法（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
08-22 153
JavaScript:实现BreadthFirstSearch广度优先搜索算法（附完整源码）
BFS和DFS算法可视化（js实现）
01-17
这是山东大学可视化课程项目，用js实现的BFS和DFS，详细的展示了BFS和DFS的运行过程，网页可交互。
JS实现广度优先遍历
m0_72572410的博客
10-25 1368
广度优先遍历，js，树形结构
【JavaScript 算法】广度优先搜索：层层推进的搜索策略
Allen-
07-12 784
广度优先搜索（Breadth-First Search, BFS）是一种用于遍历或搜索图或树数据结构的算法。该算法从起始节点开始，逐层向外扩展，直到找到目标节点或遍历完所有节点。本文将详细介绍广度优先搜索算法的原理、实现及其应用。
学习JavaScript数据结构与算法 — 广度优先搜索算法
weixin_34025151的博客
09-18 133
广度优先搜索（BFS） 上一次已经提到，图的遍历一般有两种算法，即广度优先和深度优先。其中广度优先搜索算法会从指定的第一个顶点开始遍历图，先访问其所有的相邻点，就像一次访问图的一层。换句话说，就是先宽后深地访问顶点，如图1。 图1 从顶点v开始的广度优先搜索的步骤如下： 创建一个队列Q。 将v标注为被发现的（灰色） ，并将v入队列Q。...
蓝桥杯深入理解深度搜索DFS与广度搜索BFS练习题，共计5个demo，从简入繁，让你快速成长。加油。
03-25
深度优先搜索（DFS，Depth-First Search）和广度优先搜索（BFS，Breadth-First Search）是计算机科学中解决图或树结构问题的两种基础算法，尤其在算法竞赛如“蓝桥杯”中，对这两种算法的熟练掌握至关重要。...
关于数据结构与算法相关实例Demo.zip
06-17
图的遍历算法包括深度优先搜索（DFS）和广度优先搜索（BFS）。 7. 哈希表：通过哈希函数实现快速查找、插入和删除操作。C++的std::unordered_map和Python的dict是哈希表的实现。 8. 排序算法：包括冒泡排序、选择...
gena-demo:JavaScript演示中的通用算法
05-05
- **深度优先搜索（DFS）**和**广度优先搜索（BFS）**：用于遍历或搜索树或图，DFS常用于寻找路径，BFS常用于找最短路径。 - **最小生成树**：如Prim算法或Kruskal算法，用于找到连通图的最小成本树。 - **拓扑...
Unity 寻路demo，根据链接内的外文自己用C#实现了广度优先、A星寻路，如有错误还望指正。
05-23
A星（A*）算法是一种启发式搜索算法，结合了最佳优先搜索（如广度优先搜索BFS）和Dijkstra算法的优点。A星算法通过计算一个叫做F值的函数来决定下一个节点的选择，F值由两部分组成：G值（从起始节点到当前节点的实际...
广度优先遍历、深度优先遍历-JS
caicsama的博客
04-10 946
使用邻接表存储图 广度优先遍历 A->B->C->D->E->F 遍历A元素的时候,将A元素的邻接节点（B、C）插入数组，访问完B，将B的邻接表（C、D）插入数组，C已经在遍历表中了，因此不添加到遍历表中，接下来访问C，将邻接表(D、E)插入遍历数组中，同样，D已经在遍历表中，就不添加进去，避免重复访问。 遍历的过程没有重复元素 访问栈、记录表 //邻接点制成的表 ...
NodeJs语言实现广度优先搜索（Breadth-First Search，BFS）算法
最新发布
zy0412326的专栏
07-27 142
在 Node.js 中实现广度优先搜索（BFS）算法可以使用 JavaScript 编写。NodeJs语言实现广度优先搜索（Breadth-First Search，BFS）算法。你可以根据需要调整图的结构和起始节点，以测试不同的图和起始点。
Javascript实现BFS算法
Lawless
10-02 2150
图是网络结构的抽象模型。图是一组由边连接的节点（或顶点）。 在实现BFS算法之前，先建立邻接矩阵和邻接表： 邻接矩阵 每个节点都和一个整数相关联，该整数将作为数组的索引。用一个二维数组来表示顶点之间的连接。比如上面图片中的图的邻接矩阵表示： 由于该图不是强连通图（如果图中每两个顶点间在双向上都存在路径，则该图是强连通的。例如， C和D是强连通的，而A和B不是强连通的。），所以在矩阵中会...
bfs——练习demo2(20届周新杰提供)
红目香薰
03-19 793
广度优先搜索 和深搜不同广搜会沿着树的高度和宽度对节点进行依次遍历 从树的根节点a开始，会发现a的子节点有c、d、f三个子节点，进程会先对这三个节点进行访问然后再访问其的子节点 对c、d、f完成访问之后进行则会探寻这三个节点的子节点并对其进行遍历，可以从图中看出他们的子节点有c、g、e 可以看出c、g、e没有子节点了所以程序对其遍历之后随之结束 package test; import java.util.LinkedList; import java.util.Queue; public...
JavaScript中的广度优先搜索
07-16 343
In JavaScript programming, data can be stored in data structures like graphs and trees. Technically trees are graphs. 在JavaScript编程中，数据可以存储在图形和树之类的数据结构中。 从技术上讲，树是图。 图形数据结构 (Graph Data Structures) Gr...
BFS广度优先搜索 （JS）
秋天，黄叶坠地，凉风有信。
02-16 399
从上到下打印出二叉树的每个节点，同一层的节点按照从左到右的顺序打印 // BFS // 从上到下打印出二叉树的每个节点，同一层的节点按照从左到右的顺序打印。 var levelOrder = function(root) { if(root == null) return [] var queue = [] queue.push(root) var res = [] // 当队列还有元素时就继续遍历 // 先将根元素放入遍历 while(
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实现广度优先搜索和深度优先搜索
ChenyiMX的博客
11-13 1707
最近在学习算法，看了图解算法，但是感觉写的太简单，理论比较多，代码实现比较和例子比较少，看完后，又接着看了《啊哈！算法》，这个感觉例子比较多，也比较适合我这种算法入门的读者。 书上的例子一一打了一遍，因为作者是用c写的，而我是没接触过c，用了自己比较熟悉的js把例子打了一遍。用广搜写了贪吃蛇自动吃果实，只能吃100多个，自认为还能完善，于是等完善后在放在博客上面吧。 这里先写写用dfs（深搜） 和...
JavaScript实现广度优先搜索BFS算法(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
08-21 335
JavaScript实现广度优先搜索算法LinkedListNode.js完整源代码Comparator.js完整源代码LinkedList.js完整源代码Queue.js完整源代码breadthFirstSearch.js完整源代码 LinkedListNode.js完整源代码 export default class LinkedListNode { constructor(value, next = null) { this.value = value; this.next = n
js数据结构与算法 图的BFS和DFS
小鹏要逆袭的博客
08-18 609
本文为技术学习的笔记-《Learning JavaScript Data Structures and Algorithms, Third Edition》 1.图的相关术语 图是网络结构的抽象模型。图是由一组边连接的节点（或顶点）。 一个图G=(V, E)由以下元素组成： V:一组顶点 E:一组边，连接V中的顶点 下图表示一个图： 由一条边连接在一起的顶点称为相邻顶点； 一个顶点的度是其相邻顶点的数量； 路径是顶点v1,v2, …, vk的一个连续序列，其中vi和vi+1是相邻的； 简单.
图的遍历（搜索）算法（深度优先算法DFS和广度优先算法BFS）
05-30
好的，关于图的遍历算法，我可以为您简要介绍一下。 图是由节点和边组成的一种数据结构，其中节点表示实体，边表示节点之间的关系。遍历图的目的是访问图中的每个节点，以便了解它们之间的关系。 深度优先算法（DFS）是一种递归算法，它从起点开始沿着一条路径一直遍历到底，直到无法继续为止，然后回溯到前一个节点并选择另一条路径继续遍历。这个过程一直持续到所有节点都被访问为止。DFS的时间复杂度为O(V+E)，其中V表示节点数，E表示边数。 广度优先算法（BFS）是一种迭代算法，它从起点开始，首先访问与起点相邻的所有节点，然后依次访问与这些节点相邻的未访问节点，直到所有节点都被访问为止。BFS使用队列来存储待访问的节点，先进先出。BFS的时间复杂度为O(V+E)。 这就是关于图的遍历算法的简单介绍，希望能对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值