diff --git a/star.js/js/star.js b/star.js/js/star.js index 67bbe95..3b79175 100644 --- a/star.js/js/star.js +++ b/star.js/js/star.js @@ -1,106 +1,108 @@ -var initialize_a_star = function( dom_container, level_index, theme ) { +let initialize_a_star = function( dom_container, level_index, theme ) { // kinda enums - var cell = { WALL: '#', BALL: '@', CUBE: 'H', EMPTY: ' ', GIFT: 'x' }; - var direction = { UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 }; + let cell = { WALL: '#', BALL: '@', CUBE: 'H', EMPTY: ' ', GIFT: 'x' } + let direction = { UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 } - var assets = { - levels: [ "#################@## x#H## x #### ##x ## ## x #### x x x ## x x## x ## ##x x#################", - " # # # # # ### x @# #x #x x # # x x # # # x # # #H# x # # # # #xx## # # # # ", - "################# x#@## ## ##H## #x x ## x x## x## #x x x# x### ##x #x x x####x ##x #################", - "################# #H## # ###x#x x#x#x#x#x## # #x x# # # ####x#x#x x#x#x#x## # ## # #@ #################", - " ############## #@ # # # ## #x # x x # ### # # ##x #x# #### # x # ##x# # # # #H## # x# #x# ############## ", - " ############ # x #x x# # x # ## # x ##@ x ### x # ### x # ##H # x ##x #################", - "################# # ## ### #x ##x# #x #x # # # # # # ### ## ## # #x# #x# # ## @#x H #x#################", - "############### # x## ### #x ## x ## x## # #x ### ## #x# ### # x#x ##xHx# x #@# ### # ###############", - " # ########### #x#x # @##x x# x # # # x## x# ## #x #xHx x## x## # #x#x # # # ############ ", - " ########### #### x ## H ###x x# x## x #x #x # # # x # x##x#x # x# #@# #x ### ### # # # # ######### # #", - "################# # @## #xx xx #### x ## x##x #x#xx ##### ## ## ##x x# x H x###x### # ## ## ########### ", - "## ## #### #@#####x ### x### xx x ## ## ##x #x# ## # x ###x ## ## ## ## #H# ## x ## x #################", - " ############## # @# x ### # #x x## ## x # ## x #x## # x ### x x #x##H # x # # # ############## ", - "#################x#x x#x## x#@ ## ## H x ## x# ## x ## x# # ##x#x x#x#################", - " ###### ####### # x# x ## # x # # x ## @# #xx #x # # # # x H# ##x # #x # # x # #x x# ############## ", - "################## H#x x x##x @x#x #### ### x #### x#x# ##xx x#x ### x ####x ###x# # #################", - "################# x# #@ ## # x#xx#x # ## #x##x# x ## x# x# ## x#x x# ## # # ##x# # ## x #x H #################", - "################# x x H# ## #x#x #x ## #x# #x ## x # x#x ## #x# # x# ## x#x # x # ##x#@ # # #################", - "#################x ## ##x## # # #x ## x# x## x ## # #x ## # x# ## ## x# ##x #H## x# #x ##@#################", - "################# x#x ###x x# ##x ### # # x # # ## H # ## # @x## # # x # # ### x## #x x### x#x #################", - "################# ### x ### # # ### ##x x ## x x x ### # ###x ## x x @ H x xx################# ", - "#################x# #x# #x # ## # ##x # #x x ### #x x #### x # ###x ## #@#H x ################# ", - " ############## # # #x# #x # ## x # ### # x #x ## #x # xx x ###x # ## x ## #@#H x # ############## ", - "################# # ### ##x x ##x### #x x# #### xx x# ## ## #x x # ## ## ## @#H###xx################# ", - "################# # ## x ##x x ## #x x ## ## x ## #x ## #x x# x ## ##x #@ H ################# " ] - }; + let assets = { + levels: [ + "#################@## x#H## x #### ##x ## ## x #### x x x ## x x## x ## ##x x#################", + " # # # # # ### x @# #x #x x # # x x # # # x # # #H# x # # # # #xx## # # # # ", + "################# x#@## ## ##H## #x x ## x x## x## #x x x# x### ##x #x x x####x ##x #################", + "################# #H## # ###x#x x#x#x#x#x## # #x x# # # ####x#x#x x#x#x#x## # ## # #@ #################", + " ############## #@ # # # ## #x # x x # ### # # ##x #x# #### # x # ##x# # # # #H## # x# #x# ############## ", + " ############ # x #x x# # x # ## # x ##@ x ### x # ### x # ##H # x ##x #################", + "################# # ## ### #x ##x# #x #x # # # # # # ### ## ## # #x# #x# # ## @#x H #x#################", + "############### # x## ### #x ## x ## x## # #x ### ## #x# ### # x#x ##xHx# x #@# ### # ###############", + " # ########### #x#x # @##x x# x # # # x## x# ## #x #xHx x## x## # #x#x # # # ############ ", + " ########### #### x ## H ###x x# x## x #x #x # # # x # x##x#x # x# #@# #x ### ### # # # # ######### # #", + "################# # @## #xx xx #### x ## x##x #x#xx ##### ## ## ##x x# x H x###x### # ## ## ########### ", + "## ## #### #@#####x ### x### xx x ## ## ##x #x# ## # x ###x ## ## ## ## #H# ## x ## x #################", + " ############## # @# x ### # #x x## ## x # ## x #x## # x ### x x #x##H # x # # # ############## ", + "#################x#x x#x## x#@ ## ## H x ## x# ## x ## x# # ##x#x x#x#################", + " ###### ####### # x# x ## # x # # x ## @# #xx #x # # # # x H# ##x # #x # # x # #x x# ############## ", + "################## H#x x x##x @x#x #### ### x #### x#x# ##xx x#x ### x ####x ###x# # #################", + "################# x# #@ ## # x#xx#x # ## #x##x# x ## x# x# ## x#x x# ## # # ##x# # ## x #x H #################", + "################# x x H# ## #x#x #x ## #x# #x ## x # x#x ## #x# # x# ## x#x # x # ##x#@ # # #################", + "#################x ## ##x## # # #x ## x# x## x ## # #x ## # x# ## ## x# ##x #H## x# #x ##@#################", + "################# x#x ###x x# ##x ### # # x # # ## H # ## # @x## # # x # # ### x## #x x### x#x #################", + "################# ### x ### # # ### ##x x ## x x x ### # ###x ## x x @ H x xx################# ", + "#################x# #x# #x # ## # ##x # #x x ### #x x #### x # ###x ## #@#H x ################# ", + " ############## # # #x# #x # ## x # ### # x #x ## #x # xx x ###x # ## x ## #@#H x # ############## ", + "################# # ### ##x x ##x### #x x# #### xx x# ## ## #x x # ## ## ## @#H###xx################# ", + "################# # ## x ##x x ## #x x ## ## x ## #x ## #x x# x ## ##x #@ H ################# " + ] + } ////// FUNCTIONS ////// - var count_gifts = function( ) { - var n = 0; - for ( var i = level_infos.height * level_infos.width ; i-- ; ) { + let count_gifts = function() { + let n = 0 + for ( let i = level_infos.height * level_infos.width ; i-- ; ) { if ( state.board[ i ] == cell.GIFT ) { - n++; + n++ } } - return n; - }; + return n + } - var get_pos = function( actor ) { - var p = state.board.indexOf( actor, state.board ); - var pos = [ ]; - pos[ 1 ] = Math.floor( p / level_infos.width ); /* y */ - pos[ 0 ] = p - ( pos[ 1 ] * level_infos.width ); /* x */ + let get_pos = function( actor ) { + let p = state.board.indexOf( actor, state.board ) + let pos = [] + pos[ 1 ] = Math.floor( p / level_infos.width ) /* y */ + pos[ 0 ] = p - ( pos[ 1 ] * level_infos.width ) /* x */ - return pos; - }; + return pos + } - var get_cell = function( x, y ) { - return state.board[ x + ( y * level_infos.width ) ]; - }; + let get_cell = function( x, y ) { + return state.board[ x + ( y * level_infos.width ) ] + } - var set_cell = function( x, y, value ) { - var p = x + ( y * level_infos.width ); - state.board = [ state.board.substring( 0, p ), value, state.board.substring( p+1, state.board.length ) ].join( '' ); - }; + let set_cell = function( x, y, value ) { + let p = x + ( y * level_infos.width ) + state.board = [ state.board.substring( 0, p ), value, state.board.substring( p+1, state.board.length ) ].join( '' ) + } - var switch_actor = function( ) { - state.moving = ( state.moving == cell.BALL ) ? cell.CUBE : cell.BALL; - }; + let switch_actor = function() { + state.moving = ( state.moving == cell.BALL ) ? cell.CUBE : cell.BALL + } - var won_or_not = function( ) { - return count_gifts( ) === 0; - }; + let won_or_not = function() { + return count_gifts() === 0 + } - var load_level = function( index ) { + let load_level = function( index ) { return( { moving: cell.BALL, distance_travelled: 0, level: index, board: assets.levels[ index ], - it_s_over: false } ); - }; + it_s_over: false } ) + } - var make_a_move = function( where ) { - var motion = [ 0, 0 ]; - var item_coord = get_pos( state.moving ); + let make_a_move = function( where ) { + let motion = [ 0, 0 ] + let item_coord = get_pos( state.moving ) /* Setup the motion vector according to direction.*/ switch( where ) { case direction.UP: - motion[ 1 ]--; - break; + motion[ 1 ]-- + break case direction.DOWN: - motion[ 1 ]++; - break; + motion[ 1 ]++ + break case direction.LEFT: - motion[ 0 ]--; - break; + motion[ 0 ]-- + break case direction.RIGHT: - motion[ 0 ]++; - break; - default: break; + motion[ 0 ]++ + break + default: break } - var path = [ ]; - path[ 0 ] = [ ]; - path[ 0 ][ 0 ] = item_coord[ 0 ]; - path[ 0 ][ 1 ] = item_coord[ 1 ]; + let path = [] + path[ 0 ] = [] + path[ 0 ][ 0 ] = item_coord[ 0 ] + path[ 0 ][ 1 ] = item_coord[ 1 ] /* Calculating arrival coordinates */ while ( /* Hairy conditions ahead */ /* target cell is within level's boundaries */ @@ -112,139 +114,146 @@ var initialize_a_star = function( dom_container, level_index, theme ) { || ( state.moving == cell.BALL && ( get_cell( item_coord[ 0 ] + motion[ 0 ], item_coord[ 1 ] + motion[ 1 ] ) == cell.GIFT ) ) ) { - set_cell( item_coord[ 0 ], item_coord[ 1 ], cell.EMPTY ); /* empty the origin cell */ - item_coord[ 0 ] += motion[ 0 ]; /* move coordinate */ - item_coord[ 1 ] += motion[ 1 ]; /* to those of target cells */ + set_cell( item_coord[ 0 ], item_coord[ 1 ], cell.EMPTY ) /* empty the origin cell */ + item_coord[ 0 ] += motion[ 0 ] /* move coordinate */ + item_coord[ 1 ] += motion[ 1 ] /* to those of target cells */ - var push_pos = path.length; - path[ push_pos ] = [ ]; - path[ push_pos ][ 0 ] = item_coord[ 0 ]; - path[ push_pos ][ 1 ] = item_coord[ 1 ]; + let push_pos = path.length + path[ push_pos ] = [] + path[ push_pos ][ 0 ] = item_coord[ 0 ] + path[ push_pos ][ 1 ] = item_coord[ 1 ] - set_cell( item_coord[ 0 ], item_coord[ 1 ], state.moving ); /* move actor into target cell */ + set_cell( item_coord[ 0 ], item_coord[ 1 ], state.moving ) /* move actor into target cell */ } - return path; - }; + return path + } ////// HTML/Canvas version specific functions - var load_sprites = function( theme ) { - assets.sprites = { }; - assets.sprites.ball = new Image(); - assets.sprites.ball.src = "themes/" + theme + "/tex_ball.png"; - assets.sprites.ball_selected = new Image(); - assets.sprites.ball_selected.src = "themes/" + theme + "/tex_ball_selected.png"; - assets.sprites.cube = new Image(); - assets.sprites.cube.src = "themes/" + theme + "/tex_cube.png"; - assets.sprites.cube_selected = new Image(); - assets.sprites.cube_selected.src = "themes/" + theme + "/tex_cube_selected.png"; - assets.sprites.wall = new Image(); - assets.sprites.wall.src = "themes/" + theme + "/tex_wall.png"; - assets.sprites.empty = new Image(); - assets.sprites.empty.src = "themes/" + theme + "/tex_empty.png"; - assets.sprites.gift = new Image(); - assets.sprites.gift.src = "themes/" + theme + "/tex_gift.png"; - }; + let load_sprites = function( theme ) { + assets.sprites = { } + assets.sprites.ball = new Image() + assets.sprites.ball.src = "themes/" + theme + "/tex_ball.png" + assets.sprites.ball_selected = new Image() + assets.sprites.ball_selected.src = "themes/" + theme + "/tex_ball_selected.png" + assets.sprites.cube = new Image() + assets.sprites.cube.src = "themes/" + theme + "/tex_cube.png" + assets.sprites.cube_selected = new Image() + assets.sprites.cube_selected.src = "themes/" + theme + "/tex_cube_selected.png" + assets.sprites.wall = new Image() + assets.sprites.wall.src = "themes/" + theme + "/tex_wall.png" + assets.sprites.empty = new Image() + assets.sprites.empty.src = "themes/" + theme + "/tex_empty.png" + assets.sprites.gift = new Image() + assets.sprites.gift.src = "themes/" + theme + "/tex_gift.png" + } - var draw_cell = function( sprite, x, y ) { + let draw_cell = function( sprite, x, y ) { DOM_infos.canvas.context.drawImage( sprite, x * level_infos.cell.width, y * level_infos.cell.height, level_infos.cell.width, - level_infos.cell.height ); - }; + level_infos.cell.height ) + } - var display_switch_actor = function( ) { - var ball_pos = get_pos( cell.BALL ); - var cube_pos = get_pos( cell.CUBE ); + let display_switch_actor = function() { + let ball_pos = get_pos( cell.BALL ) + let cube_pos = get_pos( cell.CUBE ) // redraw ball - draw_cell( ( state.moving == cell.BALL ) ? assets.sprites.ball_selected : assets.sprites.ball, ball_pos[ 0 ], ball_pos[ 1 ] ); + draw_cell( ( state.moving == cell.BALL ) ? assets.sprites.ball_selected : assets.sprites.ball, ball_pos[ 0 ], ball_pos[ 1 ] ) // redraw cube - draw_cell( ( state.moving == cell.CUBE ) ? assets.sprites.cube_selected : assets.sprites.cube, cube_pos[ 0 ], cube_pos[ 1 ] ); - }; + draw_cell( ( state.moving == cell.CUBE ) ? assets.sprites.cube_selected : assets.sprites.cube, cube_pos[ 0 ], cube_pos[ 1 ] ) + } + + let full_display_on_canvas = function() { + for ( let i=0 ; i < level_infos.height ; i++ ) { + for ( let j=0 ; j < level_infos.width ; j++ ) { + let c = get_cell( j, i ) + let sprite - var full_display_on_canvas = function( ) { - for ( var i=0 ; i < level_infos.height ; i++ ) { - for ( var j=0 ; j < level_infos.width ; j++ ) { - var c = get_cell( j, i ); - var sprite; switch( c ) { - case "@": sprite = ( state.moving == cell.BALL ) ? assets.sprites.ball_selected : assets.sprites.ball; break; - case "H": sprite = ( state.moving == cell.CUBE ) ? assets.sprites.cube_selected : assets.sprites.cube; break; - case "#": sprite = assets.sprites.wall; break; - case "x": sprite = assets.sprites.gift; break; - case " ": sprite = assets.sprites.empty; break; - default: break; + case "@": sprite = ( state.moving == cell.BALL ) ? assets.sprites.ball_selected : assets.sprites.ball + break + case "H": sprite = ( state.moving == cell.CUBE ) ? assets.sprites.cube_selected : assets.sprites.cube + break + case "#": sprite = assets.sprites.wall + break + case "x": sprite = assets.sprites.gift + break + case " ": sprite = assets.sprites.empty + break + default: + break } - draw_cell( sprite, j, i ); + draw_cell( sprite, j, i ) } } - }; + } - var update_infos = function( ) { - var infos = "

Star5


"; - infos += "Level " + (state.level+1) + " of " + assets.levels.length + "
"; - infos += "" + count_gifts( ) + " gifts left
"; - infos += "" + state.distance_travelled + " meters travelled"; + let update_infos = function() { + let infos = "

Star5


" + infos += "Level " + (state.level+1) + " of " + assets.levels.length + "
" + infos += "" + count_gifts() + " gifts left
" + infos += "" + state.distance_travelled + " meters travelled" - document.querySelector( DOM_infos.container + " .gstar #infos" ).innerHTML = infos; - }; + document.querySelector( DOM_infos.container + " .gstar #infos" ).innerHTML = infos + } - var format_help = function( ) { - var help = "←↑→↓ to move around
"; - help += "Space to switch actor
"; - help += "r to reload
"; - help += "n to pass to the next level
"; - help += "p to go back to the previous level
"; - return help; - }; + let format_help = function() { + let help = "←↑→↓ to move around
" + help += "Space to switch actor
" + help += "r to reload
" + help += "n to pass to the next level
" + help += "p to go back to the previous level
" + return help + } - var display_level = function( ) { - update_infos( ); - full_display_on_canvas( ); - }; + let display_level = function() { + update_infos() + full_display_on_canvas() + } - var display_move_actor = function( path ) { - for ( var i=0 ; i < path.length-1 ; i++ ) { - draw_cell( assets.sprites.empty, path[ i ][ 0 ], path[ i ][ 1 ] ); + let display_move_actor = function( path ) { + for ( let i=0 ; i < path.length-1 ; i++ ) { + draw_cell( assets.sprites.empty, path[ i ][ 0 ], path[ i ][ 1 ] ) draw_cell( ( state.moving == cell.BALL ) ? assets.sprites.ball_selected : assets.sprites.cube_selected, - path[ i+1 ][ 0 ], path[ i+1 ][ 1 ] ); + path[ i+1 ][ 0 ], path[ i+1 ][ 1 ] ) - state.distance_travelled++; /* increment distance_travelled */ + state.distance_travelled++ /* increment distance_travelled */ } - update_infos( ); - }; + update_infos() + } - var event_handler = function( e ) { + let event_handler = function( e ) { if ( !state.it_s_over ) { if ( e.type === "click" ) { - var movingpos = get_pos( state.moving ); - var notmovingpos = get_pos( ( state.moving != cell.BALL ) ? cell.BALL : cell.CUBE ); - var click = { }; - click.x = e.pageX - DOM_infos.canvas.offset.left; - click.y = e.pageY - DOM_infos.canvas.offset.top; + let movingpos = get_pos( state.moving ) + let notmovingpos = get_pos( ( state.moving != cell.BALL ) ? cell.BALL : cell.CUBE ) + let click = { } + click.x = e.pageX - DOM_infos.canvas.offset.left + click.y = e.pageY - DOM_infos.canvas.offset.top if ( ( 0 <= click.x && click.x < DOM_infos.canvas.width ) && ( 0 <= click.y && click.y < DOM_infos.canvas.height ) ) { // coordinates in cell indexes - click.x = Math.floor( click.x / level_infos.cell.width ); - click.y = Math.floor( click.y / level_infos.cell.height ); + click.x = Math.floor( click.x / level_infos.cell.width ) + click.y = Math.floor( click.y / level_infos.cell.height ) // We're inside the board if ( click.x == notmovingpos[0] && click.y == notmovingpos[1] ) { - switch_actor( ); - display_switch_actor( ); + switch_actor() + display_switch_actor() } else if ( click.x == movingpos[0] ) { if ( click.y > movingpos[1] ) { - display_move_actor( make_a_move( direction.DOWN ) ); + display_move_actor( make_a_move( direction.DOWN ) ) } else if ( click.y < movingpos[1] ) { - display_move_actor( make_a_move( direction.UP ) ); + display_move_actor( make_a_move( direction.UP ) ) } } else if ( click.y == movingpos[1] ) { if ( click.x > movingpos[0] ) { - display_move_actor( make_a_move( direction.RIGHT ) ); + display_move_actor( make_a_move( direction.RIGHT ) ) } else { - display_move_actor( make_a_move( direction.LEFT ) ); + display_move_actor( make_a_move( direction.LEFT ) ) } } } @@ -254,87 +263,86 @@ var initialize_a_star = function( dom_container, level_index, theme ) { case 38: // UP case 39: // RIGHT case 40: // DOWN - display_move_actor( make_a_move( e.keyCode ) ); - break; + display_move_actor( make_a_move( e.keyCode ) ) + break case 32: // SPACE - switch_actor( ); - display_switch_actor( ); - break; + switch_actor() + display_switch_actor() + break case 78: // n if ( state.level < assets.levels.length - 1 ) { - state = load_level( state.level + 1 ); - display_level( ); + state = load_level( state.level + 1 ) + display_level() } - break; + break case 80: // p if ( state.level > 0 ) { - state = load_level( state.level - 1 ); - display_level( ); + state = load_level( state.level - 1 ) + display_level() } - break; + break case 82: // r - state = load_level( state.level ); - display_level( ); - break; + state = load_level( state.level ) + display_level() + break default: - break; + break } } - if ( won_or_not( ) ) { + if ( won_or_not() ) { if ( state.level < assets.levels.length - 1 ) { - state = load_level( state.level + 1 ); - display_level( ); + state = load_level( state.level + 1 ) + display_level() } else { - state.it_s_over = true; - alert( "You won!" ); + state.it_s_over = true + alert( "You won!" ) } } } - }; + } ////// MAIN (so to speak) ////// // First of all, setup our little DOM branch - var starhtml = '
'; - starhtml += ''; - starhtml += ''; - starhtml += ''; - starhtml += '
'; - document.querySelector( dom_container ).innerHTML = starhtml; + let starhtml = '
' + starhtml += '' + starhtml += '' + starhtml += '' + starhtml += '
' + document.querySelector( dom_container ).innerHTML = starhtml // Now we can collect some informations about this DOM branch we have - load_sprites( theme ); - var DOM_infos = { + load_sprites( theme ) + let DOM_infos = { container: dom_container, canvas: { - //jQuery() returns a jquery object, [0] to get the canvas itself context: document.querySelector( dom_container + " #starboard" ).getContext( '2d' ), offset: document.querySelector( dom_container + " #starboard" ).offsetLeft, width: document.querySelector( dom_container + " #starboard" ).width, height: document.querySelector( dom_container + " #starboard" ).height } - }; + } - var level_infos = { + let level_infos = { height: 9, width: 16, cell: { width: DOM_infos.canvas.width / 16, height: DOM_infos.canvas.height / 9 } - }; + } - var state = load_level( ( level_index === undefined ) ? 0 : + let state = load_level( ( level_index === undefined ) ? 0 : ( level_index >= assets.levels.length ) ? assets.levels.length - 1 : - ( level_index < 0 ) ? 0 : level_index ); + ( level_index < 0 ) ? 0 : level_index ) // kinda ugly workaround around a mysterious bug causing the canvas // not to refresh the first time (before any event) - setTimeout( function(){ display_level( ); }, 100 ); // 1/10 second + setTimeout( function(){ display_level() }, 100 ) // 1/10 second // Start main "loop" document.addEventListener('click', event_handler) document.addEventListener('keydown', event_handler) -}; +}