Hoofdstuk 12 van 12

JavaScript-oefening: een getallenraadspel met ES6-klassen

geverifieerd op 7 september 2026 · 4 min

Deze oefening helpt je de basisconcepten van JavaScript uit de tutorial in de praktijk te brengen. Je maakt een getallen-raadspel dat variabelen, voorwaarden, functies, objecten en klassen (ES6), manipulatie van de HTML-pagina, gebeurtenissen en event handlers, en modules met import/export (ES6) inzet.

Deze oefening is ideaal voor JavaScript-beginners die hun kennis willen oefenen en de basisbouwstenen van de taal beter willen begrijpen. Kijk gerust terug in de tutorial als je vastloopt: de antwoorden staan erin, behalve de klassen, die worden voorgesteld in het artikel over klassen in JavaScript.

Aan te maken bestanden

game.js (importeerbare module met de spelklasse)
script.js (hoofdbestand dat de module game.js importeert)
index.html (met de volgende code)

html

<!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>

Opdracht

Declareer in het bestand game.js een klasse Game met de volgende eigenschappen en methodes:
- Een eigenschap randomNumber met een willekeurig getal tussen 1 en 100 (gebruik Math.random() en Math.floor())
- Een eigenschap attempts met het aantal pogingen van de gebruiker
- Een eigenschap found die aangeeft of het getal gevonden is (booleaanse waarde)
- Een methode checkNumber die een getal als argument krijgt en controleert of dat getal juist is door de ingevoerde waarde met het willekeurige getal te vergelijken. Is het getal juist, zet dan de eigenschap found op waar. Is het onjuist, toon dan een bericht dat zegt of het getal groter of kleiner is.
- Een methode resetGame die de eigenschappen attempts en found op hun beginwaarde terugzet en een nieuw willekeurig getal kiest.
Importeer in het bestand script.js de module game.js met de instructie import. Maak een instantie van de klasse Game en bewaar die in een variabele.
Schrijf in het bestand script.js een functie die het versturen van het formulier afhandelt. Die functie moet:
- De pogingenteller van de instantie van de klasse Game ophogen
- De waarde ophalen die de gebruiker heeft ingevoerd
- De methode checkNumber van de instantie van de klasse Game gebruiken om te controleren of het getal juist is
- Bij een juist antwoord een felicitatiebericht teruggeven, en anders het bericht van checkNumber doorgeven.
Koppel het versturen van het formulier aan de zojuist geschreven functie.
Voeg een event handler toe voor de klik op de knop ‘Opnieuw spelen’ in het felicitatiebericht. Die functie moet de methode resetGame van de instantie van de klasse Game gebruiken om het spel te resetten, en daarna het felicitatiebericht en het invoerformulier wissen.
Koppel het juiste JavaScript-bestand aan je pagina index.html
Test je spel door index.html in een browser te openen. Controleer of het goed werkt en of het aan de opdracht voldoet.

Oplossing

Hier is een mogelijke oplossing, getest in een browser. De klasse staat in game.js:

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 importeert de klasse, luistert naar het formulier en toont de melding:

script.js

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);

Rest nog het script aan de pagina te koppelen, net vóór </body>. Het attribuut type="module" is onmisbaar om de import-instructie te laten werken, en modules laden niet vanuit een rechtstreeks geopend bestand (file://): serveer de map met een kleine lokale server, bijvoorbeeld npx serve of de extensie Live Server van VS Code.

index.html

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

Ik hoop dat deze JavaScript-tutorial voor beginners je verder heeft geholpen, je zou nu de basis van JavaScript in handen moeten hebben. Neem gerust een kijkje op de site: je vindt er nog meer tutorials en artikelen over JavaScript om je vaardigheden aan te scherpen.

JavaScript-oefening: een getallenraadspel met ES6-klassen

Aan te maken bestanden

Opdracht

Oplossing

Nieuwe tests, tutorials en projecten, per e-mail.