1- /* demo.js http://github.com/bgrins/javascript-astar
2- MIT License
1+ /* demo.js http://github.com/bgrins/javascript-astar
2+ MIT License
33
4- Set up the demo page for the A* Search
4+ Set up the demo page for the A* Search
55*/
66
77window . 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+ }
1111} ;
1212
1313var WALL = 0 ;
1414var OPEN = 1 ;
1515
1616var generateRandom = function ( width , height , wallFrequency ) {
1717
18- var nodes = [ ] ;
18+ var nodes = [ ] ;
1919
2020 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 ) ;
3535 }
3636
3737
@@ -59,7 +59,7 @@ $(function() {
5959 var grid = new GraphSearch ( $grid , opts , astar . search ) ;
6060
6161 $ ( "#btnGenerate" ) . click ( function ( ) {
62- grid . initialize ( ) ;
62+ grid . initialize ( ) ;
6363 } ) ;
6464
6565 $selectWallFrequency . change ( function ( ) {
@@ -113,11 +113,11 @@ GraphSearch.prototype.setOption = function(opt) {
113113GraphSearch . prototype . initialize = function ( ) {
114114
115115 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 ;
119119
120- $graph . empty ( ) ;
120+ $graph . empty ( ) ;
121121
122122 var cellWidth = ( $graph . width ( ) / this . opts . gridSize ) - 2 ; // -2 for border
123123 var cellHeight = ( $graph . height ( ) / this . opts . gridSize ) - 2 ;
@@ -127,36 +127,36 @@ GraphSearch.prototype.initialize = function() {
127127 for ( var x = 0 ; x < this . opts . gridSize ; x ++ ) {
128128 var $row = $ ( "<div class='clear' />" ) ;
129129
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 {
146146 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 ) ;
149149 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 ) ;
160160 }
161161
162162 this . graph = new Graph ( nodes ) ;
@@ -169,50 +169,50 @@ GraphSearch.prototype.cellClicked = function($end) {
169169
170170 var end = this . nodeFromElement ( $end ) ;
171171
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+ }
176176
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 ) ;
181181
182- var sTime = performance ? performance . now ( ) : new Date ( ) . getTime ( ) ;
182+ var sTime = performance ? performance . now ( ) : new Date ( ) . getTime ( ) ;
183183 var path = this . search ( this . graph , start , end , {
184184 closest : this . opts . closest
185185 } ) ;
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+ }
200200} ;
201201GraphSearch . prototype . drawDebugInfo = function ( show ) {
202202 this . $cells . html ( " " ) ;
203203 var that = this ;
204204 if ( show ) {
205- that . $cells . each ( function ( i ) {
205+ that . $cells . each ( function ( i ) {
206206 var node = that . nodeFromElement ( $ ( this ) ) ;
207- var debug = false ;
207+ var debug = false ;
208208 if ( node . visited ) {
209209 debug = "F: " + node . f + "<br />G: " + node . g + "<br />H: " + node . h ;
210210 }
211211
212- if ( debug ) {
213- $ ( this ) . html ( debug ) ;
214- }
215- } ) ;
212+ if ( debug ) {
213+ $ ( this ) . html ( debug ) ;
214+ }
215+ } ) ;
216216
217217 }
218218} ;
@@ -222,29 +222,29 @@ GraphSearch.prototype.nodeFromElement = function($cell) {
222222GraphSearch . prototype . animateNoPath = function ( ) {
223223 var $graph = this . $graph ;
224224 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 ) ;
230230 } ;
231231 jiggle ( 15 ) ;
232232} ;
233233GraphSearch . 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+ } ;
239239
240240 var self = this ;
241241 // will add start class if final
242242 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
244244 return setStartClass ( path , i ) ;
245245 }
246246 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 ) ;
248248 }
249249 var setStartClass = function ( path , i ) {
250250 if ( i === path . length ) {
@@ -253,11 +253,11 @@ GraphSearch.prototype.animatePath = function(path) {
253253 }
254254 }
255255 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 ) ;
261261 } ;
262262
263263 addClass ( path , 0 )
0 commit comments