JavaScript Game Tutorial - Space Invaders Part 5 - Sprites and Polish

//
// Explosion Object
//
function Explosion(position, speed, direction, rank, duration) {
    Entity.call(this, position, speed, direction);

    this.width = 13;
    this.height = 10;

    this.rank = rank;
    this.duration = duration;
}
Explosion.prototype = Object.create(Entity.prototype);

Explosion.prototype.update = function (dt) {
    Entity.prototype.update.call(this, dt);

    if( this.time > this.duration ) {
        this.hp = 0;
    }
};

//
// Player Explosion
//
function PlayerExplosion(position, duration) {
    Entity.call(this, position, 0, new Vector2d(0, 0));

    this.width = 20;
    this.height = 10;
    this.duration = duration;
}
PlayerExplosion.prototype = Object.create(Entity.prototype);

PlayerExplosion.prototype.update = function (dt) {
    Entity.prototype.update.call(this, dt);
    if( this.time > this.duration ) {
        this.hp = 0;
    }
};

// In game.update(time)
if( e.hp <= 0 ) {
    removeEntities.push(e);

    if( e instanceof Enemy ) {
        _score += e.rank + 1;
        this.addEntity( new Explosion(e.position, e.speed, e.direction, e.rank, 5/60));
    }

    else if( e instanceof Player ) {
        _livesRemaining--;
        this.addEntity( new PlayerExplosion(e.position, 2));
    }

    else if( e instanceof PlayerExplosion ) {
        this.addEntity( new Player( new Vector2d(100, 175), 90, new Vector2d(0, 0) ));
    }
}

//
// Sprite Object
//
function Sprite(imgPath, frames, frameRate, r, g, b) {
    var spriteImage = new Image();
    var image = new Image();

    spriteImage.onload = function () {
        var spriteCanvas = document.createElement("canvas");
        var spriteContext = spriteCanvas.getContext('2d');

        spriteCanvas.width = spriteImage.width;
        spriteCanvas.height = spriteImage.height;

        spriteContext.drawImage(spriteImage,
                                0, 0, spriteImage.width, spriteImage.height,
                                0, 0, spriteCanvas.width, spriteCanvas.height);

        var sourceData = spriteContext.getImageData(0, 0, spriteImage.width, spriteImage.height);

        var data = sourceData.data;
        for (var i=0; i<data.length; i += 4) {
            data[i]  = r;
            data[i+1]= g;
            data[i+2]= b;
            // Leave the alpha channel alone
        }
        spriteContext.putImageData(sourceData, 0, 0);

        image.src = spriteCanvas.toDataURL('image/png');
    };

    spriteImage.src = imgPath;

    this.frames = frames;
    this.frameRate = frameRate;
    this.timer = 0;
    this.currentFrame = 0;
    this.image = image;
}

Sprite.prototype.update = function (dt) {
    this.timer += dt;
    if( this.timer > 1/this.frameRate ) {
        this.timer = 0;

        this.currentFrame = (this.currentFrame+1)%this.frames;
    }
};

var _playerSprite = new Sprite("/assets/Invader/player.png",
                                1, 1, 255, 255, 0);
var _playerExplosionSprite = new Sprite("/assets/Invader/player_explosion.png",
                                2, 4, 255, 255, 0);

var _enemySprites = [new Sprite("/assets/Invader/enemy0.png",
                                 2, 2, 150, 7, 7),
                     new Sprite("/assets/Invader/enemy1.png",
                                2, 2, 150, 89, 7),
                     new Sprite("/assets/Invader/enemy2.png",
                                2, 2, 56, 150, 7),
                     new Sprite("/assets/Invader/enemy3.png",
                                2, 2, 7, 150, 122),
                     new Sprite("/assets/Invader/enemy4.png",
                                2, 2, 46, 7, 150)];

