Flappy Bird Part 1
In the index.html file we add this simple code:
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title> Flappy Bird Clone </title> <script type="text/javascript" src="phaser.min.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <p> Press the spacebar to jump </p> <div id="gameDiv"> </div> </body> </html> |
It will load all the necessary Javascript files, and add a "gameDiv" element where our game will be displayed.
In the main.js file we should add this, which will create an empty Phaser project:
// Initialize Phaser, and create a 400x490px game
var game = new Phaser.Game(400, 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 }, create: function() { // This function is called after the preload function // Here we set up the game, display sprites, etc. }, update: function() { // This function is called 60 times per second // It contains the game's logic }, }; // Add and start the 'main' state to start the game game.state.add('main', mainState); game.state.start('main'); |
We are going to fill in the preload(), create() and update() functions, and add some new functions to make the game work.
The Bird
Let's first focus on adding a bird to the game that can be controlled with the spacebar key.
Everything is quite simple and well commented, so you should be able to understand easily the code below. For better readability, I removed the Phaser initialization and states management code that you can see above.
Everything is quite simple and well commented, so you should be able to understand easily the code below. For better readability, I removed the Phaser initialization and states management code that you can see above.
First we update the preload(), create() and update() functions.
preload: function() {
// Change the background color of the game game.stage.backgroundColor = '#71c5cf'; // Load the bird sprite game.load.image('bird', 'assets/bird.png'); }, create: function() { // 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 = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.add(this.jump, this); }, update: function() { // If the bird is out of the world (too high or too low), call the 'restartGame' function if (this.bird.inWorld == false) this.restartGame(); }, |
And just below this, we add these two new functions:
// Make the bird jump
jump: function() { // Add a vertical velocity to the bird this.bird.body.velocity.y = -350; }, // Restart the game restartGame: function() { // Start the 'main' state, which restarts the game game.state.start('main'); }, |