Game

Canvas Game

HTML

<canvas id="gameCanvas" width="695" height="120"></canvas>

CSS

#gameCanvas {
    background-image: url(http://all4desktop.com/data_images/original/4238051-background.jpg);
    background-size: contain;
    background-position: center;
    max-width: 100%;    
}

 .img {
   
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

JavaScript

function Game() {


        this.config = {
            bombRate: 0.04,
            pointRate: 0.01,
            bombMinVelocity: 80,
            bombMaxVelocity: 140,
            pointMinVelocity: 70,
            pointMaxVelocity: 130,
            invaderInitialVelocity: 0,
            invaderAcceleration: 0,
            invaderDropDistance: 20,
            rocketVelocity: 120,
            rocketMaxFireRate: 2,
            gameWidth: 555,
            gameHeight: 650,
            fps: 50,
            debugMode: true,
            invaderRanks: 5,
            invaderFiles: 20,
            shipSpeed: 220,
            levelDifficultyMultiplier: 0.2,
            pointsPerInvader: 5
        };


        this.lives = 3;
        this.width = 0;
        this.height = 0;
        this.gameBounds = {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
        };
        this.intervalId = 0;
        this.score = 0;
        this.level = 1;


        this.stateStack = [];


        this.pressedKeys = {};
        this.gameCanvas = null;


        this.sounds = null;
    }


    Game.prototype.initialise = function(gameCanvas) {


        this.gameCanvas = gameCanvas;


        this.width = gameCanvas.width;
        this.height = gameCanvas.height;


        this.gameBounds = {
            left: gameCanvas.width / 2 - this.config.gameWidth / 2,
            right: gameCanvas.width / 2 + this.config.gameWidth / 2,
            top: gameCanvas.height / 2 - this.config.gameHeight / 2,
            bottom: 0,
        };
    };

    Game.prototype.moveToState = function(state) {


        if (this.currentState() && this.currentState().leave) {
            this.currentState().leave(game);
            this.stateStack.pop();
        }


        if (state.enter) {
            state.enter(game);
        }


        this.stateStack.pop();
        this.stateStack.push(state);
    };


    Game.prototype.start = function() {


        this.moveToState(new...