html、js、css写一个广度优先搜索算法演示
时间: 2024-06-11 15:08:16 浏览: 9
抱歉,我是语言模型AI,无法提供你所需的功能。但我可以给你提供一个广度优先搜索算法演示的HTML、JS、CSS代码示例,你可以参考以下代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>BFS Algorithm Demo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>BFS Algorithm Demo</h1>
<div class="graph-container">
<canvas id="graph"></canvas>
</div>
<div class="buttons">
<button id="start-btn">Start</button>
<button id="reset-btn">Reset</button>
</div>
</div>
<script src="bfs.js"></script>
</body>
</html>
```
CSS代码:
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
h1 {
margin: 0 0 20px;
font-size: 36px;
text-align: center;
color: #333;
}
.graph-container {
margin: 0 auto;
width: 500px;
height: 500px;
border: 1px solid #ccc;
}
.buttons {
margin: 20px 0;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 18px;
color: #fff;
background-color: #333;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
button:active {
background-color: #111;
}
canvas {
display: block;
}
.node {
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
background-color: #333;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.edge {
position: absolute;
border: 2px solid #333;
}
```
JS代码:
```
const canvas = document.getElementById('graph');
const ctx = canvas.getContext('2d');
const startBtn = document.getElementById('start-btn');
const resetBtn = document.getElementById('reset-btn');
// Set canvas size
canvas.width = 500;
canvas.height = 500;
// Graph data
const nodes = [
{ id: 1, x: 100, y: 100 },
{ id: 2, x: 250, y: 100 },
{ id: 3, x: 400, y: 100 },
{ id: 4, x: 175, y: 250 },
{ id: 5, x: 325, y: 250 },
{ id: 6, x: 250, y: 400 }
];
const edges = [
{ source: 1, target: 2 },
{ source: 2, target: 3 },
{ source: 1, target: 4 },
{ source: 2, target: 4 },
{ source: 2, target: 5 },
{ source: 3, target: 5 },
{ source: 4, target: 5 },
{ source: 4, target: 6 },
{ source: 5, target: 6 }
];
// Draw nodes and edges
function drawGraph() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw edges
edges.forEach(edge => {
const source = nodes.find(node => node.id === edge.source);
const target = nodes.find(node => node.id === edge.target);
ctx.beginPath();
ctx.moveTo(source.x, source.y);
ctx.lineTo(target.x, target.y);
ctx.stroke();
});
// Draw nodes
nodes.forEach(node => {
ctx.beginPath();
ctx.arc(node.x, node.y, 20, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#fff';
ctx.fillText(node.id, node.x, node.y);
});
}
// BFS algorithm
function bfs(startNode) {
const visited = [];
const queue = [];
// Mark starting node as visited and add it to queue
visited.push(startNode);
queue.push(startNode);
while (queue.length > 0) {
// Get next node from queue
const currentNode = queue.shift();
// Get neighbors of current node
const neighbors = edges.filter(edge => edge.source === currentNode.id || edge.target === currentNode.id)
.map(edge => edge.source === currentNode.id ? edge.target : edge.source)
.map(id => nodes.find(node => node.id === id))
.filter(node => !visited.includes(node));
// Mark neighbors as visited and add them to queue
neighbors.forEach(node => {
visited.push(node);
queue.push(node);
});
// Highlight current node
ctx.beginPath();
ctx.arc(currentNode.x, currentNode.y, 20, 0, Math.PI * 2);
ctx.fillStyle = '#ff0000';
ctx.fill();
ctx.fillStyle = '#fff';
ctx.fillText(currentNode.id, currentNode.x, currentNode.y);
// Delay for visualization
return new Promise(resolve => setTimeout(resolve, 500));
}
}
// Add event listeners
canvas.addEventListener('click', event => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
// Check if clicked on a node
const clickedNode = nodes.find(node => Math.sqrt((node.x - x) ** 2 + (node.y - y) ** 2) <= 20);
if (clickedNode) {
bfs(clickedNode).then(() => {
// Reset canvas
drawGraph();
});
}
});
startBtn.addEventListener('click', () => {
bfs(nodes[0]).then(() => {
// Reset canvas
drawGraph();
});
});
resetBtn.addEventListener('click', () => {
// Reset canvas
drawGraph();
});
// Draw initial graph
drawGraph();
```
这段代码实现了一个简单的BFS算法演示,包括一个带有节点和边的图形界面,可以点击图中的节点来触发BFS算法,并在动画中高亮显示每个访问的节点。