gwh/jsstar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactoring II "moving things around"

Browse source
This commit is contained in:
Gwenhael Le Moine 2011-07-14 09:58:21 +02:00
parent 0670cb375e
commit efc86e6993
1 changed files with 68 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
js/star.js
View file

@ -1,30 +1,4 @@
function initialize_a_star( dom_container ) { function initialize_a_star( dom_container ) {
var LEVEL_HEIGHT = 9;
var LEVEL_WIDTH = 16;
var cell= {
WALL : '#',
BALL : '@',
CUBE : 'H',
VOID : ' ',
GIFT : 'x'
};
var direction = {
UP : 'u',
DOWN : 'd',
LEFT : 'l',
RIGHT : 'r'
};
var state = {
moving : cell.BALL,
distance_travelled : 0,
level : 0,
board : "",
board_infos : { },
dom_container : dom_container
};
var levels = [ "#################@## x#H## x #### ##x ## ## x #### x x x ## x x## x ## ##x x#################", var 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 #################",
@ -51,7 +25,22 @@ function initialize_a_star( dom_container ) {
"################# # ### ##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 ################# " ];
function count_gifts( state ) { var LEVEL_HEIGHT = 9;
var LEVEL_WIDTH = 16;
var cell= { WALL: '#', BALL: '@', CUBE: 'H', VOID: ' ', GIFT: 'x' };
var direction = { UP: 'u', DOWN: 'd', LEFT: 'l', RIGHT: 'r' };
var state = {
moving : cell.BALL,
distance_travelled : 0,
level : 0,
board : "",
board_infos : { },
dom_container : dom_container
};
function count_gifts( ) {
var n = 0; var n = 0;
for ( var i = LEVEL_HEIGHT * LEVEL_WIDTH ; i-- ; ) { for ( var i = LEVEL_HEIGHT * LEVEL_WIDTH ; i-- ; ) {
if ( state.board[ i ] == cell.GIFT ) { if ( state.board[ i ] == cell.GIFT ) {
@ -61,7 +50,7 @@ function initialize_a_star( dom_container ) {
return n; return n;
} }
function get_pos( state, actor ) { function get_pos( actor ) {
var p = state.board.indexOf( actor, state.board ); var p = state.board.indexOf( actor, state.board );
var pos = { }; var pos = { };
pos[ 1 ] = Math.floor( p / LEVEL_WIDTH ); /* y */ pos[ 1 ] = Math.floor( p / LEVEL_WIDTH ); /* y */
@ -70,20 +59,20 @@ function initialize_a_star( dom_container ) {
return pos; return pos;
} }
function get_cell( state, x, y ) { function get_cell( x, y ) {
return state.board[ x + ( y * LEVEL_WIDTH ) ]; return state.board[ x + ( y * LEVEL_WIDTH ) ];
} }
function set_cell( state, x, y, value ) { function set_cell( x, y, value ) {
var p = x + ( y * LEVEL_WIDTH ); var p = x + ( y * LEVEL_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( '' );
return state; return state;
} }
function switch_actor( state ) { function switch_actor( ) {
state.moving = ( state.moving == cell.BALL ) ? cell.CUBE : cell.BALL; state.moving = ( state.moving == cell.BALL ) ? cell.CUBE : cell.BALL;
var ball_pos = get_pos( state, cell.BALL ); var ball_pos = get_pos( cell.BALL );
var cube_pos = get_pos( state, cell.CUBE ); var cube_pos = get_pos( cell.CUBE );
// we're going to update the canvas right here and there so we need it // we're going to update the canvas right here and there so we need it
var ctx= state.board_infos.canvas.getContext( '2d' ); //$() returns a jquery object, [0] to get the canvas itself var ctx= state.board_infos.canvas.getContext( '2d' ); //$() returns a jquery object, [0] to get the canvas itself
@ -102,15 +91,15 @@ function initialize_a_star( dom_container ) {
return state; return state;
} }
function won_or_not( state ) { function won_or_not( ) {
return count_gifts( state ) === 0; return count_gifts( ) === 0;
} }
function full_display_on_canvas( state ) { function full_display_on_canvas( ) {
var ctx= state.board_infos.canvas.getContext( '2d' ); //$() returns a jquery object, [0] to get the canvas itself var ctx= state.board_infos.canvas.getContext( '2d' ); //$() returns a jquery object, [0] to get the canvas itself
for ( var i=0 ; i < LEVEL_HEIGHT ; i++ ) { for ( var i=0 ; i < LEVEL_HEIGHT ; i++ ) {
for ( var j=0 ; j < LEVEL_WIDTH ; j++ ) { for ( var j=0 ; j < LEVEL_WIDTH ; j++ ) {
var c = get_cell( state, j, i ); var c = get_cell( j, i );
var sprite; var sprite;
switch( c ) { switch( c ) {
case "@": sprite = ( state.moving == cell.BALL ) ? state.board_infos.sprites.ball_selected : state.board_infos.sprites.ball; break; case "@": sprite = ( state.moving == cell.BALL ) ? state.board_infos.sprites.ball_selected : state.board_infos.sprites.ball; break;
@ -128,10 +117,10 @@ function initialize_a_star( dom_container ) {
} }
} }
function update_infos( state ) { function update_infos( ) {
var infos = "<h1>Star5</h1><br />"; var infos = "<h1>Star5</h1><br />";
infos += "Level <em>" + (state.level+1) + "</em> of <em>" + levels.length + "</em><br />"; infos += "Level <em>" + (state.level+1) + "</em> of <em>" + levels.length + "</em><br />";
infos += "<em>" + count_gifts( state ) + "</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";
$( state.dom_container + " .gstar #infos" ).html( infos ); $( state.dom_container + " .gstar #infos" ).html( infos );
@ -146,12 +135,12 @@ function initialize_a_star( dom_container ) {
return help; return help;
} }
function display_level( state ) { function display_level( ) {
update_infos( state ); update_infos( );
full_display_on_canvas( state, state.dom_container + " #starboard" ); full_display_on_canvas( state.dom_container + " #starboard" );
} }
function load_level( state, levelset, index ) { function load_level( levelset, index ) {
state.level = index; state.level = index;
state.board = levelset[ state.level ]; state.board = levelset[ state.level ];
state.distance_travelled = 0; state.distance_travelled = 0;
@ -159,9 +148,9 @@ function initialize_a_star( dom_container ) {
return state; return state;
} }
function make_a_move( state, where ) { function make_a_move( where ) {
var motion = [ 0, 0 ]; var motion = [ 0, 0 ];
var item_coord = get_pos( state, state.moving ); var item_coord = get_pos( state.moving );
/* Setup the motion vector according to direction.*/ /* Setup the motion vector according to direction.*/
switch( where ) { switch( where ) {
@ -189,12 +178,12 @@ function initialize_a_star( dom_container ) {
( ( item_coord[ 0 ] + motion[ 0 ] >= 0 ) && ( item_coord[ 0 ] + motion[ 0 ] < LEVEL_WIDTH ) ) && ( ( item_coord[ 0 ] + motion[ 0 ] >= 0 ) && ( item_coord[ 0 ] + motion[ 0 ] < LEVEL_WIDTH ) ) &&
( ( item_coord[ 1 ] + motion[ 1 ] >= 0 ) && ( item_coord[ 1 ] + motion[ 1 ] < LEVEL_HEIGHT ) ) && ( ( item_coord[ 1 ] + motion[ 1 ] >= 0 ) && ( item_coord[ 1 ] + motion[ 1 ] < LEVEL_HEIGHT ) ) &&
/* and target cell is empty */ /* and target cell is empty */
( get_cell( state, item_coord[ 0 ] + motion[ 0 ], item_coord[ 1 ] + motion[ 1 ] ) == cell.VOID ) ( get_cell( item_coord[ 0 ] + motion[ 0 ], item_coord[ 1 ] + motion[ 1 ] ) == cell.VOID )
/* or, the ball will eat gifts so we can move it on one */ /* or, the ball will eat gifts so we can move it on one */
|| ( state.moving == cell.BALL && ( get_cell( state, 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 ) )
) )
{ {
state = set_cell( state, item_coord[ 0 ], item_coord[ 1 ], cell.VOID ); /* void the origin cell */ state = set_cell( item_coord[ 0 ], item_coord[ 1 ], cell.VOID ); /* void the origin cell */
// voiding origin cell on canvas // voiding origin cell on canvas
ctx.drawImage( state.board_infos.sprites.void, ctx.drawImage( state.board_infos.sprites.void,
item_coord[ 0 ] * state.board_infos.cell_dimensions.width, item_coord[ 0 ] * state.board_infos.cell_dimensions.width,
@ -205,7 +194,7 @@ function initialize_a_star( dom_container ) {
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 */
state = set_cell( state, item_coord[ 0 ], item_coord[ 1 ], state.moving ); /* move actor into target cell */ state = set_cell( item_coord[ 0 ], item_coord[ 1 ], state.moving ); /* move actor into target cell */
// drawing target cell on canvas // drawing target cell on canvas
ctx.drawImage( ( state.moving == cell.BALL ) ? state.board_infos.sprites.ball_selected : state.board_infos.sprites.cube_selected, ctx.drawImage( ( state.moving == cell.BALL ) ? state.board_infos.sprites.ball_selected : state.board_infos.sprites.cube_selected,
item_coord[ 0 ] * state.board_infos.cell_dimensions.width, item_coord[ 0 ] * state.board_infos.cell_dimensions.width,
@ -215,18 +204,18 @@ function initialize_a_star( dom_container ) {
state.distance_travelled++; /* increment distance_travelled */ state.distance_travelled++; /* increment distance_travelled */
} }
update_infos( state ); update_infos( );
return state; return state;
} }
function start_loop( state ) { function start_loop( ) {
display_level( state ); display_level( );
$(document).focus( ); $(document).focus( );
$(document).click( $(document).click(
function( e ) { function( e ) {
var movingpos = get_pos( state, state.moving ); var movingpos = get_pos( state.moving );
var notmovingpos = get_pos( state, ( state.moving != cell.BALL ) ? cell.BALL : cell.CUBE ); var notmovingpos = get_pos( ( state.moving != cell.BALL ) ? cell.BALL : cell.CUBE );
var click = { }; var click = { };
click.x = e.pageX - state.board_infos.offset.left; click.x = e.pageX - state.board_infos.offset.left;
click.y = e.pageY - state.board_infos.offset.top; click.y = e.pageY - state.board_infos.offset.top;
@ -242,22 +231,22 @@ function initialize_a_star( dom_container ) {
state.moving = ( state.moving != cell.BALL ) ? cell.BALL : cell.CUBE; state.moving = ( state.moving != cell.BALL ) ? cell.BALL : cell.CUBE;
} else if ( click.x == movingpos[0] ) { } else if ( click.x == movingpos[0] ) {
if ( click.y > movingpos[1] ) { if ( click.y > movingpos[1] ) {
state = make_a_move( state, direction.DOWN ); state = make_a_move( direction.DOWN );
} else if ( click.y < movingpos[1] ) { } else if ( click.y < movingpos[1] ) {
state = make_a_move( state, direction.UP ); state = 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] ) {
state = make_a_move( state, direction.RIGHT ); state = make_a_move( direction.RIGHT );
} else { } else {
state = make_a_move( state, direction.LEFT ); state = make_a_move( direction.LEFT );
} }
} }
if ( won_or_not( state ) ) { if ( won_or_not( ) ) {
if ( state.level < levels.length - 1 ) { if ( state.level < levels.length - 1 ) {
state = load_level( state, levels, state.level + 1 ); state = load_level( levels, state.level + 1 );
display_level( state ); display_level( );
} }
else { else {
alert( "You won!" ); alert( "You won!" );
@ -269,44 +258,44 @@ function initialize_a_star( dom_container ) {
function( e ) { function( e ) {
switch( e.keyCode ) { switch( e.keyCode ) {
case 38: // UP case 38: // UP
state = make_a_move( state, direction.UP ); state = make_a_move( direction.UP );
break; break;
case 40: // DOWN case 40: // DOWN
state = make_a_move( state, direction.DOWN ); state = make_a_move( direction.DOWN );
break; break;
case 37: // LEFT case 37: // LEFT
state = make_a_move( state, direction.LEFT ); state = make_a_move( direction.LEFT );
break; break;
case 39: // RIGHT case 39: // RIGHT
state = make_a_move( state, direction.RIGHT ); state = make_a_move( direction.RIGHT );
break; break;
case 32: // SPACE case 32: // SPACE
state = switch_actor( state ); state = switch_actor( );
break; break;
case 78: // n case 78: // n
if ( state.level < levels.length - 1 ) { if ( state.level < levels.length - 1 ) {
state = load_level( state, levels, state.level + 1 ); state = load_level( levels, state.level + 1 );
display_level( state ); display_level( );
} }
break; break;
case 80: // p case 80: // p
if ( state.level > 0 ) { if ( state.level > 0 ) {
state = load_level( state, levels, state.level - 1 ); state = load_level( levels, state.level - 1 );
display_level( state ); display_level( );
} }
break; break;
case 82: // r case 82: // r
state = load_level( state, levels, state.level ); state = load_level( levels, state.level );
display_level( state ); display_level( );
break; break;
default: default:
break; break;
} }
if ( won_or_not( state ) ) { if ( won_or_not( ) ) {
if ( state.level < levels.length - 1 ) { if ( state.level < levels.length - 1 ) {
state = load_level( state, levels, state.level + 1 ); state = load_level( levels, state.level + 1 );
display_level( state ); display_level( );
} }
else { else {
alert( "You won!" ); alert( "You won!" );
@ -336,7 +325,7 @@ function initialize_a_star( dom_container ) {
} }
var starhtml = '<div class="gstar">'; var starhtml = '<div class="gstar">';
starhtml += '<aside id="help">' + format_help( state ) + '</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>';
@ -354,11 +343,11 @@ function initialize_a_star( dom_container ) {
state.board_infos.cell_dimensions.width = state.board_infos.dimensions.width / LEVEL_WIDTH; state.board_infos.cell_dimensions.width = state.board_infos.dimensions.width / LEVEL_WIDTH;
state.board_infos.cell_dimensions.height = state.board_infos.dimensions.height / LEVEL_HEIGHT; state.board_infos.cell_dimensions.height = state.board_infos.dimensions.height / LEVEL_HEIGHT;
state = load_level( state, levels, 0 ); state = load_level( levels, 0 );
start_loop( state ); start_loop( );
// kinda ugly workaround around a bug causing the canvas // kinda ugly workaround around a 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( state ); }, 100 ); // 1/10 second setTimeout( function(){ display_level( ); }, 100 ); // 1/10 second
} }