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

canvas adjustements :

Browse source 
. only draw full board when loading level
. draw only part of the bord each move
. or when switching actors
. + various tweaks
This commit is contained in:
Gwenhael Le Moine 2011-07-13 22:17:50 +02:00
parent 1733b5c531
commit 3b1a365518
1 changed files with 64 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
js/star.js
View file

@ -83,6 +83,23 @@ function set_cell( state, x, y, value ) {
function switch_actor( state ) {
state.moving = ( state.moving == cell.BALL ) ? cell.CUBE : cell.BALL;
var ball_pos = get_pos( state, cell.BALL );
var cube_pos = get_pos( state, cell.CUBE );
// we're going to update the canvas right here and there so we need it
var ctx= board_infos.canvas.getContext( '2d' ); //$() returns a jquery object, [0] to get the canvas itself
// redraw ball
ctx.drawImage( ( state.moving == cell.BALL ) ? sprites.ball_selected : sprites.ball,
ball_pos[ 0 ] * board_infos.cell_dimensions.width,
ball_pos[ 1 ] * board_infos.cell_dimensions.height,
board_infos.cell_dimensions.width,
board_infos.cell_dimensions.height );
// redraw cube
ctx.drawImage( ( state.moving == cell.CUBE ) ? sprites.cube_selected : sprites.cube,
cube_pos[ 0 ] * board_infos.cell_dimensions.width,
cube_pos[ 1 ] * board_infos.cell_dimensions.height,
board_infos.cell_dimensions.width,
board_infos.cell_dimensions.height );
return state;
}
@ -90,7 +107,7 @@ function won_or_not( state ) {
return count_gifts( state ) === 0;
}
function display_on_canvas( state, canvas_elt ) {
function full_display_on_canvas( state, canvas_elt ) {
var ctx= $( canvas_elt )[ 0 ].getContext( '2d' ); //$() returns a jquery object, [0] to get the canvas itself
for ( var i=0 ; i < LEVEL_HEIGHT ; i++ ) {
for ( var j=0 ; j < LEVEL_WIDTH ; j++ ) {
@ -112,13 +129,15 @@ function display_on_canvas( state, canvas_elt ) {
}
}
function format_infos( state ) {
function update_infos( state, elt ) {
var infos = "<h1>Star5</h1><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>" + state.distance_travelled + "</em> meters travelled";
return infos;
$( elt + " .gstar #infos" ).html( infos );
}
function format_help( ) {
var help = "<em>←↑→↓</em> to move around<br />";
help += "<em>Space</em> to switch actor<br />";
@ -129,19 +148,19 @@ function format_help( ) {
}
function display_level( state, elt ) {
$( elt + " .gstar #infos" ).html( format_infos( state ) );
display_on_canvas( state, elt + " #starboard" );
update_infos( state, elt );
full_display_on_canvas( state, elt + " #starboard" );
}
function load_level( levelset, nb ) {
state.level = nb;
function load_level( levelset, index ) {
state.level = index;
state.board = levelset[ state.level ];
state.distance_travelled = 0;
state.moving = cell.BALL;
return state;
}
function make_a_move( state, where ) {
function make_a_move( state, elt, where ) {
var motion = [ 0, 0 ];
var item_coord = get_pos( state, state.moving );
@ -162,6 +181,9 @@ function make_a_move( state, where ) {
default: break;
}
// we're going to update the canvas right here and there so we need it
var ctx= board_infos.canvas.getContext( '2d' ); //$() returns a jquery object, [0] to get the canvas itself
/* Calculating arrival coordinates */
while ( /* Hairy conditions ahead */
/* target cell is within level's boundaries */
@ -174,18 +196,31 @@ function make_a_move( state, where ) {
)
{
state = set_cell( state, item_coord[ 0 ], item_coord[ 1 ], cell.VOID ); /* void the origin cell */
// voiding origin cell on canvas
ctx.drawImage( sprites.void,
item_coord[ 0 ] * board_infos.cell_dimensions.width,
item_coord[ 1 ] * board_infos.cell_dimensions.height,
board_infos.cell_dimensions.width,
board_infos.cell_dimensions.height );
item_coord[ 0 ] += motion[ 0 ]; /* move coordinate */
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 */
// drawing target cell on canvas
ctx.drawImage( ( state.moving == cell.BALL ) ? sprites.ball_selected : sprites.cube_selected,
item_coord[ 0 ] * board_infos.cell_dimensions.width,
item_coord[ 1 ] * board_infos.cell_dimensions.height,
board_infos.cell_dimensions.width,
board_infos.cell_dimensions.height );
state.distance_travelled++; /* increment distance_travelled */
}
update_infos( state, elt );
return state;
}
function start_loop( state, elt, board_infos ) {
function start_loop( state, elt ) {
display_level( state, elt );
$(document).focus( );
@ -208,44 +243,43 @@ function start_loop( state, elt, board_infos ) {
state.moving = ( state.moving != cell.BALL ) ? cell.BALL : cell.CUBE;
} else if ( click.x == movingpos[0] ) {
if ( click.y > movingpos[1] ) {
state = make_a_move( state, direction.DOWN );
state = make_a_move( state, elt, direction.DOWN );
} else if ( click.y < movingpos[1] ) {
state = make_a_move( state, direction.UP );
state = make_a_move( state, elt, direction.UP );
}
} else if ( click.y == movingpos[1] ) {
if ( click.x > movingpos[0] ) {
state = make_a_move( state, direction.RIGHT );
state = make_a_move( state, elt, direction.RIGHT );
} else {
state = make_a_move( state, direction.LEFT );
state = make_a_move( state, elt, direction.LEFT );
}
}
if ( won_or_not( state ) ) {
if ( state.level < levels.length - 1 ) {
state = load_level( levels, state.level + 1 );
display_level( state, elt );
}
else {
alert( "You won!" );
}
}
display_level( state, elt );
}
});
$(document).keydown(
function( e ) {
switch( e.keyCode ) {
case 38: // UP
state = make_a_move( state, direction.UP );
state = make_a_move( state, elt, direction.UP );
break;
case 40: // DOWN
state = make_a_move( state, direction.DOWN );
state = make_a_move( state, elt, direction.DOWN );
break;
case 37: // LEFT
state = make_a_move( state, direction.LEFT );
state = make_a_move( state, elt, direction.LEFT );
break;
case 39: // RIGHT
state = make_a_move( state, direction.RIGHT );
state = make_a_move( state, elt, direction.RIGHT );
break;
case 32: // SPACE
state = switch_actor( state );
@ -253,15 +287,18 @@ function start_loop( state, elt, board_infos ) {
case 78: // n
if ( state.level < levels.length - 1 ) {
state = load_level( levels, state.level + 1 );
display_level( state, elt );
}
break;
case 80: // p
if ( state.level > 0 ) {
state = load_level( levels, state.level - 1 );
display_level( state, elt );
}
break;
case 82: // r
state = load_level( levels, state.level );
display_level( state, elt );
break;
default:
break;
@ -270,13 +307,12 @@ function start_loop( state, elt, board_infos ) {
if ( won_or_not( state ) ) {
if ( state.level < levels.length - 1 ) {
state = load_level( levels, state.level + 1 );
display_level( state, elt );
}
else {
alert( "You won!" );
}
}
display_level( state, elt );
});
}
@ -305,6 +341,7 @@ function initialize_a_star( elt ) {
$( elt ).html( starhtml );
board_infos.canvas = $(elt + " #starboard")[ 0 ];
board_infos.offset = $(elt + " #starboard").offset();
board_infos.dimensions = {};
board_infos.dimensions.width = $(elt + " #starboard").width();
@ -315,5 +352,9 @@ function initialize_a_star( elt ) {
state = load_level( levels, options.starting_level );
start_loop( state, elt, board_infos );
start_loop( state, elt );
// kinda ugly workaround around a bug causing the canvas
// not to refresh the first time (before any event)
setTimeout( function(){ display_level( state, elt ); }, 1 );
}