Guess My Number Spiel - JavaScript Dokumentation¶

Initialisierung und Globale Variablen¶

'use strict';

let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highscore = 0;

'use strict': Aktiviert den strikten Modus für bessere Fehlerbehandlung
secretNumber: Generiert eine zufällige Zahl zwischen 1 und 20
score: Initialer Punktestand des Spielers (20)
highscore: Höchstpunktestand (beginnt bei 0)

Hilfsfunktion für Nachrichten¶

const displayMessage = function (message) {
  document.querySelector('.message').textContent = message;
};

Vereinfacht das Aktualisieren von Spielnachrichten
Verwendet querySelector zum Finden des Nachrichten-Elements
Ändert den Textinhalt des Elements

Haupt-Spiellogik: Check-Button Event Listener¶

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);
  console.log(guess, typeof guess);

Eingabe-Überprüfungen¶

Keine Eingabe

if (!guess) {
 displayMessage('⛔️ No number!');
}

- Zeigt Nachricht, wenn keine Zahl eingegeben wurde 2. Zahlenbereich-Überprüfung

else if (guess > 20 || guess < 1) {
 displayMessage('Out of range');
}

- Prüft, ob Eingabe außerhalb des erlaubten Bereichs 3. Gewinnbedingung

else if (guess === secretNumber) {
 displayMessage('🎉 Correct Number!');
 document.querySelector('.number').textContent = secretNumber;

 document.querySelector('body').style.backgroundColor = '#60b347';
 document.querySelector('.number').style.width = '30rem';

 if (score > highscore) {
   highscore = score;
   document.querySelector('.highscore').textContent = highscore;
 }
}

- Zeigt Gewinn-Nachricht - Aufdecken der Geheimzahl - Ändern des Hintergrunds - Aktualisieren des Höchstpunktstands 4. Falsche Eingabe

else if (guess !== secretNumber) {
 if (score > 1) {
   displayMessage(guess > secretNumber ? '📈 Too high!' : '📉 Too low!');
   score--;
   document.querySelector('.score').textContent = score;
 } else {
   displayMessage('💥 You lost the game!');
   document.querySelector('.score').textContent = 0;
 }
}
});

- Gibt Hinweise, ob die Zahl zu hoch oder zu niedrig ist - Reduziert Punktestand - Spiel-Verlust-Bedingung bei 0 Punkten

Neustart-Funktion: Again-Button¶

document.querySelector('.again').addEventListener('click', function () {
  score = 20;
  secretNumber = Math.trunc(Math.random() * 20) + 1;

  displayMessage('Start guessing...');
  document.querySelector('.score').textContent = score;
  document.querySelector('.number').textContent = '?';
  document.querySelector('.guess').value = '';

  document.querySelector('body').style.backgroundColor = '#222';
  document.querySelector('.number').style.width = '15rem';
});

Setzt alle Spielelemente auf Anfangszustand
Generiert neue Geheimzahl
Setzt Hintergrundfarbe und Styling zurück