Flappy Bird Clone Coding

Flappy Bird is a game that is very addicting, and is a good idea to try to code, so I started to make it off a tutorial.

Game from tutorial

It is made with the phaser HTML5 game framework, which is very useful, it has things like velocity and handles sprites.


var mainState = { preload: function () { // This function will be executed at the beginning // Change the background color of the game game.state.backgroundColor = ‘#71c5cf’; // Load the bird sprite game.load.image(‘bird’, ‘assets/bird.png’); // That’s where we load the game’s assets }, create: function(){ // This function is called after the preload 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’ fnction when the space key is hit var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.add(this.jump, this); // Here we set up the game, display sprites, etc. }, update: function() { // This function is called 60 times per second // If the bird is out of the world (too high or too low), call the ‘restartGame’ function if (this.bird.inWorld == false) this.restartGame(); // It contains the game’s logic }, jump: function() { // Add a vertical velocity to the bird this.bird.body.velocity.y = -350; },

It doesn’t have the traditional bird or pipe they use in the real game like so:

Instead it uses colored squares, orange for the player, and green for the pipes.

Sprites in the game asset files.

It is a good tutorial to learn for those who want to develop games, and it helps us understand how the games are built.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.