Learn JavaScript in Construct, part 4: control flow

24

Index

Attached Files

The following files have been attached to this tutorial:

.c3p

guess-the-number-js.c3p

Download now 49.84 KB
.c3p

Stats

6,820 visits, 17,438 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Guess the number game

To demonstrate how to use 'if' statements in practice, here's a simple 'Guess the number' game implemented in JavaScript. The computer generates a random number from 0-100, and when you make a guess, it will tell you if the number is higher, lower, or equal to your guess. This lets the player make a series of guesses and eventually identify the number. Open the project in Construct and make sure you're viewing the Event sheet 1 tab.

.C3P

guess-the-number-js.c3p

Download now 49.84 KB

You should see a GuessButton: On clicked trigger, with a script block to run as an action. This means the JavaScript code snippet will run every time the player clicks the 'Guess' button.

Try previewing the project and making a series of guesses until you can find the number. The code that runs when you click the 'Guess' button is the following:

// This is the number the player must guess.
let theNumber = getTheNumber();

// This is the number the player just guessed.
let guessedNumber = getEnteredNumber();
let message;

// Set the message to display.
if (guessedNumber < theNumber)
{
	message = "Higher!";
}
else if (guessedNumber > theNumber)
{
	message = "Lower!";
}
else
{
	message = "That's it!";
}

// Show the message.
showResultMessage(message);

This code block uses some functions that are declared elsewhere in the project: getTheNumber(), getEnteredNumber() and showResultMessage(). Don't worry about these for now (this guide will cover functions later on). For now all you need to know is there are three variables:

  1. theNumber, which is the random number the player must guess
  2. guessedNumber, which is the number the player entered when they clicked 'Guess'
  3. message, which is a string that will be displayed on-screen

The code block uses 'if' statements to compare the player's entered number with the number they need to guess. If the guessed number is lower, it sets the message to "Higher!", indicating they need to guess a higher number; if the guessed number is higher, it sets the message to "Lower!", indicating they need to guess a lower number; and if they got it right it sets the message to "That's it!".

This is a simple example but it demonstrates how you can use 'if' statements to display different results to the user depending on the inputs, and make a little game out of it!

Next Tutorial In Course

Learn JavaScript in Construct, part 5: Functions 17:50

Introduces functions, a core part of all computer programming.

  • 3 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Why do we need to use the tilde mark in the console.log (`Variable `i`is ${i}`); I was getting errors because i thought they were single quotations.

  • As aulas estão sendo maravilhosas. Muito obrigado pela disponibilidade e paciência!!

  • Thanks for the lessons!