Lab 10: JavaScript Flappy Bird Game

For this lab we are going to create a custom Flappy Bird game. Even though our focus has been on HTML and CSS, you will find that you are able to modify JavaScript!

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

The game you played above is the starting point of the game. You will decorate the game with CSS and images. See below for the before and after screenshots.

Before and after screenshots of the Flappy Bird video game showing the plain starting version and a decorated version with a background image, custom colors, and styled buttons. — The Flappy Bird game before and after adding a background image and making design modifications.

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.

In Lab 10, start by reviewing the tutorial at W3 schools (A). After that, integrate the JavaScript game into a new page in your portfolio website (B). Then you will make at least 5 changes to the game (C). The last work required for Lab 10 is to add text that gives the game context within your portfolio (D).

If you decide to include this in your final project, you need to make the game responsive (E). Most students do decide to include it, so you may want to do it as part of Lab 10. These instructions also include an option to change the game piece to an image as well as how to make the game work on smartphones (F).

A. Review the Tutorial on W3 Schools

Read through the pieces of the game. Be sure to click on the “Try It Now” buttons so you can see how each step adds to the game. Don’t use this code for the game — just read through it to see how the game works. The code in the instructions below is an older version of the W3 tutorial and is a better game.

The tutorial starts at this link: https://www.w3schools.com/graphics/game_intro.asp

Note that the game tutorial is a bit different from the game we will use. The game code we will use is easier to integrate into your Portfolio website and the game play is a bit better.

B. Integrate the Code into Your Website

This is the most difficult part of the lab. Once you have the code integrated into your portfolio, the rest will be easier.

Step 1. Download and Test the Starting Point

Download the starting point zip file, extract it, and move the game.html file into your portfolio folder.

📎 Download Game Code

Open game.html in a browser to make sure the game works.

Step 2. Integrate the Code

Integrate the code from index.html with the game.html file. This is the hardest part of the lab assignment, because you need to understand the code in order to integrate the header, nav and footer from index.html into the existing game code.

See the code comments in the game.html file. The code comments help to direct you in where the code should go. Here are some additional hints:

Most of the code from game.html will go into the <main> section.
The <body onload="startGame()"> needs to replace the <body> tag. That line of code runs the startGame function when the browser loads the website. Without that code, the game will not work.
The embedded CSS from game.html will go into the <head> section inside of <style> tags. This is called “embedded” CSS, and we learned about it in the CSS module. As an alternative, you could move this code to your style.css file.
Remove duplicate code from the HTML file. (For example, you don’t need <!DOCTYPE html> twice.)
Make sure the HTML is in the right order.

At this stage, your web page should look like this, but with your header, nav and footer:

Before you move on to Step 3, check the following:

Make sure your header, navigation and footer are in place
Make sure the game is working

If your game isn’t working and you can’t find your error, your best strategy may be to delete the game.html file completely and start over.

C. Make Five Design Modifications

After confirming that your game still works, make at least five design modifications. Choose any five of the following modifications to make the game your own. (Many students make a lot more than 5 changes.) You may want to think of a theme so your choices feel cohesive. If you need inspiration, jump to the gallery at the end of this page.

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, like the game piece and the barriers. 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, FLY, or anything that fits. 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. Keep in mind that a hiring manager may play your game, so making it easier rather than harder is a good idea. A smaller game piece is easier to steer through the gaps:

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

Check that your game is still playable after making changes.

D. Add Some Finishing Touches

Complete all of the following:

Add a page title in an <h1> heading
Add a comment recognizing W3 Schools for the game and explaining how you modified it. See the screenshot below for ideas.
Add some game instructions so the website visitor knows how to play the game.

Game Alignment

Center the canvas on the page by adding this to your CSS:

canvas {
    display: block;
    margin: 0 auto;
}

Check Your Work

When you have completed Section D, your game page should include a title, game instructions, recognition for W3 Schools, and a centered canvas. Compare your work against the example below before moving on:

Example of a completed Flappy Bird game page showing a title, game instructions, W3 Schools credit, and a centered game canvas inside a student portfolio website.

E. Make the Game Responsive (Required for Final Project)

This screenshot shows one of the problems on mobile devices. The set size of the game canvas does not fit on a narrow screen.

Making the game responsive is optional for Lab 10, but required if you include it in your final project. Since most students do include the game, you may as well complete this section now. Check your game at a mobile size in your browser — you will notice two problems.

Problem 1: The canvas is too wide for mobile. The game canvas has a fixed size of 640 × 360 pixels. On a narrow phone screen, that is too wide and breaks your overall page layout.

Problem 2: The button does not respond to touch. The Flap Wings button uses onmousedown and onmouseup — events that fire when a mouse button is pressed and released. Touchscreens don’t have a mouse, so these events do nothing on a phone. The fix is to add touch equivalents: ontouchstart fires when a finger touches the screen, and ontouchend fires when the finger lifts off.

Step 1: Add Canvas Size Variables

Near the other variables (var) 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>

This is how the game looks on a mobile device once the responsive changes are made. The CSS media queries recognize the smaller screen width and serve the smaller size game.

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. You can either add this code to the end of style.css or the end of the <style> code in the the game.html <head>:

/* 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

F. Optional Extra Credit: Add a Custom Game Piece Image (5 Bonus Points)

A cool change you can make is to change the square game piece into an image. If you are a design student, you could make a really cool game with your own background and your own game piece image. 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:

Download birdie.png

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

One of the students in CSCI1450 (James Finnemann) figured out how to integrate the W3 Schools code into our projects.

Find this line of code:

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

This is the code for the game piece. 30, 30 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 location where the color used to be, and add a new parameter at the end to specify that we have 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 inserts 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 Other Student Websites

Here are some examples of how you can change the flappy bird game with background images, custom game pieces, and game text that fits your game story. Note that in the third example a student added images to the bars drawn by the game.