JSFiddle - React, Tailwind, and code Playground

by Duyệt Lê Văn

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/phaser/1.1.5/phaser.min.js"></script>
  <div id="game_div"> </div>

JavaScript

// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');
var game_state = {};

// Creates a new 'main' state that will contain the game
game_state.main = function() { };  
game_state.main.prototype = {

    // Function called first to load all the assets
    preload: function() { 
        // Change the background color of the game
        this.game.stage.backgroundColor = '#71c5cf';

        // Load the bird sprite
        this.game.load.image('bird', 'http://4.bp.blogspot.com/-ML1GnQDGOTw/UxGMQ5OAsgI/AAAAAAAAGXM/wFSO0MQv1hU/s1600/bird.png');  

        // Load the pipe sprite
        this.game.load.image('pipe', 'http://1.bp.blogspot.com/-A4kTPRPn1LU/UxGMQ6MHeMI/AAAAAAAAGXQ/gJOQ6TFo0Tw/s1600/pipe.png');      
    },

    // Fuction called after 'preload' to setup the game 
    create: function() { 
        // Display the bird on the screen
        this.bird = this.game.add.sprite(100, 245, 'bird');
        
        // Add gravity to the bird to make it fall
        this.bird.body.gravity.y = 1000; 

        // Call the 'jump' function when the spacekey is hit
        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        space_key.onDown.add(this.jump, this); 

        // Create a group of 20 pipes
        this.pipes = game.add.group();
        this.pipes.createMultiple(20, 'pipe');  

        // Timer that calls 'add_row_of_pipes' ever 1.5 seconds
        this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);           

        // Add a score label on the top left of the screen
        this.score = 0;
        var style = { font: "30px Arial", fill: "#ffffff" };
        this.label_score = this.game.add.text(20, 20, "0", style);  
    },

    // This function is called 60 times per second
    update: function() {
        // If the bird is out of the world (too high or too low), call the 'restart_game' function
        if (this.bird.inWorld == false)
        ...