JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/phaser/1.1.5/phaser.min.js"></script>
<p>Nhấn spacebar để nhảy</p>
<div id="game_div"> </div>
JavaScript
var load_state = {
preload: function() {
this.game.stage.backgroundColor = '#71c5cf';
this.game.load.image('bird', 'http://4.bp.blogspot.com/-ML1GnQDGOTw/UxGMQ5OAsgI/AAAAAAAAGXM/wFSO0MQv1hU/s1600/bird.png');
this.game.load.image('pipe', 'http://1.bp.blogspot.com/-A4kTPRPn1LU/UxGMQ6MHeMI/AAAAAAAAGXQ/gJOQ6TFo0Tw/s1600/pipe.png');
// Load jump sound
this.game.load.audio('jump', 'http://lessmilk.com/flappy_bird/02/assets/jump.wav');
},
create: function() {
// When all assets are loaded, go to the 'menu' state
this.game.state.start('menu');
}
};
// --------
var menu_state = {
create: function() {
// Call the 'play' function when pressing the spacebar
var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
space_key.onDown.add(this.start, this);
// Adding a label centered on the screen
var style = { font: "30px Arial", fill: "#ffffff" };
var x = game.world.width/2, y = game.world.height/2;
var text = this.game.add.text(x, y-50, "Press space to start", style);
text.anchor.setTo(0.5, 0.5);
// If the user already played, display its previous score
if (score > 0) {
var score_label = this.game.add.text(x, y+50, "score: " + score, style);
score_label.anchor.setTo(0.5, 0.5);
}
},
// Start the actual game
start: function() {
this.game.state.start('play');
}
};
// ------------------
var play_state = {
// No more preload, since it is already done in the 'load' state
create: function() {
var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
space_key.onDown.add(this.jump, this);
this.pipes = game.add.group();
this.pipes.createMultiple(20, 'pipe');
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);
this.bird =...