Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

// B1.5 · ca. 35 Min. · Einstieg

Projekt: ein Zahlenratespiel

Nach diesem Projekt schreiben Sie ein Spiel, das Tipps mit einer geheimen Zahl vergleicht, die Versuche zählt und Too low, Too high oder Correct ausgibt, und Sie debuggen es.

Lektion 5 von 5 in B1 Erste Schritte

Ende des Moduls

Danach können Sie

  • Einen Tipp mit der geheimen Zahl vergleichen und Too low, Too high oder Correct ausgeben, mit einem ersten Blick auf if und else
  • Geheimzahl, Tipp und Versuche in const und let halten
  • Das Spiel mit seinen Fehlermeldungen und ausgegebenen Werten debuggen

  1. Aufwärmen · Aufgabe 1 von 7

    Zum Aufwärmen: Die Geheimzahl bleibt das ganze Spiel über gleich, der Tipp ändert sich jede Runde. Welche Deklarationen passen am besten?

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher, bevor Sie weiterlesen: Was gibt dieser Code aus?

    const secret = 7;
let guess = 4;
if (guess < secret) {
  console.log("Too low");
} else if (guess > secret) {
  console.log("Too high");
} else {
  console.log("Correct");
}

  3. Üben · Aufgabe 3 von 7

    Ergänzen Sie den Vergleich, damit das Programm für diesen Tipp Too high ausgibt.

    const secret = 7;
