js模拟地图最短路径导航算法可视化代码
代码语言：html
所属分类：动画
代码描述：js模拟地图最短路径导航算法可视化代码
代码标签： js 模拟 地图 最短 路径 导航 算法 可视化 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图最短路径导航算法可视化</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
obstacle: '#374151',
visited: '#93C5FD',
path: '#FBBF24',
start: '#10B981',
end: '#EF4444',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.grid-cell {
@apply w-8 h-8 border border-gray-200 transition-all duration-200 flex items-center justify-center;
}
.grid-cell-start {
@apply bg-start text-white;
}
.grid-cell-end {
@apply bg-end text-white;
}
.grid-cell-obstacle {
@apply bg-obstacle;
}
.grid-cell-visited {
@apply bg-visited;
}
.grid-cell-path {
@apply bg-path;
}
.control-btn {
@apply px-4 py-2 rounded-md transition-all duration-200 font-medium flex items-center gap-2;
}
.control-btn-primary {
@apply bg-primary text-white hover:bg-primary/90;
}
.control-btn-secondary {
@apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<header class="mb-8 text-center">
<h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800 mb-2">地图最短路径导航算法可视化</h1>
<p class="text-gray-600 max-w-2xl mx-auto">直观展示Dijkstra和A*算法寻找最短路径的过程，可自定义地图、起点、终点和障碍物</p>
</header>
<div class="flex flex-col lg:flex-row gap-6">
<!-- 控制面板 -->
<div class="lg:w-1/4 bg-white rounded-xl shadow-md p-5">
<h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
<i class="fa fa-sliders mr-2 text-primary"></i>控制面板
</h2>
<div class="space-y-5">
<!-- 算法选择 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">选择算法</label>
<div class="flex gap-2">
<button id="dijkstra-btn" class="control-btn control-btn-primary flex-1">
<i class="fa fa-compass"></i> Dijkstra
</button>
<button id="astar-btn" class="control-btn control-btn-secondary flex-1">
<i class="fa fa-star"></i> A*
</button>
</div>
</div>
<!-- 地图控制 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">地图操作</label>
<div class="grid grid-cols-2 gap-2">
<button id="clear-btn" class="control-btn control-btn-secondary">
<i class="fa fa-trash"></i> 清空
</button>
<button id="random-btn" class="control-btn control-btn-secondary">
<i class="fa fa-random"></i> 随机障碍
</button>
<button id="start-btn" class="control-btn control-btn-primary">
<i class="fa fa-play"></i> 开始
</button>
<button id="reset-btn" class="control-btn control-btn-se.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0