Flappy Bird with JavaScript

<

>

<JavaScript>

Flappy Bird

<index.html

Now let's open our index.html file, You first go and create the canvas element, inside your HTML file :

then before the closing body tag "</body>", you add your JavaScript code.

<flappyBird.js

Now we need to write our code, inside flappyBird.js file, the first thing we will do, is select our canvas, and getContext('2d') of our canvas :

Now let's create our game images. To create an image, we create an instance of the Image() object, using the new keyword. And then we have to set our images source (path), using the src property.

<flappyBird.js

We will do the same thing, when we create an audio file in JavaScript. We create an instance of the Audio() object, using the new keyword. Then we have to set our audio source (path), using the src property.

<flappyBird.js

Now let's create some variables we will need during the game. The player can control the bird using any key on the keyboard. We need to add an eventlistener to our document. and when the player presses a key, we run a function moveUp(); that will move the bird up by 25px to the top, and also play a sound. We will need to store our pipe (North and South) coordinates. We will use an array. When the game starts, the first pipe X position is at 288px (= cvs.width).

<flappyBird.js

Now let's create some functions. We will use the function draw() to draw the pipes on the canvas, specifying x and y coordinates.

<flappyBird.js

Now let's create some functions. We will write a conditional statement to detect collisions. If the bird touches a pipe, a collision is triggered. The pipe is moved, score updated.

<flappyBird.js

Now let's create the actual appearances on the canvas by expanding our ctx.drawImage functions. .

Congratulations!

Dr. Vicki Bealman

<

>