let guess = 9;
if (guess ____ secret) {
  console.log("Too high");
}
    if (guess secret) {

  4. Üben · Aufgabe 4 von 7

    Welche ganzen Zahlen kann dieser Ausdruck liefern? (Eine Vorschau: Die Module B2 und B3 kommen auf Math zurück.)

    Math.floor(Math.random() * 10) + 1

  5. Üben · Aufgabe 5 von 7

    Drei Runden zählen je einen Versuch. Was gibt die letzte Zeile aus?

    let attempts = 0;
attempts = attempts + 1;
attempts = attempts + 1;
attempts = attempts + 1;
console.log("Attempts:", attempts);

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. Dieses Programm stoppt mit einem Fehler. Was gibt es vorher aus?

    const secret = 42;
const guess = 30;
console.log("Guess:", guess);
guess = 50;
console.log("Guess:", guess);

  7. Anwenden · Aufgabe 7 von 7

    Mini-Aufgabe. Schreiben Sie das ganze Spiel für die Geheimzahl 42 und die Tipps 25, 75 und 42. Jede Runde setzt guess, zählt attempts um eins hoch und gibt den Tipp mit Too low, Too high oder Correct aus. Geben Sie am Ende Found 42 in 3 attempts aus, beide Zahlen aus den Variablen. Ändern Sie dann einen Tipp und führen Sie es erneut aus.

    Prüfen Sie Ihr Ergebnis anhand dieser Liste

Selbst programmieren

Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.

Ausgearbeitetes Beispiel

Drei Runden des Spiels

Die Geheimzahl ist fest 42, und die drei Tipps stehen im Programm, weil der Editor keine Tastatureingabe hat. Jede Runde gibt guess einen neuen Wert, zählt den Versuch und gibt eine von drei Meldungen aus. Führen Sie es aus, ändern Sie dann einen Tipp oder die Geheimzahl und sagen Sie die Ausgabe vorher, bevor Sie es erneut ausführen.

main.js

// Number guessing, with the guesses written into the program.
const secret = 42;
let attempts = 0;

let guess = 30;
attempts = attempts + 1;
if (guess < secret) {
  console.log(guess, "Too low");
} else if (guess > secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}

guess = 50;
attempts = attempts + 1;
if (guess < secret) {
  console.log(guess, "Too low");
} else if (guess > secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}

guess = 42;
attempts = attempts + 1;
if (guess < secret) {
  console.log(guess, "Too low");
} else if (guess > secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}

console.log("Attempts:", attempts);

Ausführen mit

node main.js

Ausgabe

30 Too low
50 Too high
42 Correct
Attempts: 3
  • secret ist eine const: Sie ändert sich nie. guess und attempts sind let: Jede Runde ändert sie.
  • In jeder Runde erscheint genau eine der drei Meldungen.
  • Vor guess = 50; steht kein let: Die Variable gibt es schon, sie bekommt nur einen neuen Wert.
  • Dieselbe Runde steht dreimal da. Schleifen (B3) und Funktionen (B4) machen daraus einen Block.
Ändern und ausführen

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Übungen

Übung 1 von 3

Schritt 1: drei Tipps bewerten

Die Geheimzahl ist 42, die Tipps sind 30, 50 und 42. Geben Sie nach jedem Tipp den Tipp und Too low, Too high oder Correct aus, etwa 30 Too low. Wählen Sie die Meldung mit if, else if und else, und lassen Sie JavaScript vergleichen: Tippen Sie die Antworten nicht ein.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    Beginnen Sie nur mit dem ersten Tipp: if (guess < secret) { console.log(guess, "Too low"); }.

  2. Hinweis 2

    Ergänzen Sie else if (guess > secret) { … } und else { … } für die anderen beiden Meldungen.

  3. Hinweis 3

    Kopieren Sie den ganzen if … else-Block hinter jede neue Zeile guess = .

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

const secret = 42;
let guess = 30;
if (guess < secret) {
  console.log(guess, "Too low");
} else if (guess > secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}

guess = 50;
if (guess < secret) {
  console.log(guess, "Too low");
} else if (guess > secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}

guess = 42;
if (guess < secret) {
  console.log(guess, "Too low");
} else if (guess > secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

const secret = 42;
let guess = 30;
// Print the guess and "Too low", "Too high" or "Correct".

guess = 50;
// The same check again.

guess = 42;
// And once more.

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

const lines = async () => (await runMain()).trimEnd().split('\n');

test('meldet Too low für 30', async () => {
  const got = await lines();
  assert.equal(got[0], '30 Too low', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "30 Too low"`);
});

test('meldet Too high für 50', async () => {
  const got = await lines();
  assert.equal(got[1], '50 Too high', `die zweite Zeile ist ${JSON.stringify(got[1])}, erwartet: "50 Too high"`);
});

test('meldet Correct für 42', async () => {
  const got = await lines();
  assert.equal(got[2], '42 Correct', `die dritte Zeile ist ${JSON.stringify(got[2])}, erwartet: "42 Correct"`);
});

test('gibt genau eine Zeile pro Tipp aus', async () => {
  const got = await lines();
  assert.equal(got.length, 3, `das Programm gab ${got.length} Zeile(n) aus, erwartet: 3`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Übung 2 von 3

Schritt 2: das kaputte Spiel reparieren

Dieses Spiel soll 30 Too low, dann 42 Correct, dann Attempts: 2 ausgeben. Es hat zwei Fehler. Führen Sie es aus, lesen Sie die Fehlermeldung und korrigieren Sie diese Zeile. Vergleichen Sie dann die Ausgabe mit dem Soll: Der zweite Fehler meldet gar nichts, er liefert nur falsche Rückmeldungen.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    Der erste Fehler ist TypeError: Assignment to constant variable. Welche Variable bekommt einen neuen Wert, und wie ist sie deklariert?

  2. Hinweis 2

    Nach dieser Korrektur wird 30 als Too high gemeldet. Geben Sie guess und secret aus, oder lesen Sie jede Bedingung laut: Ist 30 > 42?

  3. Hinweis 3

    Tauschen Sie die beiden Vergleiche: guess < secret gehört zu Too low, guess > secret zu Too high.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

const secret = 42;
let attempts = 0;

let guess = 30;
attempts = attempts + 1;
if (guess < secret) {
  console.log(guess, "Too low");
} else if (guess > secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}

guess = 42;
attempts = attempts + 1;
if (guess < secret) {
  console.log(guess, "Too low");
} else if (guess > secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}

console.log("Attempts:", attempts);
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

const secret = 42;
const attempts = 0;

let guess = 30;
attempts = attempts + 1;
if (guess > secret) {
  console.log(guess, "Too low");
} else if (guess < secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}

guess = 42;
attempts = attempts + 1;
if (guess > secret) {
  console.log(guess, "Too low");
} else if (guess < secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}

console.log("Attempts:", attempts);

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

test('läuft ohne Fehler', async () => {
  await runMain();
});

test('meldet Too low für 30', async () => {
  const got = (await runMain()).trimEnd().split('\n');
  assert.equal(got[0], '30 Too low', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "30 Too low"`);
});

test('gibt das ganze Spiel aus', async () => {
  const got = (await runMain()).trimEnd().split('\n');
  assert.deepEqual(got, ['30 Too low', '42 Correct', 'Attempts: 2'], `das Programm gab ${JSON.stringify(got)} aus`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Übung 3 von 3

Schritt 3: eine zufällige Geheimzahl

Jetzt wählt das Programm die Geheimzahl: eine ganze Zahl von 1 bis 10, mit Math.floor(Math.random() * 10) + 1. Der Tipp ist 5. Geben Sie wie zuvor die Rückmeldung aus, dann The secret was und die Geheimzahl, etwa The secret was 8. Die Tests führen Ihr Programm mehrmals aus: Die Geheimzahl muss immer eine ganze Zahl von 1 bis 10 sein, die Rückmeldung muss zu ihr passen, und sie darf nicht immer gleich sein.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    Führen Sie den Starter ein paarmal aus: Die Geheimzahl hat Nachkommastellen, etwa 7.3918…, die niemand erraten könnte.

  2. Hinweis 2

    Math.floor(…) rundet auf eine ganze Zahl ab, und Math.random() * 10 ist kleiner als 10, Sie erhalten also 0 bis 9.

  3. Hinweis 3

    Addieren Sie nach dem Runden 1: Math.floor(Math.random() * 10) + 1.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

const secret = Math.floor(Math.random() * 10) + 1;
const guess = 5;
if (guess < secret) {
  console.log(guess, "Too low");
} else if (guess > secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}
console.log("The secret was", secret);
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

// Pick a whole number from 1 to 10.
const secret = Math.random() * 10;
const guess = 5;
if (guess < secret) {
  console.log(guess, "Too low");
} else if (guess > secret) {
  console.log(guess, "Too high");
} else {
  console.log(guess, "Correct");
}
console.log("The secret was", secret);

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

const RUNS = 6;

const play = async () => {
  const [feedback, reveal] = (await runMain()).trimEnd().split('\n');
  const found = /^The secret was (\d+)$/.exec(reveal ?? '');
  return {feedback, reveal, secret: found ? Number(found[1]) : null};
};

test('die Geheimzahl ist eine ganze Zahl von 1 bis 10', async () => {
  for (let run = 0; run < RUNS; run++) {
    const {reveal, secret} = await play();
    assert.ok(secret !== null && secret >= 1 && secret <= 10, `die letzte Zeile ist ${JSON.stringify(reveal)}, erwartet: The secret was und eine ganze Zahl von 1 bis 10`);
  }
});

test('die Rückmeldung passt zur Geheimzahl', async () => {
  for (let run = 0; run < RUNS; run++) {
    const {feedback, secret} = await play();
    const expected = secret > 5 ? '5 Too low' : secret < 5 ? '5 Too high' : '5 Correct';
    assert.equal(feedback, expected, `bei der Geheimzahl ${secret} ist die erste Zeile ${JSON.stringify(feedback)}, erwartet: ${JSON.stringify(expected)}`);
  }
});

test('die Geheimzahl ändert sich zwischen den Läufen', async () => {
  const seen = new Set();
  for (let run = 0; run < 10 && seen.size < 2; run++) seen.add((await play()).secret);
  assert.ok(seen.size > 1, `10 Läufe ergaben alle die Geheimzahl ${[...seen][0]}`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Häufige Fehler

Ein Tipp, mit const deklariert

const secret = 42;
const guess = 30;
guess = 50;

Was Node.js ausgibt

TypeError: Assignment to constant variable.

Warum, und die Lösung

Eine const kann keinen neuen Wert bekommen, und das Programm stoppt an der Zeile, die es versucht. Der Tipp ändert sich jede Runde, deklarieren Sie ihn also mit let guess = 30; und behalten Sie const für die Geheimzahl. Dasselbe passiert mit einem Zähler attempts als const.

Ein großes F in Math.floor

const secret = Math.Floor(Math.random() * 100) + 1;

Was Node.js ausgibt

TypeError: Math.Floor is not a function

Warum, und die Lösung

Math gibt es, aber es hat kein Floor mit großem F, also gibt es nichts aufzurufen. Namen unterscheiden Groß- und Kleinschreibung: Math beginnt mit großem M, seine Methoden floor und random sind klein geschrieben.

Eine fehlende schließende Klammer

const secret = 42;
const guess = 30;
if (guess < secret) {
  console.log(guess, "Too low");
} else {
  console.log(guess, "Too high or correct");

Was Node.js ausgibt

SyntaxError: Unexpected end of input

Warum, und die Lösung

Jede { braucht ihre }. Hier wird der else-Block nie geschlossen, also erreicht JavaScript das Dateiende und wartet noch darauf. Wie bei jedem SyntaxError läuft keine Zeile. Ordnen Sie jeder { ihre } zu und rücken Sie den Code darin ein, dann fällt eine fehlende auf.

JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode

Abschlussquiz

5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.

Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.

Problem melden

Etwas ist falsch oder unklar? Beschreiben Sie es kurz, dann wird es geprüft und korrigiert.

#

Mindestens 20 Zeichen.

Nur, wenn Sie eine Antwort wünschen.

Kernideen

Ein erster Blick auf if und else

Ein Spiel muss wählen, was es ausgibt, und genau das tut if…else. if (guess < secret) { … } führt seinen Block in geschweiften Klammern nur aus, wenn die Bedingung in runden Klammern wahr ist. else if (guess > secret) { … } wird als Nächstes geprüft, und else { … } läuft, wenn davor nichts wahr war: hier, wenn der Tipp gleich der Geheimzahl ist. Genau einer der drei Blöcke läuft. < heißt kleiner als, > größer als; der Vergleich selbst ergibt true oder false. Das ist eine Vorschau: Modul B3 behandelt Bedingungen vollständig.

const für das, was bleibt, let für das, was sich ändert

Die Geheimzahl bleibt das ganze Spiel über gleich, also ist sie eine const. Der Tipp ändert sich jede Runde, und die Versuche steigen, also sind sie let. guess = 50; gibt der Variablen einen neuen Wert, und attempts = attempts + 1; zählt eins dazu. Versuchen Sie das bei einer const, stoppt das Programm mit TypeError: Assignment to constant variable. Der Editor hat keine Tastatureingabe, deshalb stehen die Tipps im Programm, eine Runde nach der anderen. Die wiederholte Runde werden Schleifen (B3) und Funktionen (B4) kurz machen.

Eine zufällige Geheimzahl und ein Spiel, das Sie debuggen können

MDNs Version wählt die Geheimzahl mit Math.floor(Math.random() * 100) + 1. Math.random() liefert eine Dezimalzahl von 0 bis unter 1; mal 100 liegt sie unter 100; Math.floor rundet sie auf eine ganze Zahl ab, 0 bis 99; + 1 macht daraus 1 bis 100. Eine zufällige Geheimzahl macht jeden Lauf anders, geben Sie sie also aus, solange Sie das Spiel testen. Ist die Rückmeldung falsch, aber es erscheint kein Fehler, geben Sie guess und secret daneben aus: Ein < an der Stelle eines > fällt sofort auf.

Quellen

Zuletzt geprüft am 30. September 2026