Skip to content

Commit

Permalink
some gfx
Browse files Browse the repository at this point in the history
  • Loading branch information
@josejuan
josejuan committed Mar 1, 2012
1 parent 4cef7ab commit 677f741
Show file tree
Hide file tree
Showing 7 changed files with 166 additions and 58 deletions.
Binary file added games/sokobullban/gfx/cont-top-shadow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added games/sokobullban/gfx/cont-top.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added games/sokobullban/gfx/dst-top-shadow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added games/sokobullban/gfx/dst-top.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added games/sokobullban/gfx/wall-top.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
217 changes: 162 additions & 55 deletions games/sokobullban/sokobullban.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,33 +15,45 @@ function body_onLoad() {
s.onInit.Attach('init', function(s, d) { s.UpdateViewport(500, 500) });
s.Init();
s.font = new H5GL.Font('gfx/font.png');

s.ctlLoader = create_Loader();
s.ctlMenu = create_Menu();
s.ctlGame = create_Game();
s.ctlNewGame = create_NewGame();
s.ctlCredits = create_Credits();
s.ctlHelp = create_Help();
s.AttachController('loader', create_Loader());

s.util = create_Util();

s.AttachController('loader', s.ctlLoader);
}

//=== create_Loader ==============================================================================

function create_Loader() {
return {
loader: null,
onControllerActivation: function(s, d) {
var il = {
ground: {src: 'gfx/ground.jpg'},
bulltop: {src: 'gfx/bull-top.png'},
bulltopshadow: {src: 'gfx/bull-top-shadow.png'}
bulltopshadow: {src: 'gfx/bull-top-shadow.png'},
conttop: {src: 'gfx/cont-top.png'},
conttopshadow: {src: 'gfx/cont-top-shadow.png'},
walltop: {src: 'gfx/wall-top.png'},
dsttop: {src: 'gfx/dst-top.png'},
dsttopshadow: {src: 'gfx/dst-top-shadow.png'}
};
s.loader = new H5GL.Loader(function(){}, il);
s.loader.Start();
this.loader = new H5GL.Loader(function(){}, il);
this.loader.Start();
s.util.images = this.loader.__images;
},
onDraw: function(s, d) {
if(s.loader.__imagesLoaded < s.loader.__imagesToLoad) {
if(this.loader.__imagesLoaded < this.loader.__imagesToLoad) {
var vw = d.canvas.width, vh = d.canvas.height;
d.context.clearRect(0, 0, vw, vh);
s.font.DrawString(s, d,
s.loader.__imagesLoaded + " / " + s.loader.__imagesToLoad,
this.loader.__imagesLoaded + " / " + this.loader.__imagesToLoad,
{x: vw >> 1, y: vh >> 1, center: true, middle: true, maxheight: 25});
} else {
s.DetachController('loader');
Expand All @@ -51,6 +63,70 @@ function create_Loader() {
};
}

//=== create_Util ==============================================================================

function create_Util() {
return {
drawBull: function(dc, x, y, direction, shadow) {
dc.save();
dc.translate(x, y);
var a = 0;
switch(direction) {
case 0: a = 3.1416; break;
case 1: a = -1.5708; break;
//case 2: a = 0; break;
case 3: a = 1.5708; break;
}
dc.rotate(a);
dc.drawImage(shadow ? this.images.bulltopshadow : this.images.bulltop, -23, -31);
dc.restore();
},
drawCont: function(dc, x, y, shadow) {
dc.drawImage(shadow ? this.images.conttopshadow : this.images.conttop, x - 28, y - 28);
},
drawWall: function(dc, x, y) {
dc.drawImage(this.images.walltop, x - 25, y - 25);
},
drawDst: function(dc, x, y, shadow, time) {
if(shadow)
dc.drawImage(this.images.dsttopshadow, x - 28, y - 28);
else {
var k = Math.cos(4 * time);
if(k > 0) {
dc.globalAlpha = k;
dc.drawImage(this.images.dsttop, x - 28, y - 28);
dc.globalAlpha = 1.0;
}
}
},
drawMap: function(dc, x, y, map, bullO, time, scale, rotate) {
dc.save();
dc.translate(x, y);
if(scale)
dc.scale(scale, scale);
if(rotate)
dc.rotate(rotate)
var left = -25 * map.cols; // -50 * cols / 2
var top = -25 * map.rows;

for(var n = 0, L = map.dst.length; n < L; n++)
this.drawDst(dc, left + 50 * map.dst[n].x, top + 50 * map.dst[n].y, true);
for(var n = 0, L = map.cont.length; n < L; n++)
this.drawCont(dc, left + 50 * map.cont[n].x, top + 50 * map.cont[n].y, true);
this.drawBull(dc, left + 50 * map.bull.x, top + 50 * map.bull.y, bullO, true);

for(var n = 0, L = map.dst.length; n < L; n++)
this.drawDst(dc, left + 50 * map.dst[n].x, top + 50 * map.dst[n].y, false, time);
this.drawBull(dc, left + 50 * map.bull.x, top + 50 * map.bull.y, bullO, false);
for(var n = 0, L = map.cont.length; n < L; n++)
this.drawCont(dc, left + 50 * map.cont[n].x, top + 50 * map.cont[n].y, false);
for(var n = 0, L = map.wall.length; n < L; n++)
this.drawWall(dc, left + 50 * map.wall[n].x, top + 50 * map.wall[n].y);
dc.restore();
}
};
}

//=== create_Menu ==============================================================================

function create_Menu() {
Expand Down Expand Up @@ -131,6 +207,36 @@ function create_Credits() {
};
}

//=== sbb_map ==============================================================================
var sbb_map = function(idx_map) {
var dstL = [];
var contL = [];
var wallL = [];
var bull = {x: 0, y: 0};
var map = sokomaps[idx_map].map.split('\n');
for(var r = 0, L = map.length, H = map[0].length; r < L; r++)
for(var c = 0; c < H; c++) {
var w = map[r][c];
var p = {x: c, y: r};
if(w == '@' || w == '*') bull = p;
if(w == '*' || w == '-' || w == '+') dstL.push(p);
if(w == '|' || w == '+') contL.push(p);
if(w == 'X') wallL.push(p);
}
var self = {
idx: idx_map,
cols: map[0].length,
rows: map.length,
dst: dstL,
cont: contL,
bull: bull,
wall: wallL,
width: 50 * map[0].length,
height: 50 * map.length
};
return self;
};

//=== create_Help ==============================================================================

function create_Help() {
Expand Down Expand Up @@ -159,21 +265,65 @@ function create_Help() {

function create_Game() {
return {
ANIMATIONTIME: 0.5, // seconds
state: 0, /* 0 - in, 1 - static, 2 - out */
onControllerActivation: function(s, d) {
this.currentOption = 0;
this.map = new sbb_map(0);
this.state = 0;
this.animationStartTime = s.currentTime;
},
onDraw: function(s, d) {
var dc = d.context;
var vw = d.canvas.width;
var vh = d.canvas.height;
d.context.clearRect(0, 0, vw, vh);

dc.drawImage(s.util.images.ground, 0, 0);

var scale, position;
switch(this.state) {
case 0: {
var t = (s.currentTime - this.animationStartTime) / this.ANIMATIONTIME;
scale = 0.5 * t;
position = vh * (1 - scale);
if(scale > 0.5)
this.state = 1;
}
break;
case 1:
scale = 0.5 + 0.005 * Math.cos(4 * s.currentTime);
position = vh >> 1;
break;
case 2: {
var t = (s.currentTime - this.animationStartTime) / this.ANIMATIONTIME;
scale = 0.5 * (1 - t);
position = vh * (1 - scale);
if(scale < 0) {
this.map = this.nextMap;
this.state = 0;
this.animationStartTime = s.currentTime;
}
}
break;
}
s.util.drawMap(dc, vw >> 1, position, this.map, 0, s.currentTime, scale, s.currentTime * 0.1);

s.font.DrawString(s, d,
"game...",
{x: vw >> 1, y: vh >> 1, center: true, middle: true, maxheight: 25});
},
onKeyUp: function(s, d) {
if(d.keyCode == 27) {
s.DetachController('game');
s.AttachController('menu', s.ctlMenu);
switch(d.keyCode) {
case 27: // ESC
s.DetachController('game');
s.AttachController('menu', s.ctlMenu);
break;
case 37:
this.nextMap = new sbb_map((this.map.idx + 1) % sokomaps.length);
this.state = 2;
this.animationStartTime = s.currentTime;
break;
case 39:
break;
}
}
};
Expand All @@ -183,56 +333,13 @@ function create_Game() {

function create_NewGame() {
return {
drawBull: function(dc, x, y, direction, shadow) {
dc.save();
dc.translate(x, y);
var a = 0;
switch(direction) {
case 0: a = 3.1416; break;
case 1: a = -1.5708; break;
//case 2: a = 0; break;
case 3: a = 1.5708; break;
}
dc.rotate(a);
dc.drawImage(this.images.bulltopshadow, -23, -31);
dc.drawImage(this.images.bulltop, -23, -31);
dc.restore();
},
selectedMap: 0,
onControllerActivation: function(s, d) {
this.images = s.loader.__images;
this.currentOption = 0;
},
onDraw: function(s, d) {
var dc = d.context;
var vw = d.canvas.width;
var vh = d.canvas.height;

dc.drawImage(s.loader.__images.ground, 0, 0);

dc.beginPath();
dc.moveTo(100, 100);
dc.lineTo(150, 100);
dc.lineTo(150, 150);
dc.lineTo(100, 150);
dc.closePath();
dc.stroke();

/*
dc.drawImage(s.loader.__images.bulltopshadow, 100, 100);
dc.drawImage(s.loader.__images.bulltop, 100, 100);
*/
this.drawBull(dc, 125, 125, 0, true);
this.drawBull(dc, 125, 125, 0);

this.drawBull(dc, 175, 125, 1, true);
this.drawBull(dc, 175, 125, 1);

this.drawBull(dc, 225, 125, 2, true);
this.drawBull(dc, 225, 125, 2);

this.drawBull(dc, 275, 125, 3, true);
this.drawBull(dc, 275, 125, 3);

s.font.DrawString(s, d,
"new game...",
{x: vw >> 1, y: vh >> 1, center: true, middle: true, maxheight: 25});
Expand Down
7 changes: 4 additions & 3 deletions games/sokobullban/sokobullban_maps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"·", empty cell
"X", solid wall
"*", bulldozer start point
"@", bulldozer start point
"*", bulldozer over a objetive platform
"-", objetive platform
"|", block to move to objetive platform
"+", block over a objetive platform
Expand All @@ -28,7 +29,7 @@ var sokomaps = [
description: "A simple test map",
map: "\
XXXXXXXXXX\n\
X···XX··*X\n\
X···XX··@X\n\
X········X\n\
X---XX|||X\n\
XXXXXXXXXX"
Expand All @@ -39,7 +40,7 @@ XXXXXXXXXX"
description: "Other simple test map",
map: "\
·XXX··XXX·\n\
X-··XX··*X\n\
X-··XX··@X\n\
X········X\n\
X·--XX|||X\n\
·XXX··XXX·"
Expand Down

0 comments on commit 677f741

Please sign in to comment.