# Bomberman clone, how to do bombs?

I'm playing around with a bomberman clone to learn game-developement.

So far I've done tiles, movement, collision detection, and item pickup. I also have pseudo bombplacing (just graphics and collision, no real functionality).

I've made a jsFiddle of the game with the functionality I currently have. The code in the fiddle is very ugly though. Scroll past the map and you find how I place bombs.

Anyway, what I would like to do is an object, that has the general information about bombs like:

function Bomb(){
this.placeBomb = function (){
if(player.bombs != 0){
// place bomb
}
}
this.explosion = function (){
// Explosion
}
}


I don't really know how to fit it into the code though. Everytime I place a bomb, do I do var bomb = new Bomb(); or do i need to constantly have that in the script to be able to access it.

How does the bomb do damage? Is it as simple as doing X,Y in all directions until radius runs out or object stops it? Can I use something like setTimeout(bomb.explosion, 3000) as timer?

Any help is appreciated, be it a simple explanation of the theory or code examples based on the fiddle. When I tried the object way it breaks the code.

Update: I now place bombs, and after a certain amount of time delete it depending on the position I placed it. But if I place a bomb before the first bomb explodes it only deletes one of them (obviously since bombX and bombY has changed since the first was placed).

Now i need to know how to fix this issue, maybe create a new array with all of the bomb positions? What's the best way of doing this?

Current code:

function placeBomb(){
if(placebomb && player.bombs != 0){
map[player.Y][player.X].object = 2;
bombX = player.X; bombY = player.Y;
placebomb = false;
player.bombs--;
setTimeout(explode, 3000);
}
}
function explode(){
delete map[bombY][bombX].object;
player.bombs++;
}

• jsFiddle + Firebug -> game prototyping tool? Had never thought of that. +1 for blowing my mind very pleasantly! :) – Anko Mar 22 '12 at 19:19

It doesn't look that bad, but you need better control of timing and input. As it is movement speed is dependent on the keystroke repetition setting on the users machine, that is not exactly optimal.

Instead you should track which keys are currently being held down, you can do this like (in pseudocode):

keyisdown=false
keydown event{
if(!keyisdown){
//This is the 'real' keydown event, the one that only happens the moment the
//key is pressed down. You may not need it, but this is how you construct it.
}
keyisdown=true
}

keyup event{
keyisdown=false
}


And then in your update function you move the player if keyisdown, and possibly you apply some other conditions, like the player can't move if he moved less than some number of updates ago.

Keep an updated counter or some other way of keeping track of time so that your code always know exactly how far progressed it should be.

Da bomb
Personally I'd keep it simple, you don't actually need to use this, new and all the other fancy stuff in JavaScript to make useful objects.

You could do something like:

bombobject = {} //That is all it takes to make an object.
bombobject.blowtime = currenttime + delay
bombobject.position = mapobject
mapobject.bomb = bombobject


Then you can cycle through the map on every update, check if there is a bomb and if it's time to blow, if so blow and remove the bomb object.

Bugtracking
Your code is leaking errors, they are pretty simple, but if you don't learn about them and handle them you are going to have problems later on. Every modern browser has a Firebug clone developer console. Open it, look at the script console tab, see all the nasty red text and fix it.

Edit: Timekeeping concerns
Just for the record, you'd probably want something slightly more advanced than setInterval for timing, if you are serious you really need to make your code adjust for the timeslip. See my very first Stack Overflow answer for an approximate description of the problem: https://stackoverflow.com/a/2549426/305545

Edit: setTimeOut version fixed
Since you are using the same variables for different bombs you are going to overwrite them whenever a new bomb is placed. You can use a closure to make individual variables for each bomb, like so:

function placeBomb(){
if(placebomb && player.bombs != 0){
map[player.Y][player.X].object = 2;
var bombX = player.X;
var bombY = player.Y;
placebomb = false;
player.bombs--;
setTimeout(explode, 3000);
}
function explode(){
delete map[bombY][bombX].object;
player.bombs++;
}
}


Now the bombX and bombY variables and the explode function are locals to the closure created by placeBombs, thus it is the local instance of explode that is attached to the timeout, and it reads the local variables. Each time you call placeBomb a new closure is created.

I wouldn't have used setTimeout for this, I would have counted updates, thus ensuring a fixed number of updates before the bomb blows, but I guess this will work ok.

• Yeah the fiddle is not the same code as my game.js, some copy paste and just stuffing in on random. The real code don't give any errors in firebug or chromes developer tools. I will try to get your bomb working. Thanks. :) – justanotherhobbyist Mar 22 '12 at 17:17
• Really, no errors? Neither if you try to move off the map? – aaaaaaaaaaaa Mar 22 '12 at 17:52
• Now that you mention it I did get that one, but that's not an issue since the first tiles are a frame of concrete. :) Just the fiddle map that was simplified. – justanotherhobbyist Mar 22 '12 at 18:04
• Yeah I noticed the problem with setTimeout, I now have an array of bombs, that works fine with 2 bombs, with more it doesn't delete the middle one, I guess I have to do somekind of timing if(timer>=timeplaced) or something similar. I learn alot by making mistakes and having to sort them out as I go :D, few days ago I couldn't even make pong. – justanotherhobbyist Mar 22 '12 at 20:32
• You are welcome. And it's great to hear that you are learning, sometimes it's hard to believe that solving peoples immediate problems is really going to lead anywhere. – aaaaaaaaaaaa Mar 22 '12 at 22:03

Seems like you got a pretty nice awnser, just wanted to add some handy code for the explosions.

            for (int i = 0; i < actor.blasradius; ++i)
{
tiles[actor.tileX - i][actor.tileY].explode(); //left
tiles[actor.tileX + i][actor.tileY].explode(); //right
tiles[actor.tileX][actor.tileY -i].explode(); //up
tiles[actor.tileX][actor.tileY + i].explode(); //down
}