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

now using canvas

Browse source 
Signed-off-by: Gwenhael Le Moine <gwenhael.le.moine@gmail.com>
This commit is contained in:
Gwenhael Le Moine 2011-07-13 18:34:03 +02:00
parent 976b6a1f40
commit 02cb44a000
6 changed files with 21 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
css/star.css
View file

@ -1,12 +1,4 @@
.gstar{width:660px;height:180px}
.gstar em{font-weight:bold}
.gstar #blackboard{width:320px;height:180px;background:#333;float:left}
.gstar #blackboard .starcell{width:20px;height:20px;display:block;float:left;text-align:center}
.gstar #blackboard .wall{color:#000}
.gstar #blackboard .ball{color:#99f}
.gstar #blackboard .cube{color:red}
.gstar #blackboard .ball_selected{color:#99f}
.gstar #blackboard .cube_selected{color:red}
.gstar #blackboard .gift{color:yellow}
.gstar #blackboard .void{}
.gstar #starboard{width:320px;height:180px;background:#333;float:left}
.gstar aside{float:left;height:140px;width:130px;padding:20px;background:#ddd}

7
css/star_HP48.css
View file

@ -1,7 +0,0 @@
.gstar #blackboard .wall{background-image:url(../themes/HP48/tex_wall.png);}
.gstar #blackboard .ball{background-image:url(../themes/HP48/tex_ball.png);}
.gstar #blackboard .cube{background-image:url(../themes/HP48/tex_cube.png);}
.gstar #blackboard .ball_selected{background-image:url(../themes/HP48/tex_ball_selected.png);}
.gstar #blackboard .cube_selected{background-image:url(../themes/HP48/tex_cube_selected.png);}
.gstar #blackboard .gift{background-image:url(../themes/HP48/tex_gift.png);}
.gstar #blackboard .void{background-image:url(../themes/HP48/tex_empty.png);}

7
css/star_cyco001.css
View file

@ -1,7 +0,0 @@
.gstar #blackboard .wall{background-image:url(../themes/cyco001/tex_wall.png);}
.gstar #blackboard .ball{background-image:url(../themes/cyco001/tex_ball.png);}
.gstar #blackboard .cube{background-image:url(../themes/cyco001/tex_cube.png);}
.gstar #blackboard .ball_selected{background-image:url(../themes/cyco001/tex_ball_selected.png);}
.gstar #blackboard .cube_selected{background-image:url(../themes/cyco001/tex_cube_selected.png);}
.gstar #blackboard .gift{background-image:url(../themes/cyco001/tex_gift.png);}
.gstar #blackboard .void{background-image:url(../themes/cyco001/tex_empty.png);}

7
css/star_cyco002.css
View file

@ -1,7 +0,0 @@
.gstar #blackboard .wall{background-image:url(../themes/cyco002/tex_wall.png);}
.gstar #blackboard .ball{background-image:url(../themes/cyco002/tex_ball.png);}
.gstar #blackboard .cube{background-image:url(../themes/cyco002/tex_cube.png);}
.gstar #blackboard .ball_selected{background-image:url(../themes/cyco002/tex_ball_selected.png);}
.gstar #blackboard .cube_selected{background-image:url(../themes/cyco002/tex_cube_selected.png);}
.gstar #blackboard .gift{background-image:url(../themes/cyco002/tex_gift.png);}
.gstar #blackboard .void{background-image:url(../themes/cyco002/tex_empty.png);}

7
css/star_inversed.css
View file

@ -1,7 +0,0 @@
.gstar #blackboard .wall{background-image:url(../themes/inversed/tex_wall.png);}
.gstar #blackboard .ball{background-image:url(../themes/inversed/tex_ball.png);}
.gstar #blackboard .cube{background-image:url(../themes/inversed/tex_cube.png);}
.gstar #blackboard .ball_selected{background-image:url(../themes/inversed/tex_ball_selected.png);}
.gstar #blackboard .cube_selected{background-image:url(../themes/inversed/tex_cube_selected.png);}
.gstar #blackboard .gift{background-image:url(../themes/inversed/tex_gift.png);}
.gstar #blackboard .void{background-image:url(../themes/inversed/tex_empty.png);}

60
js/star.js
View file

@ -98,44 +98,25 @@ function won_or_not( state ) {
return count_gifts( state ) === 0;
}
function format_level( state, text ) {
function Replacer( conversionObject ) {
var regexpStr = '';
for ( var k in conversionObject ) {
regexpStr += ( regexpStr.length ? '|' : '' ) + k;
}
var regexpr = new RegExp( regexpStr, 'mig' ); // g: global, m:multi-line i: ignore case
return function(s) {
return s.replace( regexpr, function(str, p1, p2, offset, s) {
var a = conversionObject[ str ];
return a == undefined ? str : a;
} );
};
}
var substitutions = {
'#': '<span class="starcell wall">#</span>',
'x': '<span class="starcell gift">x</span>',
' ': '<span class="starcell void"> </span>',
'H': '<span class="starcell cube">H</span>',
'@': '<span class="starcell ball">@</span>'
};
substitutions[ state.moving ] = substitutions[ state.moving ].replace( '">', '_selected">' );
if ( text == false ) {
for ( var c in substitutions ) {
substitutions[ c ] = substitutions[ c ].replace( />.</, '><' );
}
}
var myReplacer = Replacer( substitutions );
return myReplacer( state.board );
}
function display_on_canvas( state, canvas_elt ) {
board_infos = {};
board_infos.cell_dimensions = {};
board_infos.cell_dimensions.width = 20;
board_infos.cell_dimensions.height = 20;
var ctx= document.getElementById( canvas_elt ).getContext( '2d' );
for ( var i=0 ; i < LEVEL_HEIGHT ; i++ ) {
for ( var j=0 ; j < LEVEL_WIDTH ; j++ ) {
ctx.translate( j * board_infos.cell_dimensions.width, i * board_infos.cell_dimensions.height );
ctx.drawImage( sprites.ball, j * board_infos.cell_dimensions.width, i * board_infos.cell_dimensions.height );
var c = get_cell( state, j, i );
var sprite = "bla";
switch( c ) {
case "@": sprite = ( state.moving == cell.BALL ) ? sprites.ball_selected : sprites.ball; break;
case "H": sprite = ( state.moving == cell.CUBE ) ? sprites.cube_selected : sprites.cube; break;
case "#": sprite = sprites.wall; break;
case "x": sprite = sprites.gift; break;
case " ": sprite = sprites.void; break;
}
ctx.drawImage( sprite, j * board_infos.cell_dimensions.width, i * board_infos.cell_dimensions.height, board_infos.cell_dimensions.width, board_infos.cell_dimensions.height
);
}
}
}
@ -156,7 +137,6 @@ function format_help( ) {
}
function display_level( state, elt ) {
$( elt + " .gstar #blackboard" ).html( format_level( state, false ) );
$( elt + " .gstar #infos" ).html( format_infos( state ) );
display_on_canvas( state, "starboard" );
}
@ -313,14 +293,14 @@ function start_loop( state, elt ) {
function initialize_a_star( elt ) {
var starhtml = '<div class="gstar">';
starhtml += '<aside id="help">' + format_help( state ) + '</aside>';
starhtml += '<div id="blackboard"></div>';
starhtml += '<canvas id="starboard" width="320" height="180"></canvas>';
starhtml += '<aside id="infos"></aside>';
starhtml += '</div><canvas id="starboard" width="320" height="180"></canvass>';
starhtml += '</div>';
board_infos.position = $("#blackboard").offset();
board_infos.position = $(elt + "#starboard").offset();
board_infos.dimensions = {};
board_infos.dimensions.width = $("#blackboard").width();
board_infos.dimensions.height = $("#blackboard").height();
board_infos.dimensions.width = $(elt + "#starboard").width();
board_infos.dimensions.height = $(elt + "#starboard").height();
board_infos.cell_dimensions = {};
board_infos.cell_dimensions.width = board_infos.dimensions.width / LEVEL_WIDTH;
board_infos.cell_dimensions.height = board_infos.dimensions.height / LEVEL_HEIGHT;