Flappy Bird --> Phaser Game Engine

Using Html5 to create games...

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.2.1/phaser.js"></script>
<script src="https://rawgit.com/blueimp/JavaScript-Canvas-to-Blob/master/js/canvas-to-blob.min.js"></script>
   <!--<div style="font-size:xx-small;float:left;width:150px">
    <h2> Press the spacebar tap or click to flap </h2>
       <h2>Click add icon to add custom images</h2>
       <p>Bird: <img width=20 height=20 class="add" style="cursor:pointer;" src="https://cdn4.iconfinder.com/data/icons/simplicio/128x128/file_add.png" /> <input style="display:none;" type="file" id="bird" /></p>
    <p>Pipe Body: <img width=20 height=20 class="add" src="https://cdn4.iconfinder.com/data/icons/simplicio/128x128/file_add.png" /><input style="display:none;" type="file" id="body" /></p>
    <p>Pipe Top: <img width=20 height=20 class="add" src="https://cdn4.iconfinder.com/data/icons/simplicio/128x128/file_add.png" /> <input style="display:none;" type="file" id="top" /></p>
    <p>Pipe Bottom:<img width=20 height=20 class="add" src="https://cdn4.iconfinder.com/data/icons/simplicio/128x128/file_add.png" /> <input style="display:none;" type="file" id="bottom" /></p>
    
</div>-->
<div id="gameDiv"> </div>

CSS

#gameDiv{
    float:right;
    
}

JavaScript

// Initialize Phaser, and create a 400x490px game
var game = new Phaser.Game(490, 490, Phaser.AUTO, 'gameDiv');



// Create our 'main' state that will contain the game
var mainState = {
    

    preload: function () {
        // This function will be executed at the beginning     
        // That's where we load the game's assets 

        // Change the background color of the game
        game.stage.backgroundColor = '#71c5cf';

        // Load the bird sprite
        if (birdFile) {
            game.load.image('bird', birdreader.result);
        }
        else {
            game.load.image('bird', birdimage.src);

        }
        
        if (topFile) {
            game.load.image('pipeHeadTop', topreader.result);
        }
        else {
            game.load.image('pipeHeadTop', topimage.src );
        }
        
        if (bottomFile) {
            game.load.image('pipeHeadBottom', bottomreader.result);
        }
        else {
            game.load.image('pipeHeadBottom', bottomimage.src);
        }

                if (bodyFile) {
            game.load.image('pipeBody', bodyreader.result);
        }
        else {
            game.load.image('pipeBody', bodyimage.src);
        }

       
        
        
        

    },

    create: function () {
        // This function is called after the preload function     
        // Here we set up the game, display sprites, etc.

        this.labelStart = this.game.add.text(35, 180, "Click to start the game", { font: "30px Arial", fill: "#ffffff" });
        
        this.labelStart.exists = false;
        // Set the physics system
        game.physics.startSystem(Phaser.Physics.ARCADE);

        // Display the bird on the screen
        this.bird = this.game.add.sprite(100, 245, 'bird');

        // Add gravity to the bird to make it fall
        game.physics.arcade.enable(this.bird);
        this.bird.body.gravity.y = 1000;

        // Call the 'jump' function when the spacekey is hit
        var spaceKey =...