JavaScript exercise: a number guessing game with ES6 classes

This exercise is designed to help you put into practice the basic JavaScript concepts you learned in the tutorial. You will build a number-guessing game that uses variables, conditions, functions, objects and classes (ES6), manipulation of the HTML page, events and event handlers, as well as modules and imports/exports (ES6).

This exercise is ideal for JavaScript beginners who want to practise and improve their understanding of the basic building blocks of the language. Feel free to go back to the tutorial if you get stuck: the answers are there, except for classes, which are presented in the article on classes in JavaScript.

Files to create

• game.js (the imported module holding the game class)
• script.js (the main file, which imports the game.js module)
• index.html (containing the code below)

<!DOCTYPE html>
<html>
<head>
    <title>Jeu de devinette de nombres</title>
    <style>
        body {
            background-color: #e0e0e0;
        }

h1 {
            font-size: 24px;
            text-align: center;
            color: #333;
        }

#form {
            display: flex;
            justify-content: center;
        }

#number {
            width: 50px;
            margin-right: 10px;
            font-size: 16px;
            text-align: center;
        }

button {
            font-size: 16px;
            padding: 10px;
            border: none;
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1>Jeu de devinette de nombres</h1>
<p id="message"></p>
<form id="form">
    <input type="number" id="number">
    <button type="submit">Deviner</button>
</form>
</body>
</html>

Instructions

1. In the game.js file, declare a Game class with the following properties and methods:

   • A randomNumber property holding a random number between 1 and 100 (use Math.random() and Math.floor())
   • An attempts property holding the number of attempts made by the user
   • A found property saying whether the number has been found or not (a boolean)
   • A checkNumber method that takes a number as its argument and checks whether that number is correct, by comparing the value entered by the user with the random number. If the number is correct, set the found property to true. If the number is wrong, display a message saying whether the number is higher or lower.
   • A resetGame method that resets the attempts and found properties to their initial values and picks a new random number.

2. In the script.js file, import the game.js module with the import statement. Create an instance of the Game class and store it in a variable.

3. In the script.js file, write a function to handle the form submission event. That function has to:

   • Increment the attempt counter on the instance of the Game class
   • Read the value of the number entered by the user
   • Use the checkNumber method of the Game instance to check whether the number is correct
   • If the answer is correct, return a congratulations message, otherwise send the message from checkNumber.

4. Wire the form submission event up to the function you have just written.

5. Add an event handler for the click on the “Play again” button that sits inside the congratulations message. That function has to use the resetGame method of the Game instance to reset the game and clear both the congratulations message and the number input form.

6. Link the right JavaScript file to your index.html page

7. Test your game by opening the index.html file in a browser. Make sure it works properly and follows the instructions.

Solution

Here is one possible solution, tested in a browser. The class lives in game.js:

export default class Game {
  constructor() {
    this.resetGame();
  }

  resetGame() {
    this.randomNumber = Math.floor(Math.random() * 100) + 1;
    this.attempts = 0;
    this.found = false;
  }

  checkNumber(number) {
    if (number === this.randomNumber) {
      this.found = true;
      return 'Bravo, vous avez trouvé !';
    }
    return number < this.randomNumber ? 'Le nombre est plus grand.' : 'Le nombre est plus petit.';
  }
}

script.js imports the class, listens to the form and displays the message:

import Game from './game.js';

const game = new Game();
const form = document.getElementById('form');
const input = document.getElementById('number');
const message = document.getElementById('message');

function replay() {
  game.resetGame();
  message.textContent = '';
  form.hidden = false;
  input.focus();
}

function handleSubmit(event) {
  event.preventDefault();
  game.attempts += 1;
  const result = game.checkNumber(Number(input.value));
  input.value = '';

  if (game.found) {
    message.innerHTML = `Bravo, trouvé en ${game.attempts} tentative(s) ! <button type="button" id="replay">Jouer à nouveau</button>`;
    form.hidden = true;
    document.getElementById('replay').addEventListener('click', replay);
  } else {
    message.textContent = result;
  }
}

form.addEventListener('submit', handleSubmit);

All that is left is to link the script to the page, just before </body>. The type="module" attribute is required for the import statement to work, and modules do not load from a file opened directly (file://): serve the folder with a small local server, for example npx serve or the Live Server extension of VS Code.

<script type="module" src="script.js"></script>

The same language runs far richer games. Clairbois, a small RPG written in JavaScript by the Codex AI, can be played right inside our article on how to make a game with ChatGPT.

I hope this JavaScript tutorial for beginners has been of use. You should now have the basics of JavaScript in hand, have a look around the site, where you will find plenty of tutorials and articles on JavaScript to help you sharpen your skills.