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>

回复

我来回复
  • 暂无回复内容