Kapitel 12 von 12

JavaScript-Übung: ein Zahlenratespiel mit ES6-Klassen

geprüft am 7 September 2026 · 4 Min.

Diese Übung hilft Ihnen, die im Tutorial gelernten JavaScript-Grundlagen anzuwenden. Sie bauen ein Zahlenratespiel, das Variablen, Bedingungen, Funktionen, Objekte und Klassen (ES6), die Bearbeitung der HTML-Seite, Ereignisse und Ereignis-Handler sowie Module und Import/Export (ES6) einsetzt.

Diese Übung ist ideal für JavaScript-Anfänger, die ihr Wissen anwenden und die Grundbausteine der Sprache besser verstehen wollen. Schauen Sie ruhig ins Tutorial zurück, wenn Sie nicht weiterkommen: Die Antworten stehen dort, mit Ausnahme der Klassen, die im Artikel über Klassen in JavaScript vorgestellt werden.

Anzulegende Dateien

game.js (das importierte Modul mit der Spielklasse)
script.js (die Hauptdatei, die das Modul game.js importiert)
index.html (mit dem folgenden 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>

Aufgabenstellung

Deklarier in der Datei game.js eine Klasse Game mit den folgenden Eigenschaften und Methoden:
- Eine Eigenschaft randomNumber mit einer Zufallszahl zwischen 1 und 100 (nimm Math.random() und Math.floor())
- Eine Eigenschaft attempts mit der Anzahl der Versuche des Benutzers
- Eine Eigenschaft found, die angibt, ob die Zahl gefunden wurde oder nicht (ein boolescher Wert)
- Eine Methode checkNumber, die eine Zahl als Argument bekommt und prüft, ob diese Zahl richtig ist, indem sie den vom Benutzer eingegebenen Wert mit der Zufallszahl vergleicht. Ist die Zahl richtig, setz die Eigenschaft found auf true. Ist die Zahl falsch, gib eine Meldung aus, ob die gesuchte Zahl größer oder kleiner ist.
- Eine Methode resetGame, die die Eigenschaften attempts und found auf ihren Anfangswert zurücksetzt und eine neue Zufallszahl zieht.
Importier in der Datei script.js das Modul game.js mit der Anweisung import. Erzeug eine Instanz der Klasse Game und speicher sie in einer Variablen.
Schreib in der Datei script.js eine Funktion, die das Submit-Event des Formulars behandelt. Diese Funktion muss:
- den Versuchszähler der Instanz der Klasse Game hochzählen
- den vom Benutzer eingegebenen Zahlenwert auslesen
- die Methode checkNumber der Instanz der Klasse Game nutzen, um zu prüfen, ob die Zahl richtig ist
- bei richtiger Antwort eine Glückwunschmeldung zurückgeben, sonst die Meldung von checkNumber senden.
Verknüpf das Submit-Event des Formulars mit der zuvor erstellten Funktion.
Ergänze einen Event-Handler für den Klick auf den Button „Nochmal spielen“, der in der Glückwunschmeldung steckt. Diese Funktion muss die Methode resetGame der Instanz der Klasse Game nutzen, um das Spiel zurückzusetzen und die Glückwunschmeldung sowie das Eingabeformular für die Zahl zu löschen.
Binde die richtige JavaScript-Datei in deine Seite index.html ein
Teste dein Spiel, indem du die Datei index.html im Browser öffnest. Vergewissere dich, dass es richtig funktioniert und die Vorgaben einhält.

Lösung

Hier eine mögliche Lösung, im Browser getestet. Die Klasse lebt 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 importiert die Klasse, lauscht auf das Formular und zeigt die Meldung an:

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

Bleibt noch, das Skript kurz vor </body> in die Seite einzubinden. Das Attribut type="module" ist unverzichtbar, damit die import-Anweisung funktioniert, und Module laden nicht aus einer direkt geöffneten Datei (file://): Servieren Sie den Ordner mit einem kleinen lokalen Server, etwa npx serve oder der Erweiterung Live Server von VS Code.

index.html

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

Ich hoffe, dieses JavaScript-Tutorial für Einsteiger hat dir geholfen. Du solltest die Grundlagen von JavaScript jetzt beisammen haben, sieh dich auf der Website um, dort findest du zahlreiche Tutorials und Artikel zu JavaScript, mit denen du deine Fähigkeiten ausbaust.

JavaScript-Übung: ein Zahlenratespiel mit ES6-Klassen

Anzulegende Dateien

Aufgabenstellung

Lösung

Neue Tests, Tutorials und Projekte, per E-Mail.