Find Bigfoot

Simple game to find Bigfoot using HTML, CSS and JS

Created by @ad510

Hack Club logoComputer Science Tutorials

Find Bigfoot

Simple game to find Bigfoot using HTML, CSS and JS

Created by @ad510

You can find this tutorial online at https://hackclub.com/workshops/find_bigfoot

Table of Contents
  1. Set Up the Project
  2. Create a Blank HTML File
  3. Add Standard HTML Template
  4. Open the Live Preview
  5. Get Images for the Game
  6. Creating the Game
  7. Taking Bigfoot Out of His Natural Habitat
  8. Telling the Player When Bigfoot Has Been Found
  9. Hiding Bigfoot
  10. Putting Bigfoot Back in His Natural Habitat
  11. Setting Bigfoot’s Location
  12. Sample Solution
  13. Loading Bigfoot before the background
  14. Celebrate!
  15. Sharing with the Community
  16. Hacking

Hello friends! We need a community member to update this workshop to work without Cloud9. Interested? Message an admin in slack! Until then, this will live in the Retired section.

Find Bigfoot

In this workshop, you will make a game about finding Bigfoot. It will look like this:

Links to a live demo and the final code below. This workshop should take around 1 hour.

Live Demo

Final Code


On the way, you will:

  • Learn how to do event handling and how to create pop-up boxes in JavaScript.
  • Set a background image for a web page.
  • Directly set the coordinates of an element.
  • Most importantly, practice Googling so you can become an independent hacker.

Set Up the Project

If you’ve done other Hack Club workshops before, this should be pretty straightforward.

Create a Blank HTML File

  1. Go to https://c9.io/login
  2. Under the workspace called USERNAME.github.io where USERNAME is your GitHub username, click Open to open the workspace.
  3. Make a new folder called find_bigfoot.
  4. In the find_bigfoot folder, make a new file called index.html.
  5. Make another file in the find_bigfoot folder and call it style.css.
  6. Double-click index.html to open the file.

Add Standard HTML Template

Type the standard HTML template into index.html:

<!DOCTYPE html>
<html>
  <head> </head>
  <body></body>
</html>

Open the Live Preview

  1. Click File > Save or Ctrl+s to save the file.
  2. Click Preview > Live Preview File to open a live preview of the web page. Currently it is blank, but that will change soon!

Get Images for the Game

  1. Go to https://github.com/hackclub/hackclub/tree/master/workshops/find_bigfoot/assets
  2. Click on each image, then right click and Save Image As to save it to your computer.
  3. Make a new folder called assets in your workspace find_bigfoot folder.
  4. Drag all the images you saved into the assets folder.

If you’re having trouble, here’s a step by step tutorial:

Now you’re all set with the images you’ll need!

Creating the Game

What needs to be in a game about finding Bigfoot? Well, it needs Bigfoot, and it needs to tell the player when Bigfoot has been found.

Taking Bigfoot Out of His Natural Habitat

It is rumored that Bigfoot’s natural habitat is a forest in the Pacific Northwest. What happens if you take him out of his natural habitat and stick him on a computer screen? Would he scream? Would he rip up the computer?

Luckily for you, we’ve done the hard part of wrangling him out of the jungle and putting him in captivity on the Internet, and Bigfoot can be found in your assets folder:

assets/bigfoot.png

So now you have to put an image of him into your game, like you did in the Personal Website workshop.

To add an image we use <img src="[URL]">.

When you are done, you should see Bigfoot in the live preview, like this:

And the HTML looks like this:

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <img src="assets/bigfoot.png" />
  </body>
</html>

Telling the Player When Bigfoot Has Been Found

A game needs interaction in order to be a game, so let’s display a pop-up box whenever the player clicks on Bigfoot, like this:

How can you do that?

One of the most important skills towards becoming an independent hacker is knowing how to Google things when stuck. So let’s start by Googling ”HTML handle click“:

Clicking the first link takes you here:

Aha! It looks like whenever you put onclick="myFunction()" on a tag such as button or img, it executes the JavaScript code you put in the quotes whenever that tag is clicked on.

We want our JavaScript code to display a pop-up box saying you’ve won. So now let’s Google ”JavaScript pop-up box“:

The first link takes you here:

It looks like when you run alert("I am an alert box!"); it opens a pop-up box showing the text inside the quotes. So if we put 2 and 2 together, our img tag should look like this:

<img src="assets/bigfoot.png" onclick="alert("Woohoo, you win! You found
Bigfoot!");">

Change your img tag to look like that too, then click Bigfoot in the live preview.

Oops, it didn’t work! Why could that be?

Another important skill when hacking is knowing how to fix stuff when they go wrong. Cloud9 gives a couple hints:

  1. It displayed the message “Unable to update preview: unmatched tags detected”
  2. The quotation mark after alert( has a red underline.

Here’s what went wrong. We expected the quotation mark after alert( to indicate the beginning of the message, but what it actually did was indicate the end of the onclick attribute.

Here’s a little trick you can use to fix that. In JavaScript, you can use either " or ' around text (the technical term is a string). So change the inner quotes to single quotes, like this:

onclick="alert('Woohoo, you win! You found Bigfoot!');"

And now clicking Bigfoot should display the message.

At this point, index.html should look like this:

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <img
      src="assets/bigfoot.png"
      onclick="alert('Woohoo, you win! You found Bigfoot!');"
    />
  </body>
</html>

Congratulations, you have a working game now! You’re all done! Now you can go to FGL and sell your game to sponsors and make millions of dollars!

Hiding Bigfoot

I guess you spotted the problem already. This game is way too easy! I mean, Bigfoot is just sitting there out in the open, begging for you to click on him.

Putting Bigfoot Back in His Natural Habitat

That must be because we took him out of his natural habitat. You see, normally Bigfoot is hiding in a dense forest, making it hard to find him. Let’s fix that by adding a background image of a forest. We have one in assets:

assets/forest.jpg

When you are making your own projects, you won’t have workshops telling the solution to every step. So this time, let’s practice your Googling skills and see if you can figure out how to set that background image without being told the solution! After adding the background image, the live preview looks like this:

When you are done, or if you are simply really stuck, we’ve included a sample solution below. (But there are other ways to add the background image, so if your solution doesn’t match mine, that’s OK.)

Sample solution:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url('assets/forest.jpg');
      }
    </style>
  </head>
  <body>
    <img
      src="assets/bigfoot.png"
      onclick="alert('Woohoo, you win! You found Bigfoot!');"
    />
  </body>
</html>

There are several ways to add the background image. Here is one way:

  1. Google html background image.
  2. The first link brings you here: http://www.w3schools.com/cssref/pr_background-image.asp
  3. There is an example near the top. You can click “Try it yourself” to see the full HTML of the example.
  4. Add the