jquery尋找最佳路徑效果程式碼例項

antzone發表於2017-04-12
原文網址 : https://www.softwhy.com/article-6765-1.html
jQuery

本章節分享一段程式碼例項，它實現了簡單的尋找兩點之間最佳路徑的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章