JavaScript Flappy Bird Game Lab

Are you a student in one of Susan’s courses? Your version with grading requirements is here: Lab 10: JavaScript Flappy Bird Game (College Version). This page is the open-access version for anyone who wants to build and customize their own Flappy Bird game.

In this lab you are going to create a custom Flappy Bird game. Even though your focus so far has been on HTML and CSS, you will find that you can modify JavaScript to make the game your own.

Before we start work, let’s play the game!

In the screenshots below, you can see the difference between the starting point (BEFORE) and what a designed game can look like (AFTER).

On the AFTER example, there are several visible changes to the game.

• Before the game there are some instructions on how to play.
• The game canvas has a background-image, border, and border-radius.
• The colors of the game piece and barriers have been changed.
• The Accelerate button text has been changed to Flap Wings, and Play Again button has been added. Moreover, the buttons now are designed with CSS.

There are four parts to this lab:

1. Review the Tutorial on W3Schools
2. Set Up and Test the Starter File
3. Make Five Design Modifications to the Game
4. Add Some Finishing Touches

A. Review the Tutorial on W3Schools

Read through the pieces of the game on W3Schools. Be sure to click the “Try It Now” buttons so you can see how each step adds to the game. Do not use this code for your game — just read through it to get a feel for how the game works.

The tutorial starts here: https://www.w3schools.com/graphics/game_intro.asp

Note: the game code you will download below is a slightly improved version of the W3Schools tutorial code. The game play is a bit better and it is easier to customize.

B. Set Up and Test the Starter File

Download the starter file below. It includes a minimal HTML page with the game already embedded — a simple header, the game canvas, and a footer. Open it in a browser and make sure the game works before you make any changes.

📎 Download the Starter File

The starter file is a single HTML file with the game canvas and all JavaScript already in place. Extract the zip, open game.html in your browser, and make sure the game runs before you make any changes.

Once the game is running, you are ready to start customizing.

C. Make Five Design Modifications

Make at least five of the following modifications to make the game your own.

Canvas Appearance

The canvas is the game area. You already know the CSS for most of these from earlier lessons — try any combination:

• background-image
• background-color
• border
• border-radius
• box-shadow

For the background image, find one on Pixabay.com, save it in your images folder, then add this to the canvas CSS in the game code:

background-image: url(images/my-background.jpg);
background-size: cover;

Game Piece and Obstacle Colors

The component() function creates every object in the game. Its parameters are: (width, height, color, x position, y position). So this line creates a 20×20 black square starting at position (10, 120) on the canvas:

myGamePiece = new component(20, 20, "black", 10, 120);

To change the game piece color, replace "black" with any color name or hex value. To change the obstacle color, find both obstacle lines and replace "#333333":

myObstacles.push(new component(20, height, "#333333", x, 0));
myObstacles.push(new component(20, x - height - gap, "#333333", x, height + gap));

Button Text and Style

Rename the button to fit your game theme — FLAP WINGS could become JUMP or FLY. Style it with CSS using the .myButton class. You can also add a Play Again button that reloads the page:

<a href=""><button class="myButton">PLAY AGAIN</button></a>

Game Piece Size

The first two numbers in the game piece component are its width and height in pixels. Making it smaller makes the game easier to play — the piece is easier to steer through the gaps. Making it larger makes the game harder:

myGamePiece = new component(20, 20, "black", 10, 120);

D. Add Some Finishing Touches

If you would like to share the game with your friends, some finishing touches will make the game more polished.

• Add a page title in an <h1> heading above the game
• Add a short paragraph explaining the game and giving credit to W3Schools. See the screenshot below for ideas.
• Add game instructions so visitors know how to play.
• Check that the game is still playable after all your changes — if it is too difficult, adjust the game piece size

E. Make the Game Responsive for Smart Phones

The game only works on desktop by default. If you include it in your final project, you must complete these steps. First, check your game at a mobile size in your browser — there are two problems to fix:

• Problem 1: The game canvas has a fixed size of 640 × 360 pixels. That is too wide for mobile and breaks your overall page layout.
• Problem 2: The Flap Wings button uses onmousedown and onmouseup, which do not respond to touch. Mobile devices need ontouchstart and ontouchend.

Step 1: Add Canvas Size Variables

Near the variables at the top of the <script> tag, insert this code:

/* Add variables for the height and width */
var canvasWidth = 640;
var canvasHeight = 360;
/* If the screen is less than 768px wide, use a smaller canvas */
if (window.innerWidth < 768) {
    canvasWidth = 300;
    canvasHeight = 300;
}

Step 2: Use the Variables for Canvas Size

Find these two lines in your code and replace the fixed numbers with the variables you just created:

this.canvas.width = canvasWidth;   /* Changed to variable */
this.canvas.height = canvasHeight; /* Changed to variable */

Step 3: Create Two Versions of the Buttons

Replace your existing button HTML with two versions — one for desktop (mouse) and one for mobile (touch):

<!-- Desktop controls: uses mouse events -->
<div class="game-controls desktop">
    <button class="myButton" onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">FLAP WINGS</button>
    <a href=""><button class="myButton">PLAY AGAIN</button></a>
</div>

<!-- Mobile controls: uses touch events -->
<div class="game-controls mobile">
    <button class="myButton" ontouchstart="accelerate(-0.2)" ontouchend="accelerate(0.05)">FLAP WINGS</button>
    <a href=""><button class="myButton">PLAY AGAIN</button></a>
</div>

Step 4: Add CSS to Switch Between Button Versions

Add this CSS to hide the mobile buttons on desktop and the desktop buttons on mobile:

/* Game button switching for mobile */
.mobile {
    display: none;
}
@media only screen and (max-width: 768px) {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
        touch-action: manipulation;
    }
}

Step 5: Optional Game Play Tweaks

You may also want to make the game easier to play on the smaller canvas:

• Make the game piece smaller so it is easier to steer through the gaps on a small screen
• Adjust the score display position so it appears within the smaller canvas area

Important: Test the mobile version on an actual phone after publishing to GitHub Pages. The touch controls will not activate in Chrome’s mobile inspector — you need a real device to test them properly.

F. Optional: Add a Custom Game Piece Image

A cool change you can make is to replace the square game piece with an image of your own. If you want a really polished game, combine a custom background with a matching custom game piece. See an example at: https://webdevstudents.com/final-project/javascript-mod.html. If you need inspiration, jump to the gallery at the end of this page.

Step 1. Make an Image

You need a small image. The code will auto-resize it, but smaller is better. You may want to make an animated GIF at https://www.piskelapp.com/. You definitely want an image with a transparent background — make it squarish in shape. You can use the sample bird image below if you prefer:

Step 2. Study at W3 Schools

Take a look at how it works at W3 Schools: https://www.w3schools.com/graphics/game_images.asp

Step 3. Insert the Code

Find this line of code:

myGamePiece = new component(20, 20, "black", 10, 120);

This is the code for the game piece. 20, 20 is the width and height, black is the color, and 10 and 120 are the x and y coordinates.

Change this line to put the image path where the color used to be, and add a new parameter at the end to specify that it is an image:

myGamePiece = new component(30, 30, "images/birdie.png", 10, 120, "image");

Next, make some changes to the component function. You only need to insert the highlighted sections — everything else is already there. The first addition checks if the last parameter is an image and loads it. The second addition draws the image, turning the old if statement into an else if.

For a good explanation of IF / ELSE IF / ELSE, see: https://www.w3schools.com/js/js_if_else.asp

Gallery of Student Projects

Here are some examples of how other students have customized the Flappy Bird game — with background images, custom game pieces, and game text that fits their own story.