1
- /* demo.js http://github.com/bgrins/javascript-astar
2
- MIT License
1
+ /* demo.js http://github.com/bgrins/javascript-astar
2
+ MIT License
3
3
4
- Set up the demo page for the A* Search
4
+ Set up the demo page for the A* Search
5
5
*/
6
6
7
7
window . log = function ( ) {
8
- if ( this . console ) {
9
- console . log ( Array . prototype . slice . call ( arguments ) ) ;
10
- }
8
+ if ( this . console ) {
9
+ console . log ( Array . prototype . slice . call ( arguments ) ) ;
10
+ }
11
11
} ;
12
12
13
13
var WALL = 0 ;
14
14
var OPEN = 1 ;
15
15
16
16
var generateRandom = function ( width , height , wallFrequency ) {
17
17
18
- var nodes = [ ] ;
18
+ var nodes = [ ] ;
19
19
20
20
for ( var x = 0 ; x < width ; x ++ ) {
21
- var nodeRow = [ ] ;
22
- var gridRow = [ ] ;
23
-
24
- for ( var y = 0 ; y < height ; y ++ ) {
25
-
26
- var isWall = Math . floor ( Math . random ( ) * ( 1 / wallFrequency ) ) ;
27
- if ( isWall == 0 ) {
28
- nodeRow . push ( WALL ) ;
29
- }
30
- else {
31
- nodeRow . push ( OPEN ) ;
32
- }
33
- }
34
- nodes . push ( nodeRow ) ;
21
+ var nodeRow = [ ] ;
22
+ var gridRow = [ ] ;
23
+
24
+ for ( var y = 0 ; y < height ; y ++ ) {
25
+
26
+ var isWall = Math . floor ( Math . random ( ) * ( 1 / wallFrequency ) ) ;
27
+ if ( isWall == 0 ) {
28
+ nodeRow . push ( WALL ) ;
29
+ }
30
+ else {
31
+ nodeRow . push ( OPEN ) ;
32
+ }
33
+ }
34
+ nodes . push ( nodeRow ) ;
35
35
}
36
36
37
37
@@ -59,7 +59,7 @@ $(function() {
59
59
var grid = new GraphSearch ( $grid , opts , astar . search ) ;
60
60
61
61
$ ( "#btnGenerate" ) . click ( function ( ) {
62
- grid . initialize ( ) ;
62
+ grid . initialize ( ) ;
63
63
} ) ;
64
64
65
65
$selectWallFrequency . change ( function ( ) {
@@ -113,11 +113,11 @@ GraphSearch.prototype.setOption = function(opt) {
113
113
GraphSearch . prototype . initialize = function ( ) {
114
114
115
115
var self = this ;
116
- this . grid = [ ] ;
117
- var nodes = [ ] ;
118
- var $graph = this . $graph ;
116
+ this . grid = [ ] ;
117
+ var nodes = [ ] ;
118
+ var $graph = this . $graph ;
119
119
120
- $graph . empty ( ) ;
120
+ $graph . empty ( ) ;
121
121
122
122
var cellWidth = ( $graph . width ( ) / this . opts . gridSize ) - 2 ; // -2 for border
123
123
var cellHeight = ( $graph . height ( ) / this . opts . gridSize ) - 2 ;
@@ -127,36 +127,36 @@ GraphSearch.prototype.initialize = function() {
127
127
for ( var x = 0 ; x < this . opts . gridSize ; x ++ ) {
128
128
var $row = $ ( "<div class='clear' />" ) ;
129
129
130
- var nodeRow = [ ] ;
131
- var gridRow = [ ] ;
132
-
133
- for ( var y = 0 ; y < this . opts . gridSize ; y ++ ) {
134
- var id = "cell_" + x + "_" + y ;
135
- var $cell = $cellTemplate . clone ( ) ;
136
- $cell . attr ( "id" , id ) . attr ( "x" , x ) . attr ( "y" , y ) ;
137
- $row . append ( $cell ) ;
138
- gridRow . push ( $cell ) ;
139
-
140
- var isWall = Math . floor ( Math . random ( ) * ( 1 / self . opts . wallFrequency ) ) ;
141
- if ( isWall == 0 ) {
142
- nodeRow . push ( WALL ) ;
143
- $cell . addClass ( css . wall ) ;
144
- }
145
- else {
130
+ var nodeRow = [ ] ;
131
+ var gridRow = [ ] ;
132
+
133
+ for ( var y = 0 ; y < this . opts . gridSize ; y ++ ) {
134
+ var id = "cell_" + x + "_" + y ;
135
+ var $cell = $cellTemplate . clone ( ) ;
136
+ $cell . attr ( "id" , id ) . attr ( "x" , x ) . attr ( "y" , y ) ;
137
+ $row . append ( $cell ) ;
138
+ gridRow . push ( $cell ) ;
139
+
140
+ var isWall = Math . floor ( Math . random ( ) * ( 1 / self . opts . wallFrequency ) ) ;
141
+ if ( isWall == 0 ) {
142
+ nodeRow . push ( WALL ) ;
143
+ $cell . addClass ( css . wall ) ;
144
+ }
145
+ else {
146
146
var cell_weight = ( $ ( "#generateWeights" ) . prop ( "checked" ) ? ( Math . floor ( Math . random ( ) * 3 ) ) * 2 + 1 : 1 ) ;
147
- nodeRow . push ( cell_weight ) ;
148
- $cell . addClass ( 'weight' + cell_weight ) ;
147
+ nodeRow . push ( cell_weight ) ;
148
+ $cell . addClass ( 'weight' + cell_weight ) ;
149
149
if ( $ ( "#displayWeights" ) . prop ( "checked" ) ) { $cell . html ( cell_weight ) } ;
150
- if ( ! startSet ) {
151
- $cell . addClass ( css . start ) ;
152
- startSet = true ;
153
- }
154
- }
155
- }
156
- $graph . append ( $row ) ;
157
-
158
- this . grid . push ( gridRow ) ;
159
- nodes . push ( nodeRow ) ;
150
+ if ( ! startSet ) {
151
+ $cell . addClass ( css . start ) ;
152
+ startSet = true ;
153
+ }
154
+ }
155
+ }
156
+ $graph . append ( $row ) ;
157
+
158
+ this . grid . push ( gridRow ) ;
159
+ nodes . push ( nodeRow ) ;
160
160
}
161
161
162
162
this . graph = new Graph ( nodes ) ;
@@ -169,50 +169,50 @@ GraphSearch.prototype.cellClicked = function($end) {
169
169
170
170
var end = this . nodeFromElement ( $end ) ;
171
171
172
- if ( $end . hasClass ( css . wall ) || $end . hasClass ( css . start ) ) {
173
- log ( "clicked on wall or start..." , $end ) ;
174
- return ;
175
- }
172
+ if ( $end . hasClass ( css . wall ) || $end . hasClass ( css . start ) ) {
173
+ log ( "clicked on wall or start..." , $end ) ;
174
+ return ;
175
+ }
176
176
177
- this . $cells . removeClass ( css . finish ) ;
178
- $end . addClass ( "finish" ) ;
179
- var $start = this . $cells . filter ( "." + css . start ) ;
180
- var start = this . nodeFromElement ( $start ) ;
177
+ this . $cells . removeClass ( css . finish ) ;
178
+ $end . addClass ( "finish" ) ;
179
+ var $start = this . $cells . filter ( "." + css . start ) ;
180
+ var start = this . nodeFromElement ( $start ) ;
181
181
182
- var sTime = performance ? performance . now ( ) : new Date ( ) . getTime ( ) ;
182
+ var sTime = performance ? performance . now ( ) : new Date ( ) . getTime ( ) ;
183
183
var path = this . search ( this . graph , start , end , {
184
184
closest : this . opts . closest
185
185
} ) ;
186
- var fTime = performance ? performance . now ( ) : new Date ( ) . getTime ( ) ;
187
- var duration = ( fTime - sTime ) . toFixed ( 2 ) ;
188
-
189
- if ( ! path || path . length == 0 ) {
190
- $ ( "#message" ) . text ( "couldn't find a path (" + duration + "ms)" ) ;
191
- this . animateNoPath ( ) ;
192
- }
193
- else {
194
- $ ( "#message" ) . text ( "search took " + duration + "ms." ) ;
195
- if ( this . opts . debug ) {
196
- this . drawDebugInfo ( this . opts . debug ) ;
197
- }
198
- this . animatePath ( path ) ;
199
- }
186
+ var fTime = performance ? performance . now ( ) : new Date ( ) . getTime ( ) ;
187
+ var duration = ( fTime - sTime ) . toFixed ( 2 ) ;
188
+
189
+ if ( ! path || path . length == 0 ) {
190
+ $ ( "#message" ) . text ( "couldn't find a path (" + duration + "ms)" ) ;
191
+ this . animateNoPath ( ) ;
192
+ }
193
+ else {
194
+ $ ( "#message" ) . text ( "search took " + duration + "ms." ) ;
195
+ if ( this . opts . debug ) {
196
+ this . drawDebugInfo ( this . opts . debug ) ;
197
+ }
198
+ this . animatePath ( path ) ;
199
+ }
200
200
} ;
201
201
GraphSearch . prototype . drawDebugInfo = function ( show ) {
202
202
this . $cells . html ( " " ) ;
203
203
var that = this ;
204
204
if ( show ) {
205
- that . $cells . each ( function ( i ) {
205
+ that . $cells . each ( function ( i ) {
206
206
var node = that . nodeFromElement ( $ ( this ) ) ;
207
- var debug = false ;
207
+ var debug = false ;
208
208
if ( node . visited ) {
209
209
debug = "F: " + node . f + "<br />G: " + node . g + "<br />H: " + node . h ;
210
210
}
211
211
212
- if ( debug ) {
213
- $ ( this ) . html ( debug ) ;
214
- }
215
- } ) ;
212
+ if ( debug ) {
213
+ $ ( this ) . html ( debug ) ;
214
+ }
215
+ } ) ;
216
216
217
217
}
218
218
} ;
@@ -222,29 +222,29 @@ GraphSearch.prototype.nodeFromElement = function($cell) {
222
222
GraphSearch . prototype . animateNoPath = function ( ) {
223
223
var $graph = this . $graph ;
224
224
var jiggle = function ( lim , i ) {
225
- if ( i >= lim ) { $graph . css ( "top" , 0 ) . css ( "left" , 0 ) ; return ; }
226
- if ( ! i ) i = 0 ;
227
- i ++ ;
228
- $graph . css ( "top" , Math . random ( ) * 6 ) . css ( "left" , Math . random ( ) * 6 ) ;
229
- setTimeout ( function ( ) { jiggle ( lim , i ) } , 5 ) ;
225
+ if ( i >= lim ) { $graph . css ( "top" , 0 ) . css ( "left" , 0 ) ; return ; }
226
+ if ( ! i ) i = 0 ;
227
+ i ++ ;
228
+ $graph . css ( "top" , Math . random ( ) * 6 ) . css ( "left" , Math . random ( ) * 6 ) ;
229
+ setTimeout ( function ( ) { jiggle ( lim , i ) } , 5 ) ;
230
230
} ;
231
231
jiggle ( 15 ) ;
232
232
} ;
233
233
GraphSearch . prototype . animatePath = function ( path ) {
234
- var grid = this . grid ;
235
- var timeout = 1000 / grid . length ;
236
- var elementFromNode = function ( node ) {
237
- return grid [ node . x ] [ node . y ] ;
238
- } ;
234
+ var grid = this . grid ;
235
+ var timeout = 1000 / grid . length ;
236
+ var elementFromNode = function ( node ) {
237
+ return grid [ node . x ] [ node . y ] ;
238
+ } ;
239
239
240
240
var self = this ;
241
241
// will add start class if final
242
242
var removeClass = function ( path , i ) {
243
- if ( i >= path . length ) { // finished removing path, set start positions
243
+ if ( i >= path . length ) { // finished removing path, set start positions
244
244
return setStartClass ( path , i ) ;
245
245
}
246
246
elementFromNode ( path [ i ] ) . removeClass ( css . active ) ;
247
- setTimeout ( function ( ) { removeClass ( path , i + 1 ) } , timeout * path [ i ] . cost ) ;
247
+ setTimeout ( function ( ) { removeClass ( path , i + 1 ) } , timeout * path [ i ] . cost ) ;
248
248
}
249
249
var setStartClass = function ( path , i ) {
250
250
if ( i === path . length ) {
@@ -253,11 +253,11 @@ GraphSearch.prototype.animatePath = function(path) {
253
253
}
254
254
}
255
255
var addClass = function ( path , i ) {
256
- if ( i >= path . length ) { // Finished showing path, now remove
257
- return removeClass ( path , 0 ) ;
258
- }
259
- elementFromNode ( path [ i ] ) . addClass ( css . active ) ;
260
- setTimeout ( function ( ) { addClass ( path , i + 1 ) } , timeout * path [ i ] . cost ) ;
256
+ if ( i >= path . length ) { // Finished showing path, now remove
257
+ return removeClass ( path , 0 ) ;
258
+ }
259
+ elementFromNode ( path [ i ] ) . addClass ( css . active ) ;
260
+ setTimeout ( function ( ) { addClass ( path , i + 1 ) } , timeout * path [ i ] . cost ) ;
261
261
} ;
262
262
263
263
addClass ( path , 0 )
0 commit comments