Issues with shooting in a HTML5 platformer game

Posted by fnx on Game Development See other posts from Game Development or by fnx
Published on 2012-11-20T13:43:29Z Indexed on 2012/11/20 17:21 UTC
Read the original article Hit count: 305

I'm coding a 2D sidescroller using only JavaScript and HTML5 canvas, and in my game I have two problems with shooting:

1) Player shoots continous stream of bullets. I want that player can shoot only a single bullet even though the shoot-button is being held down.

2) Also, I get an error "Uncaught TypeError: Cannot call method 'draw' of undefined" when all the bullets are removed. My shooting code goes like this: When player shoots, I do game.bullets.push(new Bullet(this, this.scale)); and after that:

    function Bullet(source, dir)
    {
        this.id = "bullet";
        this.width = 10;
        this.height = 3;
        this.dir = dir;

        if (this.dir == 1)
        {
            this.x = source.x + source.width - 5;
            this.y = source.y + 16;
        }
        if (this.dir == -1)
        {
            this.x = source.x;
            this.y = source.y + 16;
        }
    }
    Bullet.prototype.update = function()
    {
        if (this.dir == 1) this.x += 8;
        if (this.dir == -1) this.x -= 8;

        for (var i in game.enemies)
        {
            checkCollisions(this, game.enemies[i]);
        }
        // Check if bullet leaves the viewport
        if (this.x < game.viewX * 32 || this.x > (game.viewX + game.tilesX) * 32)
        {
            removeFromList(game.bullets, this);
        }
    }
    Bullet.prototype.draw = function()
    {
        // bullet flipping uses orientation of the player
        var posX = game.player.scale == 1 ? this.x : (this.x + this.width) * -1;
        game.ctx.scale(game.player.scale, 1); 
        game.ctx.drawImage(gameData.getGfx("bullet"), posX, this.y);
    }

I handle removing with this function:

    function removeFromList(list, object)
    {
        for (i in list)
        {
            if (object == list[i])
            {
                list.splice(i, 1);
                break;
            }
        }
    }

And finally, in the main game loop I have this:

for (var i in game.bullets)
{
    game.bullets[i].update();
    game.bullets[i].draw();
}

I have tried adding if (game.bullets.length > 0) to the main game loop before the above draw&update calls, but I still get the same error.

© Game Development or respective owner

Related posts about JavaScript

Related posts about html5