flappy.js

var SPEED = 200;
var JET = 420;
var GRAVITY = 900;
var OPENING = 200;
var SPAWN_RATE = 1.25;

var state = {
    preload: function() {
        this.load.image( "wall", "assets/wall.png" );
        this.load.image( "background", "assets/background-texture.png" );
        this.load.spritesheet( "player", "assets/player.png", 48, 48 );

        this.load.audio( "jet", "assets/jet.wav" );
        this.load.audio( "score", "assets/score.wav" );
        this.load.audio( "hurt", "assets/hurt.wav" );
    },
    create: function() {
        // Environment
        this.background = this.add.tileSprite( 0, 0, this.world.width, this.world.height, "background" );
        this.jetSnd = this.add.audio( "jet" );
        this.scoreSnd = this.add.audio( "score" );
        this.hurtSnd = this.add.audio( "hurt" );

        // Walls
        this.walls = this.add.group();

        // Physics
        this.physics.startSystem( Phaser.Physics.ARCADE );
        this.physics.arcade.gravity.y = GRAVITY;

        // Player
        this.player = this.add.sprite( 0, 0, "player" );
        this.player.animations.add( "fly", [0,1,2], 10, true );
        this.physics.arcade.enableBody( this.player );
        this.player.body.collideWorldBounds = true;

        // Text
        this.scoreText = this.add.text(
            this.world.centerX,
            this.world.height * 0.23,
            "",
            {
                size: "32px",
                fill: "#fff",
                align: "center"
            }
        );
        this.scoreText.anchor.setTo( 0.5, 0.5 );

        // Event handling
        this.input.onDown.add( this.jet, this );

        // Init
        this.reset();
    },
    update: function() {
        if ( this.gameStarted ) {

            // Set player animation based on wheter player is falling or flying
            if ( this.player.body.velocity.y > -20 ) {
                this.player.frame = 3;
            } else {
                this.player.animations.play( "fly" );
            }

            // Prep off-screen walls for garbage collection
            this.walls.forEachAlive(function(wall) {
                if ( wall.x + wall.width < game.world.bounds.left ) {
                    wall.kill();
                } else if ( ! wall.scored && wall.x <= state.player.x  ) {
                    state.addScore( wall );
                }
            });

            // Detect if player hits bottom of the world
            if ( ! this.gameOver ) {
                if ( this.player.body.bottom >= this.world.bounds.bottom ) {
                    this.setGameOver();
                }

                this.physics.arcade.collide( this.player, this.walls, this.setGameOver, null, this );
            }

        }

        // Center in view when game hasn't started yet
        else {
            this.player.y = this.world.centerY + ( 8 * Math.cos( this.time.now  / 200 ) );
        }
    },
    reset: function() {
        this.background.autoScroll( ( SPEED * 0.7 ) * -1, 0 );

        this.gameStarted = false;
        this.gameOver = false;
        this.score = 0;

        this.player.body.allowGravity = false;
        this.player.reset( this.world.width * 0.25, this.world.centerY );
        this.player.animations.play( "fly" );

        text = "TOUCH TO\nSTART GAME";
        if ( localStorage.getItem("highscore") ) {
            text += "\n\nHIGH SCORE: " + localStorage.getItem( "highscore" );
        }
        this.scoreText.setText( text );

        this.walls.removeAll();
    },
    start: function() {
        this.player.body.allowGravity = true;
        this.scoreText.setText( "SCORE\n" + this.score );
        this.gameStarted = true;

        this.wallTimer = this.game.time.events.loop( Phaser.Timer.SECOND * SPAWN_RATE, this.spawnWalls, this );
        this.wallTimer.timer.start();
    },
    jet: function() {
        if ( ! this.gameStarted ) {
            this.start();
        }

        if ( ! this.gameOver ) {
            this.player.body.velocity.y = JET * -1;
            this.jetSnd.play();
        } else if ( this.time.now > this.timeOver + 400 ) {
            this.reset();
        }
    },
    setGameOver: function() {
        this.gameOver = true;
        this.scoreText.setText( "FINAL SCORE\n" + this.score + "\n\nTOUCH TO\nTRY AGAIN" );
        this.timeOver = this.time.now;

        // Stop background
        this.background.autoScroll( 0, 0 );

        // Stop walls and wall spawner
        this.walls.forEachAlive(function(wall) {
            wall.body.velocity.x = wall.body.velocity.y = 0;
        });
        this.wallTimer.timer.stop();

        // Stop player from bouncing off walls
        this.player.body.velocity.x = 0;
        this.hurtSnd.play();
    },
    spawnWall: function(y, flipped) {
        var wall = this.walls.create(
            game.width,
            y + ( flipped ? OPENING * -1 : OPENING ) * 0.5,
            "wall"
        );

        this.physics.arcade.enableBody( wall );
        wall.body.allowGravity = false;
        wall.scored = false; // Custom prop we use to calculate game score
        wall.body.immovable = true;
        wall.body.velocity.x = SPEED * -1;

        if ( flipped ) {
            wall.scale.y = -1;
            // We need to update bounding box so it matches the graphics
            wall.body.offset.y = wall.body.height * -1;
        }

        return wall;
    },
    spawnWalls: function() {
        // Get random point between 30% from the top and 30% from the bottom
        var wallY = this.rnd.integerInRange( game.height * 0.3, game.height * 0.7 );

        var bottomWall = this.spawnWall( wallY );
        var topWall = this.spawnWall( wallY, true );
    },
    addScore: function(wall) {
        wall.scored = true;
        this.score += 0.5;
        this.scoreText.setText( "SCORE\n" + this.score );
        this.scoreSnd.play();

        if ( localStorage.getItem( "highscore" ) && parseInt( localStorage.getItem( "highscore" ), 10) < this.score  ) {
            localStorage.setItem( "highscore", this.score );
        } else {
            localStorage.setItem( "highscore", this.score );
        }
    }
};

var game = new Phaser.Game( 320, 568, Phaser.AUTO, "game", state );