var _explosionSprites = [new Sprite("/assets/Invader/explosion.png",
                                    1, 1, 150, 7, 7),
                         new Sprite("/assets/Invader/explosion.png",
                                    1, 1, 150, 89, 7),
                         new Sprite("/assets/Invader/explosion.png",
                                    1, 1, 56, 150, 7),
                         new Sprite("/assets/Invader/explosion.png",
                                    1, 1, 7, 150, 122),
                         new Sprite("/assets/Invader/explosion.png",
                                    1, 1, 46, 7, 150)];

var _sprites = [].concat(_playerSprite, _playerExplosionSprite, _enemySprites, _explosionSprites);

function _drawSprite(sprite, entity) {
    _context.drawImage(sprite.image,
                       (sprite.image.width/sprite.frames)*sprite.currentFrame,
                       0,
                       sprite.image.width/sprite.frames,
                       sprite.image.height,
                       entity.position.x-entity.width/2,
                       entity.position.y-entity.height/2,
                       entity.width, entity.height);
}

var _previousLives = 0;

function _updateUI() {
    var scoreElement = document.getElementById("score");
    var highScoresElement = document.getElementById("highscores");
    var menuElement = document.getElementById("menu");
    var titleElement = document.getElementById("title");
    var livesElement = document.getElementById("lives");

    // Update Score
    var scoreText = "Score " + Math.round(game.score());
    if( scoreElement.innerHTML != scoreText ) {
        scoreElement.innerHTML = scoreText;
    }

    // Update Player Lives
    if( _previousLives !== game.livesRemaining() ) {
        _previousLives = game.livesRemaining();

        while( livesElement.hasChildNodes() ) {
            livesElement.removeChild(livesElement.firstChild);
        }

        livesElement.innerHTML = " ";

        // Add an image for each life
        for(i=0; i<game.livesRemaining(); i++) {
            var img = document.createElement("img");
            img.src = _playerSprite.image.src;
            img.style.marginRight = "5px";

            livesElement.appendChild(img);
        }
    }

    if( game.gameOver() ) {
        // Update High Scores
        var scores = game.highScores();
        for( i=0; i<scores.length; i++) {
            var elem = document.getElementById("score"+i);
            elem.innerHTML = scores[i];
        }

        highScoresElement.style.display = "block";
        menuElement.style.display = "block";
        titleElement.style.display = "none";
    }
    else {
        highScoresElement.style.display = "none";
        menuElement.style.display = "none";
        titleElement.style.display = "none";
    }
}

function _render(dt) {
    var i,
        entity,
        entities = game.entities();

    // Calculate ScaleFactor
    _scaleFactor = _canvas.clientWidth / game.gameFieldRect().width;
    _scaleFactor = Math.max(1, Math.min(2, _scaleFactor));
    _canvas.width = game.gameFieldRect().width * _scaleFactor;
    _canvas.height = game.gameFieldRect().height * _scaleFactor;
    _context.scale(_scaleFactor, _scaleFactor);

    // Update the Sprites
    for( i=_sprites.length-1; i>=0; i--) {
        _sprites[i].update(dt);
    }

    // Draw Background
    _context.fillStyle = "black";
    _context.fillRect(0, 0, _canvas.width, _canvas.height);

    // Draw Entities
    for( i=entities.length-1; i>=0; i-- ) {
        entity = entities[i];

        if( entity instanceof Enemy ) {
            _drawSprite(_enemySprites[entity.rank], entity);
        }
        else if( entity instanceof Player ) {
            _drawSprite(_playerSprite, entity);
        }
        else if( entity instanceof PlayerExplosion ) {
            _drawSprite(_playerExplosionSprite, entity);
        }
        else if( entity instanceof Explosion ) {
            _drawSprite(_explosionSprites[entity.rank], entity);
        }
        else if( entity instanceof Projectile ) {
            _drawRectangle(_projectileColors[entity.type], entity);
        }
    }

    // Draw Floor
    _context.strokeStyle = "#816d1a";
    _context.moveTo(0, game.gameFieldRect().height);
    _context.lineTo(game.gameFieldRect().width, game.gameFieldRect().height);
    _context.stroke();

    // Update UI
    _updateUI();
}