Flappy Birds
Kudos Thomas Palef: http://www.lessmilk.com/
http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.0/phaser.min.js"></script>
<div id="game_div"></div>
CSS
#game_div {
width: 400px;
margin: auto;
margin-top: 50px;
}
JavaScript
// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');
var game_state = {};
var gameStarted = false;
// Creates a new 'main' state that wil contain the game
game_state.main = function () {};
game_state.main.prototype = {
game_start: function(){
if (!gameStarted){
this.bird.body.gravity.y = 1000;
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);
this.label_start.content = "";
}
gameStarted = true;
},
preload: function () {
// Change the background color of the game
this.game.stage.backgroundColor = '#71c5cf';
// Load the bird sprite
this.game.load.image('bird', 'https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwiqx7SJ3ZvfAhXNzmEKHUX7AQYQjRx6BAgBEAU&url=https%3A%2F%2Fwww.freepik.com%2Ffree-icon%2Fsocial-twitter-bird-symbol_703015.htm&psig=AOvVaw14EaLxjdFoVsM_kMi4Q14E&ust=1544753422023861');
this.game.load.image('pipe', 'https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwj9r92f3ZvfAhVV7mEKHcPsBn4QjRx6BAgBEAU&url=https%3A%2F%2Fwww.onlinewebfonts.com%2Ficon%2F539257&psig=AOvVaw3ahagNJW9avVCCrfEPMjKr&ust=1544753454726409');
},
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
// Call the 'jump' function when the spacekey is hit
this.game.input.onDown.add(this.game_start, this);
this.pipes = game.add.group();
this.pipes.createMultiple(20, 'pipe');
this.score = 0;
var style = {
font: "30px Arial",
fill: "#ffffff"
};
this.label_score = this.game.add.text(20, 20, "0", style);
this.label_start = this.game.add.text(35, 180, "Click to start the show", style);
...