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-26 09:58:48 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactoring II in progress

Browse source
This commit is contained in:
Gwenhael Le Moine 2011-07-14 10:24:58 +02:00
parent f03dfbe4b2
commit 92ca178370
1 changed files with 76 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
star.js/js/star.js
View file

@ -1,4 +1,12 @@
function initialize_a_star( dom_container ) { function initialize_a_star( dom_container ) {
// First of all, setup our little DOM branch
var starhtml = '<div class="gstar">';
starhtml += '<aside id="help">' + format_help( ) + '</aside>';
starhtml += '<canvas id="starboard" width="320" height="180"></canvas>';
starhtml += '<aside id="infos"></aside>';
starhtml += '</div>';
$( dom_container ).html( starhtml );
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 #################",
@ -25,24 +33,39 @@ 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 ################# " ];
var LEVEL_HEIGHT = 9;
var LEVEL_WIDTH = 16;
var cell= { WALL: '#', BALL: '@', CUBE: 'H', VOID: ' ', GIFT: 'x' }; var cell= { WALL: '#', BALL: '@', CUBE: 'H', VOID: ' ', GIFT: 'x' };
var direction = { UP: 'u', DOWN: 'd', LEFT: 'l', RIGHT: 'r' }; var direction = { UP: 'u', DOWN: 'd', LEFT: 'l', RIGHT: 'r' };
var sprites = load_sprites( "HP48" );
var state = { var state = {
moving : cell.BALL, moving : cell.BALL,
distance_travelled : 0, distance_travelled : 0,
level : 0, level : 0,
board : "", board : ""
board_infos : { }, };
dom_container : dom_container var DOM_infos = {
container: dom_container,
canvas: {
//$() returns a jquery object, [0] to get the canvas itself
context: $( dom_container + " #starboard" )[ 0 ].getContext( '2d' ),
offset: $( dom_container + " #starboard" ).offset(),
width: $( dom_container + " #starboard" ).width(),
height: $( dom_container + " #starboard" ).height()
}
};
var level_infos = {
height: 9,
width:16,
cell: {
width: DOM_infos.canvas.width / 16,
height: DOM_infos.canvas.height / 9
}
}; };
function count_gifts( ) { function count_gifts( ) {
var n = 0; var n = 0;
for ( var i = LEVEL_HEIGHT * LEVEL_WIDTH ; i-- ; ) { for ( var i = level_infos.height * level_infos.width ; i-- ; ) {
if ( state.board[ i ] == cell.GIFT ) { if ( state.board[ i ] == cell.GIFT ) {
n++; n++;
} }
@ -53,18 +76,18 @@ function initialize_a_star( dom_container ) {
function get_pos( 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_infos.width ); /* y */
pos[ 0 ] = p - ( pos[ 1 ] * LEVEL_WIDTH ); /* x */ pos[ 0 ] = p - ( pos[ 1 ] * level_infos.width ); /* x */
return pos; return pos;
} }
function get_cell( x, y ) { function get_cell( x, y ) {
return state.board[ x + ( y * LEVEL_WIDTH ) ]; return state.board[ x + ( y * level_infos.width ) ];
} }
function set_cell( x, y, value ) { function set_cell( x, y, value ) {
var p = x + ( y * LEVEL_WIDTH ); var 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( '' );
return state; return state;
} }
@ -73,21 +96,19 @@ function initialize_a_star( dom_container ) {
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( cell.BALL ); var ball_pos = get_pos( cell.BALL );
var cube_pos = get_pos( cell.CUBE ); var cube_pos = get_pos( cell.CUBE );
// 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
// redraw ball // redraw ball
ctx.drawImage( ( state.moving == cell.BALL ) ? state.board_infos.sprites.ball_selected : state.board_infos.sprites.ball, DOM_infos.canvas.context.drawImage( ( state.moving == cell.BALL ) ? sprites.ball_selected : sprites.ball,
ball_pos[ 0 ] * state.board_infos.cell_dimensions.width, ball_pos[ 0 ] * level_infos.cell.width,
ball_pos[ 1 ] * state.board_infos.cell_dimensions.height, ball_pos[ 1 ] * level_infos.cell.height,
state.board_infos.cell_dimensions.width, level_infos.cell.width,
state.board_infos.cell_dimensions.height ); level_infos.cell.height );
// redraw cube // redraw cube
ctx.drawImage( ( state.moving == cell.CUBE ) ? state.board_infos.sprites.cube_selected : state.board_infos.sprites.cube, DOM_infos.canvas.context.drawImage( ( state.moving == cell.CUBE ) ? sprites.cube_selected : sprites.cube,
cube_pos[ 0 ] * state.board_infos.cell_dimensions.width, cube_pos[ 0 ] * level_infos.cell.width,
cube_pos[ 1 ] * state.board_infos.cell_dimensions.height, cube_pos[ 1 ] * level_infos.cell.height,
state.board_infos.cell_dimensions.width, level_infos.cell.width,
state.board_infos.cell_dimensions.height ); level_infos.cell.height );
return state; return state;
} }
@ -96,23 +117,22 @@ function initialize_a_star( dom_container ) {
} }
function full_display_on_canvas( ) { function full_display_on_canvas( ) {
var ctx= state.board_infos.canvas.getContext( '2d' ); //$() returns a jquery object, [0] to get the canvas itself for ( var i=0 ; i < level_infos.height ; i++ ) {
for ( var i=0 ; i < LEVEL_HEIGHT ; i++ ) { for ( var j=0 ; j < level_infos.width ; j++ ) {
for ( var j=0 ; j < LEVEL_WIDTH ; j++ ) {
var c = get_cell( 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 ) ? sprites.ball_selected : sprites.ball; break;
case "H": sprite = ( state.moving == cell.CUBE ) ? state.board_infos.sprites.cube_selected : state.board_infos.sprites.cube; break; case "H": sprite = ( state.moving == cell.CUBE ) ? sprites.cube_selected : sprites.cube; break;
case "#": sprite = state.board_infos.sprites.wall; break; case "#": sprite = sprites.wall; break;
case "x": sprite = state.board_infos.sprites.gift; break; case "x": sprite = sprites.gift; break;
case " ": sprite = state.board_infos.sprites.void; break; case " ": sprite = sprites.void; break;
} }
ctx.drawImage( sprite, DOM_infos.canvas.context.drawImage( sprite,
j * state.board_infos.cell_dimensions.width, j * level_infos.cell.width,
i * state.board_infos.cell_dimensions.height, i * level_infos.cell.height,
state.board_infos.cell_dimensions.width, level_infos.cell.width,
state.board_infos.cell_dimensions.height ); level_infos.cell.height );
} }
} }
} }
@ -123,7 +143,7 @@ function initialize_a_star( dom_container ) {
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";
$( state.dom_container + " .gstar #infos" ).html( infos ); $( DOM_infos.container + " .gstar #infos" ).html( infos );
} }
function format_help( ) { function format_help( ) {
@ -137,7 +157,7 @@ function initialize_a_star( dom_container ) {
function display_level( ) { function display_level( ) {
update_infos( ); update_infos( );
full_display_on_canvas( state.dom_container + " #starboard" ); full_display_on_canvas( DOM_infos.container + " #starboard" );
} }
function load_level( levelset, index ) { function load_level( levelset, index ) {
@ -169,14 +189,11 @@ function initialize_a_star( dom_container ) {
default: break; default: break;
} }
// 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
/* 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 */
( ( 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_infos.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_infos.height ) ) &&
/* and target cell is empty */ /* and target cell is empty */
( get_cell( 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 */
@ -185,22 +202,22 @@ function initialize_a_star( dom_container ) {
{ {
state = set_cell( 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, DOM_infos.canvas.context.drawImage( sprites.void,
item_coord[ 0 ] * state.board_infos.cell_dimensions.width, item_coord[ 0 ] * level_infos.cell.width,
item_coord[ 1 ] * state.board_infos.cell_dimensions.height, item_coord[ 1 ] * level_infos.cell.height,
state.board_infos.cell_dimensions.width, level_infos.cell.width,
state.board_infos.cell_dimensions.height ); level_infos.cell.height );
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( 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, DOM_infos.canvas.context.drawImage( ( state.moving == cell.BALL ) ? sprites.ball_selected : sprites.cube_selected,
item_coord[ 0 ] * state.board_infos.cell_dimensions.width, item_coord[ 0 ] * level_infos.cell.width,
item_coord[ 1 ] * state.board_infos.cell_dimensions.height, item_coord[ 1 ] * level_infos.cell.height,
state.board_infos.cell_dimensions.width, level_infos.cell.width,
state.board_infos.cell_dimensions.height ); level_infos.cell.height );
state.distance_travelled++; /* increment distance_travelled */ state.distance_travelled++; /* increment distance_travelled */
} }
@ -217,14 +234,14 @@ function initialize_a_star( dom_container ) {
var movingpos = get_pos( state.moving ); var movingpos = get_pos( state.moving );
var notmovingpos = get_pos( ( 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 - DOM_infos.canvas.offset.left;
click.y = e.pageY - state.board_infos.offset.top; click.y = e.pageY - DOM_infos.canvas.offset.top;
if ( ( 0 <= click.x && click.x < state.board_infos.dimensions.width ) if ( ( 0 <= click.x && click.x < DOM_infos.canvas.width )
&& ( 0 <= click.y && click.y < state.board_infos.dimensions.height ) ) { && ( 0 <= click.y && click.y < DOM_infos.canvas.height ) ) {
// coordinates in cell indexes // coordinates in cell indexes
click.x = Math.floor( click.x / state.board_infos.cell_dimensions.width ); click.x = Math.floor( click.x / level_infos.cell.width );
click.y = Math.floor( click.y / state.board_infos.cell_dimensions.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] ) {
@ -324,25 +341,6 @@ function initialize_a_star( dom_container ) {
return sprites; return sprites;
} }
var starhtml = '<div class="gstar">';
starhtml += '<aside id="help">' + format_help( ) + '</aside>';
starhtml += '<canvas id="starboard" width="320" height="180"></canvas>';
starhtml += '<aside id="infos"></aside>';
starhtml += '</div>';
$( state.dom_container ).html( starhtml );
state.board_infos.sprites = load_sprites( "HP48" );
state.board_infos.canvas = $( state.dom_container + " #starboard" )[ 0 ];
state.board_infos.offset = $( state.dom_container + " #starboard" ).offset();
state.board_infos.dimensions = { };
state.board_infos.dimensions.width = $( state.dom_container + " #starboard" ).width();
state.board_infos.dimensions.height = $( state.dom_container + " #starboard" ).height();
state.board_infos.cell_dimensions = { };
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 = load_level( levels, 0 ); state = load_level( levels, 0 );
start_loop( ); start_loop( );