jquery寻找最佳路径效果代码实例
分类：实例代码
本章节分享一段代码实例，它实现了简单的寻找两点之间最佳路径的效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<link rel="stylesheet" href="demo/jQuery/css/antzone.css" type="text/css" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
.main {
width: 300px;
margin: 0 auto;
}
.main ul {
height: 300px;
border: 1px solid #ccc;
border-bottom-width: 0;
border-right-width: 0;
width: 300px;
}
.main li {
box-sizing: border-box;
border: 1px solid #ccc;
border-top-width: 0;
border-left-width: 0;
width: 20px;
height: 20px;
float: left;
}
</style>
<script>
$(function () {
var map_arr = [], start_p = [], end_p = [], w = 15, h = 15, li_arr = [], state = 1;
var G = 0, G_open = 0;
var H = 0, H_open = 0;
var F = 0, F_open = 0;
for (var i = 0; i < w; i++) {
map_arr[i] = [];
for (var j = 0; j < h; j++) {
li_arr.push("<li x='" + i + "' y='" + j + "'></li>");
map_arr[i][j] = 1;
}
}
$(".main ul").append(li_arr.join(""));
$(".main ul li").click(function () {
var color = "", x = $(this).attr("x"), y = $(this).attr("y");
switch (state) {
case 1: color = "#ff0000"; start_p = [x, y]; break;
case 2: color = "#0000ff"; end_p = [x, y]; break;
case 3: color = "#000000"; map_arr[x][y] = 0; break;
}
$(this).css("background-color", color);
});
$(".start_btn").click(function () {
state = 1;
})
$(".end_btn").click(function () {
state = 2;
})
$(".zaw_btn").click(function () {
state = 3;
})
$(".xunlu_btn").click(function () {
var open_arr = [], close_arr = [];
//将起点值存入open表中
open_arr.push([start_p[0], start_p[1], 0, Math.sqrt(Math.pow((end_p[0] - start_p[0]), 2) + Math.pow((end_p[1] - start_p[1]), 2)), null]);
a = (function (obj) {
//循环出8个方向的位置
for (var i = obj[0] - 1, len_i = i + 3; i < len_i; i++) {
for (var j = obj[1] - 1, len_j = j + 3; j < len_j; j++) {
if ((obj[0] == i && obj[1] == j))
continue;
if (i < 0 || i > 14 || j < 0 || j > 14 || map_arr[i][j] == 0)
continue;
//防止从中间斜着穿过
if ((i != obj[0] && j != obj[1]) && (map_arr[obj[0]][j] == 0) && (map_arr[i][obj[1]] == 0))
continue;
//找到终点时
if (i == end_p[0] && j == end_p[1]) {
//将父节点加入数组中，并循环调用对象的第5个节点（存储父节点），找出父节点
var lujing_arr = [];
lujing_arr.push([obj[0], obj[1]])
while (obj[4]) {
lujing_arr.unshift([obj[4][0], obj[4][1]]);
obj = obj[4];
}
return lujing_arr;
}
var k = 0;
G = obj[2] + (((i == obj[0]) || (j == obj[1])) ? 1 : 1.4); //斜着走需花费更多代价
H = Math.sqrt(Math.pow((end_p[0] - i), 2) + Math.pow((end_p[1] - j), 2));
F = G + H;
//如果在open表
if (isExit([i, j], open_arr) > -1) {
k = isExit([i, j], open_arr);
G_open = open_arr[k][2];
H_open = open_arr[k][3];
F_open = G_open + H_open;
//如果F小于，则替换open表中的点
if (F < F_open) {
open_arr[k][2] = G;
open_arr[k][3] = H;
open_arr[k][4] = obj;
}
}
//如果点已在close表中，不做任何处理
else if (isExit([i, j], close_arr) > -1) {
}
else {
//将父节点obj也加入数组中
open_arr.push([i, j, G, H, obj])
}
}
}
//删除第一个值，再排序，选出F值最小的再进行递归
close_arr.push(open_arr.shift());
open_arr = arr_sort(open_arr);
if (open_arr.length == 0)
return [];
else {
//递归匿名函数
return arguments.callee(open_arr[0])
}
})(open_arr[0]);
//console.log(a);
//循环显示路径（i==0时是起点）
for (var i = 1; i < a.length; i++) {
$(".main ul li").eq(Number(a[i][0] * 15) + Number(a[i][1])).css("background-color", "#00ff00").html(i);
}
})
//判断数组中是否存在该位置
function isExit(p, arr) {
for (var i = 0; i < arr.length; i++) {
if (arr[i][0] == p[0] && arr[i][1] == p[1]) {
return i;
}
}
return -1;
}
//数组根据F值排序
function arr_sort(arr) {
function s(a, b) {
return a[2] + a[3] - b[2] - b[3];
}
return arr.sort(s);
}
})
</script>
</head>
<body>
<div class="main">
<ul></ul>
<p>
<button class="start_btn">起点</button>
<button class="end_btn">终点</button>
<button class="zaw_btn">障碍物</button>
<button class="xunlu_btn">寻路</button>
</p>
</div>
</body>
</html>