Flappy Bird

by Erik Wiessmann

Set up

Set up a website, javascript, and css file.

Plan

We will make our own javascript version of flappy bird in this tutorial.

Flappy Bird consists of a player falling down the screen due to gravity

A player may flap to make the bird fly upward and in time the bird will start to fall again.

Pipes come at the bird in the direction the bird is flying.

Each pipe the bird passes, the player is awarded a point.

If the bird makes contact with a pipe the game is over.

We will need graphics for this game

I will use google search to find great graphics that google flags as non-commercial re-use.

Graphics needed:

bird
repeating background for scrolling
pipes

You need to set up our objects. First the bird, which should have a position, size, and velocity.

Next we need to make the canvas full screen

And call the function from our main

We should add a update function so that our game can run continuously.

Draw the bird in the update function

Move the bird in the update function

Clear the screen in the update function so the bird moves.

Cache the bird image to eliminate flicker

Draw the background image in the update function. Remember to add a global backgroundImage variable.

Have gravity pull down on the bird. Gravity will be a global constant.

If the user presses a key give the bird upward lift.

We need to look out for a key press as an event handler.

Instead of the bird moving right, we want to make the world move behind the bird. We can create a scrollX variable. This will be set equal to the birds x position and we can draw everything with this offset

Draw the background on repeat mode. Instead of drawing the background many times, we only need to draw it twice. The screen we are on and the one after us. There are some calculations for this.