Miroirs/c-urs_-toil-s
1
0
Fork 0
mirror of https://github.com/gwenhael-le-moine/c-urs_-toil-s.git synced 2024-12-27 09:58:44 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

more plus cleaner

Browse source
This commit is contained in:
Gwenhael Le Moine 2024-03-05 16:55:09 +01:00
parent a9bf8fdb79
commit 204648e3a4
No known key found for this signature in database
GPG key ID: FDFE3669426707A7
1 changed files with 209 additions and 201 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

362
star.js/js/star.js
View file

@ -1,10 +1,11 @@
var initialize_a_star = function( dom_container, level_index, theme ) { let initialize_a_star = function( dom_container, level_index, theme ) {
// kinda enums // kinda enums
var cell = { WALL: '#', BALL: '@', CUBE: 'H', EMPTY: ' ', GIFT: 'x' }; let cell = { WALL: '#', BALL: '@', CUBE: 'H', EMPTY: ' ', GIFT: 'x' }
var direction = { UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 }; let direction = { UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 }
var assets = { let assets = {
levels: [ "#################@## x#H## x #### ##x ## ## x #### x x x ## x x## x ## ##x x#################", 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 @# #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 #################", "################# 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## # ## # #@ #################", "################# #H## # ###x#x x#x#x#x#x## # #x x# # # ####x#x#x x#x#x#x## # ## # #@ #################",
@ -28,79 +29,80 @@ var initialize_a_star = function( dom_container, level_index, theme ) {
"#################x# #x# #x # ## # ##x # #x x ### #x x #### x # ###x ## #@#H x ################# ", "#################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 ## #x # xx x ###x # ## x ## #@#H x # ############## ",
"################# # ### ##x x ##x### #x x# #### xx x# ## ## #x x # ## ## ## @#H###xx################# ", "################# # ### ##x x ##x### #x x# #### xx x# ## ## #x x # ## ## ## @#H###xx################# ",
"################# # ## x ##x x ## #x x ## ## x ## #x ## #x x# x ## ##x #@ H ################# " ] "################# # ## x ##x x ## #x x ## ## x ## #x ## #x x# x ## ##x #@ H ################# "
}; ]
}
////// FUNCTIONS ////// ////// FUNCTIONS //////
var count_gifts = function( ) { let count_gifts = function() {
var n = 0; let n = 0
for ( var i = level_infos.height * level_infos.width ; i-- ; ) { for ( let i = level_infos.height * level_infos.width ; i-- ; ) {
if ( state.board[ i ] == cell.GIFT ) { if ( state.board[ i ] == cell.GIFT ) {
n++; n++
} }
} }
return n; return n
}; }
var get_pos = function( actor ) { let get_pos = function( actor ) {
var p = state.board.indexOf( actor, state.board ); let p = state.board.indexOf( actor, state.board )
var pos = [ ]; let pos = []
pos[ 1 ] = Math.floor( p / level_infos.width ); /* y */ pos[ 1 ] = Math.floor( p / level_infos.width ) /* y */
pos[ 0 ] = p - ( pos[ 1 ] * level_infos.width ); /* x */ pos[ 0 ] = p - ( pos[ 1 ] * level_infos.width ) /* x */
return pos; return pos
}; }
var get_cell = function( x, y ) { let get_cell = function( x, y ) {
return state.board[ x + ( y * level_infos.width ) ]; return state.board[ x + ( y * level_infos.width ) ]
}; }
var set_cell = function( x, y, value ) { let set_cell = function( x, y, value ) {
var p = x + ( y * level_infos.width ); let p = x + ( y * level_infos.width )
state.board = [ state.board.substring( 0, p ), value, state.board.substring( p+1, state.board.length ) ].join( '' ); state.board = [ state.board.substring( 0, p ), value, state.board.substring( p+1, state.board.length ) ].join( '' )
}; }
var switch_actor = function( ) { let switch_actor = function() {
state.moving = ( state.moving == cell.BALL ) ? cell.CUBE : cell.BALL; state.moving = ( state.moving == cell.BALL ) ? cell.CUBE : cell.BALL
}; }
var won_or_not = function( ) { let won_or_not = function() {
return count_gifts( ) === 0; return count_gifts() === 0
}; }
var load_level = function( index ) { let load_level = function( index ) {
return( { moving: cell.BALL, return( { moving: cell.BALL,
distance_travelled: 0, distance_travelled: 0,
level: index, level: index,
board: assets.levels[ index ], board: assets.levels[ index ],
it_s_over: false } ); it_s_over: false } )
}; }
var make_a_move = function( where ) { let make_a_move = function( where ) {
var motion = [ 0, 0 ]; let motion = [ 0, 0 ]
var item_coord = get_pos( state.moving ); let item_coord = get_pos( state.moving )
/* Setup the motion vector according to direction.*/ /* Setup the motion vector according to direction.*/
switch( where ) { switch( where ) {
case direction.UP: case direction.UP:
motion[ 1 ]--; motion[ 1 ]--
break; break
case direction.DOWN: case direction.DOWN:
motion[ 1 ]++; motion[ 1 ]++
break; break
case direction.LEFT: case direction.LEFT:
motion[ 0 ]--; motion[ 0 ]--
break; break
case direction.RIGHT: case direction.RIGHT:
motion[ 0 ]++; motion[ 0 ]++
break; break
default: break; default: break
} }
var path = [ ]; let path = []
path[ 0 ] = [ ]; path[ 0 ] = []
path[ 0 ][ 0 ] = item_coord[ 0 ]; path[ 0 ][ 0 ] = item_coord[ 0 ]
path[ 0 ][ 1 ] = item_coord[ 1 ]; path[ 0 ][ 1 ] = item_coord[ 1 ]
/* Calculating arrival coordinates */ /* Calculating arrival coordinates */
while ( /* Hairy conditions ahead */ while ( /* Hairy conditions ahead */
/* target cell is within level's boundaries */ /* 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 ) ) || ( 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 */ set_cell( item_coord[ 0 ], item_coord[ 1 ], cell.EMPTY ) /* empty the origin cell */
item_coord[ 0 ] += motion[ 0 ]; /* move coordinate */ item_coord[ 0 ] += motion[ 0 ] /* move coordinate */
item_coord[ 1 ] += motion[ 1 ]; /* to those of target cells */ item_coord[ 1 ] += motion[ 1 ] /* to those of target cells */
var push_pos = path.length; let push_pos = path.length
path[ push_pos ] = [ ]; path[ push_pos ] = []
path[ push_pos ][ 0 ] = item_coord[ 0 ]; path[ push_pos ][ 0 ] = item_coord[ 0 ]
path[ push_pos ][ 1 ] = item_coord[ 1 ]; 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 ////// HTML/Canvas version specific functions
var load_sprites = function( theme ) { let load_sprites = function( theme ) {
assets.sprites = { }; assets.sprites = { }
assets.sprites.ball = new Image(); assets.sprites.ball = new Image()
assets.sprites.ball.src = "themes/" + theme + "/tex_ball.png"; assets.sprites.ball.src = "themes/" + theme + "/tex_ball.png"
assets.sprites.ball_selected = new Image(); assets.sprites.ball_selected = new Image()
assets.sprites.ball_selected.src = "themes/" + theme + "/tex_ball_selected.png"; assets.sprites.ball_selected.src = "themes/" + theme + "/tex_ball_selected.png"
assets.sprites.cube = new Image(); assets.sprites.cube = new Image()
assets.sprites.cube.src = "themes/" + theme + "/tex_cube.png"; assets.sprites.cube.src = "themes/" + theme + "/tex_cube.png"
assets.sprites.cube_selected = new Image(); assets.sprites.cube_selected = new Image()
assets.sprites.cube_selected.src = "themes/" + theme + "/tex_cube_selected.png"; assets.sprites.cube_selected.src = "themes/" + theme + "/tex_cube_selected.png"
assets.sprites.wall = new Image(); assets.sprites.wall = new Image()
assets.sprites.wall.src = "themes/" + theme + "/tex_wall.png"; assets.sprites.wall.src = "themes/" + theme + "/tex_wall.png"
assets.sprites.empty = new Image(); assets.sprites.empty = new Image()
assets.sprites.empty.src = "themes/" + theme + "/tex_empty.png"; assets.sprites.empty.src = "themes/" + theme + "/tex_empty.png"
assets.sprites.gift = new Image(); assets.sprites.gift = new Image()
assets.sprites.gift.src = "themes/" + theme + "/tex_gift.png"; 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, DOM_infos.canvas.context.drawImage( sprite,
x * level_infos.cell.width, x * level_infos.cell.width,
y * level_infos.cell.height, y * level_infos.cell.height,
level_infos.cell.width, level_infos.cell.width,
level_infos.cell.height ); level_infos.cell.height )
}; }
var display_switch_actor = function( ) { let display_switch_actor = function() {
var ball_pos = get_pos( cell.BALL ); let ball_pos = get_pos( cell.BALL )
var cube_pos = get_pos( cell.CUBE ); let cube_pos = get_pos( cell.CUBE )
// redraw ball // 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 // 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 ) { switch( c ) {
case "@": sprite = ( state.moving == cell.BALL ) ? assets.sprites.ball_selected : assets.sprites.ball; break; case "@": sprite = ( state.moving == cell.BALL ) ? assets.sprites.ball_selected : assets.sprites.ball
case "H": sprite = ( state.moving == cell.CUBE ) ? assets.sprites.cube_selected : assets.sprites.cube; break; break
case "#": sprite = assets.sprites.wall; break; case "H": sprite = ( state.moving == cell.CUBE ) ? assets.sprites.cube_selected : assets.sprites.cube
case "x": sprite = assets.sprites.gift; break; break
case " ": sprite = assets.sprites.empty; break; case "#": sprite = assets.sprites.wall
default: break; 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( ) { let update_infos = function() {
var infos = "<h1>Star5</h1><br />"; let infos = "<h1>Star5</h1><br />"
infos += "Level <em>" + (state.level+1) + "</em> of <em>" + assets.levels.length + "</em><br />"; infos += "Level <em>" + (state.level+1) + "</em> of <em>" + assets.levels.length + "</em><br />"
infos += "<em>" + count_gifts( ) + "</em> gifts left<br />"; infos += "<em>" + count_gifts() + "</em> gifts left<br />"
infos += "<em>" + state.distance_travelled + "</em> meters travelled"; infos += "<em>" + state.distance_travelled + "</em> meters travelled"
document.querySelector( DOM_infos.container + " .gstar #infos" ).innerHTML = infos; document.querySelector( DOM_infos.container + " .gstar #infos" ).innerHTML = infos
}; }
var format_help = function( ) { let format_help = function() {
var help = "<em>←↑→↓</em> to move around<br />"; let help = "<em>←↑→↓</em> to move around<br />"
help += "<em>Space</em> to switch actor<br />"; help += "<em>Space</em> to switch actor<br />"
help += "<em>r</em> to reload<br />"; help += "<em>r</em> to reload<br />"
help += "<em>n</em> to pass to the next level<br />"; help += "<em>n</em> to pass to the next level<br />"
help += "<em>p</em> to go back to the previous level<br />"; help += "<em>p</em> to go back to the previous level<br />"
return help; return help
}; }
var display_level = function( ) { let display_level = function() {
update_infos( ); update_infos()
full_display_on_canvas( ); full_display_on_canvas()
}; }
var display_move_actor = function( path ) { let display_move_actor = function( path ) {
for ( var i=0 ; i < path.length-1 ; i++ ) { for ( let i=0 ; i < path.length-1 ; i++ ) {
draw_cell( assets.sprites.empty, path[ i ][ 0 ], path[ i ][ 1 ] ); 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, 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 ( !state.it_s_over ) {
if ( e.type === "click" ) { if ( e.type === "click" ) {
var movingpos = get_pos( state.moving ); let movingpos = get_pos( state.moving )
var notmovingpos = get_pos( ( state.moving != cell.BALL ) ? cell.BALL : cell.CUBE ); let notmovingpos = get_pos( ( state.moving != cell.BALL ) ? cell.BALL : cell.CUBE )
var click = { }; let click = { }
click.x = e.pageX - DOM_infos.canvas.offset.left; click.x = e.pageX - DOM_infos.canvas.offset.left
click.y = e.pageY - DOM_infos.canvas.offset.top; click.y = e.pageY - DOM_infos.canvas.offset.top
if ( ( 0 <= click.x && click.x < DOM_infos.canvas.width ) if ( ( 0 <= click.x && click.x < DOM_infos.canvas.width )
&& ( 0 <= click.y && click.y < DOM_infos.canvas.height ) ) { && ( 0 <= click.y && click.y < DOM_infos.canvas.height ) ) {
// coordinates in cell indexes // coordinates in cell indexes
click.x = Math.floor( click.x / level_infos.cell.width ); click.x = Math.floor( click.x / level_infos.cell.width )
click.y = Math.floor( click.y / level_infos.cell.height ); click.y = Math.floor( click.y / level_infos.cell.height )
// We're inside the board // We're inside the board
if ( click.x == notmovingpos[0] && click.y == notmovingpos[1] ) { if ( click.x == notmovingpos[0] && click.y == notmovingpos[1] ) {
switch_actor( ); switch_actor()
display_switch_actor( ); display_switch_actor()
} else if ( click.x == movingpos[0] ) { } else if ( click.x == movingpos[0] ) {
if ( click.y > movingpos[1] ) { 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] ) { } 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] ) { } else if ( click.y == movingpos[1] ) {
if ( click.x > movingpos[0] ) { if ( click.x > movingpos[0] ) {
display_move_actor( make_a_move( direction.RIGHT ) ); display_move_actor( make_a_move( direction.RIGHT ) )
} else { } 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 38: // UP
case 39: // RIGHT case 39: // RIGHT
case 40: // DOWN case 40: // DOWN
display_move_actor( make_a_move( e.keyCode ) ); display_move_actor( make_a_move( e.keyCode ) )
break; break
case 32: // SPACE case 32: // SPACE
switch_actor( ); switch_actor()
display_switch_actor( ); display_switch_actor()
break; break
case 78: // n case 78: // n
if ( state.level < assets.levels.length - 1 ) { if ( state.level < assets.levels.length - 1 ) {
state = load_level( state.level + 1 ); state = load_level( state.level + 1 )
display_level( ); display_level()
} }
break; break
case 80: // p case 80: // p
if ( state.level > 0 ) { if ( state.level > 0 ) {
state = load_level( state.level - 1 ); state = load_level( state.level - 1 )
display_level( ); display_level()
} }
break; break
case 82: // r case 82: // r
state = load_level( state.level ); state = load_level( state.level )
display_level( ); display_level()
break; break
default: default:
break; break
} }
} }
if ( won_or_not() ) { if ( won_or_not() ) {
if ( state.level < assets.levels.length - 1 ) { if ( state.level < assets.levels.length - 1 ) {
state = load_level( state.level + 1 ); state = load_level( state.level + 1 )
display_level( ); display_level()
} }
else { else {
state.it_s_over = true; state.it_s_over = true
alert( "You won!" ); alert( "You won!" )
}
} }
} }
} }
};
////// MAIN (so to speak) ////// ////// MAIN (so to speak) //////
// First of all, setup our little DOM branch // First of all, setup our little DOM branch
var starhtml = '<div class="gstar">'; let starhtml = '<div class="gstar">'
starhtml += '<aside id="help">' + format_help( ) + '</aside>'; starhtml += '<aside id="help">' + format_help() + '</aside>'
starhtml += '<canvas id="starboard" width="320" height="180"></canvas>'; starhtml += '<canvas id="starboard" width="320" height="180"></canvas>'
starhtml += '<aside id="infos"></aside>'; starhtml += '<aside id="infos"></aside>'
starhtml += '</div>'; starhtml += '</div>'
document.querySelector( dom_container ).innerHTML = starhtml; document.querySelector( dom_container ).innerHTML = starhtml
// Now we can collect some informations about this DOM branch we have // Now we can collect some informations about this DOM branch we have
load_sprites( theme ); load_sprites( theme )
var DOM_infos = { let DOM_infos = {
container: dom_container, container: dom_container,
canvas: { canvas: {
//jQuery() returns a jquery object, [0] to get the canvas itself
context: document.querySelector( dom_container + " #starboard" ).getContext( '2d' ), context: document.querySelector( dom_container + " #starboard" ).getContext( '2d' ),
offset: document.querySelector( dom_container + " #starboard" ).offsetLeft, offset: document.querySelector( dom_container + " #starboard" ).offsetLeft,
width: document.querySelector( dom_container + " #starboard" ).width, width: document.querySelector( dom_container + " #starboard" ).width,
height: document.querySelector( dom_container + " #starboard" ).height height: document.querySelector( dom_container + " #starboard" ).height
} }
}; }
var level_infos = { let level_infos = {
height: 9, height: 9,
width: 16, width: 16,
cell: { cell: {
width: DOM_infos.canvas.width / 16, width: DOM_infos.canvas.width / 16,
height: DOM_infos.canvas.height / 9 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 >= 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 // kinda ugly workaround around a mysterious bug causing the canvas
// not to refresh the first time (before any event) // 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" // Start main "loop"
document.addEventListener('click', event_handler) document.addEventListener('click', event_handler)
document.addEventListener('keydown', event_handler) document.addEventListener('keydown', event_handler)
}; }