Learn to code for kids and teens. Build a guessing game in Javascript

7 min readMay 31, 2021

Authors note:
This learning material is intended for youth new to programming to go through with the help of a teacher, however, it is suitable for beginners of all ages looking for a project based method to learn how to code in Javascript by building a game.

What is Code?

Simply put, code is something that you write to tell computers what to do. If you want to send a rocket to mars, you write code to tell computers how to do that. If you want to make a place for all of your friends to hang out online like Discord or Instagram, you write code. Maybe you want to build a game like Call of Duty, Apex Legends, or Stardew Valley? Then you write code.

The people who write code go by many names depending on what exactly it is they build. If you build games, then you’re often called a game developer. If you create mobile apps for phones, then you’re often called a mobile developer. If you write websites, then you are often called a web developer.

However, if you want a single term to describe all people who write code, then software engineer is a reasonably good one.

How do you write code?

Code is written in different languages (you can think of it a bit like learning French vs. learning English). There are many popular languages out there, and each one is more suitable for different purposes. For this game, you’re going to use Javascript. Javascript is a programming language that is used by almost all websites (about 97.2%)

When writing code, you’ll often use a code editor. A code editor is a tool that makes it easier to write code. We’re going to use the online code editor called Repl.

Let’s build a game together.

Follow the numbered instructions to start building a game!

Start by going to https://replit.com/languages/javascript
You should see a website that looks like this

2. Click the green play button in the center of the screen.
You should see some “Hello World” text on the right. If anything goes wrong, refresh the page and try again.

Notice how it says Hello, world on the right? You can make the computer say anything you want. Just make sure to wrap what you write in quotes ‘’.

3. Tell the computer to say hello to you.
Write console.log('Hello, Brooklin') but replace Brooklin with your name.

Nice! Now, let’s start building a guessing game. I’ll try to have the player guess my favorite animal, but you can have them guess anything you want! Maybe your favorite color? A number between 1 and 10? it can be anything.

4. Write down your answer to the guess.

Start by typing let in your code on a new line.
This defines a variable. A variable is a way to store information in code.
This variable is going to store the correct answer to your guessing game.

let

After the let enter a space and write a name for the variable.
The name can be anything you want! I’ll make it myFavoriteAnimal. We commonly capitalize every word for multi-word names after the first to make the code easier to read.

let myFavoriteAnimal

Set the variable to your answer using =.
Since my favorite animals are dogs, I will write = “dog”.

let myFavoriteAnimal = "dog"

You can keep or remove the console.log from before.

Your code should look something like this now:

5. Take in a guess from the player.

Start by typing function on the next line.

function

After the function enter a space and write a name for the function.
This will be the name of your game, so you can name it anything you want, just like let from before. I’ll name my function guessMyFavoriteAnimal since that’s what my game does.

function guessMyFavoriteAnimal

Immediately after the name of your function, add some round brackets. ()

function guessMyFavoriteAnimal()

Inside of the round brackets, () write a name for a parameter.
A parameter is a value that your player will choose. Just like when you wrote the variable earlier, you can name this anything. I’m going to keep it simple and call my parameter playerGuess.

function guessMyFavoriteAnimal(playerGuess)

Add a space and add some curly brackets. {}
You can write curly brackets by holding shift and pressing the [ and ] keys.

function guessMyFavoriteAnimal(playerGuess) {}

Move your variable from before into this function.

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
}

6. Tell the player if their guess is correct or not.

Start by typing ifon the next line in between the curly brackets.
if is used to control when certain parts of the code will run or not. In this case, we’re going to let the player know if they got the answer correct.

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if
}

Add some round brackets. ()

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if ()
}

Write the name of your answer variable inside these brackets.

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal)
}

Add a space and write === (equals) after your answer.

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal ===)
}

Add another space and write the name of your player’s guess inside the brackets

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess)
}

Add some curly brackets {}like function from before

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess) {
      
   }
}

Inside the curly brackets {}, tell the player that they won using console.log.
You can write any message you want for when they win! I’ll write, “Congrats! You got it right!”.

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess) {
      console.log("Congrats! You got it right!")
   }
}

After the end curly bracket of the if , write else .

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess) {
      console.log("Congrats! You got it right!")
   }
}

Add curly brackets like with the previous if and function .

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess) {
      console.log("Congrats! You got it right!")
   } else {
      
   }
}

Tell the player that they got the answer wrong using. console.log .
You can write whatever message you like! I’ll write “You got it wrong, try again!”.

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess) {
      console.log("Congrats! You got it right!")
   } else {
      console.log("You got it wrong, try again!") 
   }
}

7. Have your player start the game and enter a guess.

On a new line, write the name of your game below.
It should be the same as the word after function from before.

guessMyFavoriteAnimal

Add round brackets () immediately after.

guessMyFavouriteAnimal()

Test your game with an incorrect guess.
Inside of the round brackets, your player is going to enter a guess. This is going to be the value of the parameterplayerGuess from before. Let’s make sure it’s working before we have anyone play it.

guessMyFavoriteAnimal("cat")

Hit the green play button to run your game.
You should see your player losing message on the right side of the page. e.g., “You got it wrong, try again!”

You might also see an error message. You can comment on this article with your code and your error, and I will try to help! Or, if you’re doing this tutorial with the help of a teacher, you can ask them to help.

Test your game with the correct guess.

guessMyFavoriteAnimal("cats")

Hit the green play button to run your game.
You should see your success message this time. For me, I see “Congrats! you got it right!”

8. Set up your game for a player and play!

Delete the text inside of the quotes to get the game ready for the player.

guessMyFavoriteAnimal("")

Hide everything in the curly brackets inside the functionby pressing the button to the left of the function .
This is so the player cannot see your answer.

Your game should look like this but with all of your custom changes.

Make sure you tell your player to enter their guess inside of the quotation marks “”.

I hope you have fun and happy coding!

Further Learning

Well done! You finished this lesson, and you’ve also made your own game in Javascript!

Learning how to code is all about building cool things that make you excited! You’ll find lots of great tutorials out on the internet, but one of the best ways to get better is to try and build your own project.

Here are some ideas to get you started!

Can you alter the guess a number function to try to guess your favorite animal instead?
Can you make the correct answer random?
Can you write code that would guess every number between 1 and 10? what about 100? (hint: this probably uses for loops)
Can you alter the guess a number function to have to player answer math questions instead?

Other Resources

Khan Academy intro to programming https://www.khanacademy.org/computing/computer-programming/programming#intro-to-programming