forked from qianshu/astar
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (148 loc) · 3.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A*</title>
<script src="http://oss.aliyuncs.com/bigbow/static/jquery.js"></script>
<script src="js/element.js"></script>
<script src="js/createElements.js"></script>
<script src="js/path.js"></script>
<style>
.item {
position:absolute;
border:1px solid #000;
cursor:pointer;
height:30px;
width:30px;
}
.item:hover {
cursor:point;
}
.status-0 {
background:#eee;
}
.status-3 {
background:yellow;
}
.status-start {
background:green;
}
.status-end {
background:red;
}
.status-path {
background:#000;
}
#J-container {
border:1px solid #000;
}
</style>
</head>
<body>
<h1>A*算法</h1>
<p>
黄颜色的为死节点，任意选择两个节点试试吧。
</p>
<div id="J-container">
</div>
</body>
<script>
/* 初始化面板参数开始 */
var row = 20, col = 20, itemWidth = 30, borderWidth = 1, containerId = "J-container";
/* 初始化面板参数借宿 */
/* 初始化面板开始 */
var jContainer = $("#" + containerId);
jContainer.css("position", "relative");
var boxWidth = itemWidth + 2 * borderWidth, boxHeight = itemWidth + 2 * borderWidth;
jContainer.width(boxWidth * row);
jContainer.height(boxHeight * col);
var elements = createElements(row, col, {
afterCreate : function() {
if (Math.random() * 10 > 7) {
this.setStatus(3);
}
}
});
for (var i = 0; i < elements.length; i++) {
for (var j = 0; j < elements[i].length; j++) {
var me = elements[i][j];
var jItem = $("<div id=" + me.toString() + " class=\"item status-" + elements[i][j].getStatus() + "\"></div>");
jItem.css({
left : boxWidth * j,
top : boxHeight * i
});
jContainer.append(jItem);
}
}
/* 初始化面板结束 */
var startElement, endElement, elementCache = [], calculatePathSwitch = false;
$("#J-container").delegate(".item", "click", function(e) {
var id = e.target.id;
var coordinate = id.split('-'), x = coordinate[2], y = coordinate[3];
if (startElement) {
endElement = elements[x][y];
} else {
startElement = elements[x][y];
//todo:如果是第一个选中的元素，则显示可到达的地方
if (!calculatePathSwitch) {
$("#" + startElement).addClass("status-start");
}
}
if (startElement && endElement) {
elementCache.push([startElement, endElement]);
if (!calculatePathSwitch) {
calculatePathSwitch = true;
calculatePath();
}
startElement = endElement = null;
}
});
var calculatePath = function() {
setTimeout(function() {
if (!elementCache.length) {
calculatePathSwitch = false;
return;
}
//获取缓存内要寻找路径起点和终点数组
var elArr = elementCache.shift();
var startEl = elArr[0];
var endEl = elArr[1];
var jStartEl = $("#" + startEl);
var jEndEl = $("#" + endEl)
jStartEl.addClass("status-start");
jEndEl.addClass("status-end");
//获取起点和重点的路径
var elements = getPath(startEl, endEl)[endEl];
if (!elements.length) {
calculatePath();
}
var nearElement, index = 0;
var roam = function() {
nearElement = elements[index];
if (nearElement) {
var jNearElement = $("#" + nearElement);
jNearElement.css({
"opacity" : 0.3
});
if (nearElement != endEl) {
jNearElement.addClass("status-path");
}
jNearElement.animate({
opacity : 1
}, 100, function() {
jNearElement.removeClass("status-path");
index++;
roam();
});
} else {
jStartEl.removeClass("status-start");
jEndEl.removeClass("status-end");
calculatePath();
}
};
roam();
}, 15);
};
</script>
</html>