Zahlenschätzer

function setup() {
  // Erstelle den Canvas, der die gesamte Fenstergröße einnimmt
  createCanvas(windowWidth, windowHeight);

  // Wähle eine zufällige ganze Zahl zwischen 1 und 100
  secretNum = floor(random(1, 101));

  // Erstelle das Eingabefeld
  guessInput = createInput('');
  guessInput.attribute('placeholder', 'Gib eine Zahl ein'); // Platzhaltertext
  // Positioniere das Eingabefeld in der Mitte des Canvas
  guessInput.position(width / 2 - guessInput.width / 2, height / 2 + 50);

  // Erstelle den Raten-Button
  guessButton = createButton('Raten!');
  // Positioniere den Button neben dem Eingabefeld
  guessButton.position(guessInput.x + guessInput.width + 10, height / 2 + 50);
  guessButton.mousePressed(checkGuess); // Weist die Funktion checkGuess zu, die bei Klick aufgerufen wird

  // Erstelle den Neues-Spiel-Button
  resetButton = createButton('Neues Spiel');
  // Positioniere den Button in der Mitte unter dem Feedback-Text
  resetButton.position(width / 2 - resetButton.width / 2, height / 2 + 150);
  resetButton.mousePressed(resetGame); // Weist die Funktion resetGame zu
  resetButton.hide(); // Verstecke den Button am Anfang

  // Zentriere den Text auf dem Canvas
  textAlign(CENTER, CENTER);
  textSize(24); // Setze die Textgröße
}

function draw() {
  // Setze den Hintergrund
  background(220);

  // Setze die Füllfarbe für den Text auf Schwarz
  fill(0);
  // Zeige den Spieltitel an
  text("Zahlenraten", width / 2, height / 2 - 100);
  // Zeige die Spielanleitung an
  text("Ich habe eine Zahl zwischen 1 und 100 gewählt. Rate sie!", width / 2, height / 2 - 50);
  // Zeige die verbleibenden Versuche an
  text("Versuche übrig: " + triesLeft, width / 2, height / 2);
  // Zeige das Feedback des Spiels an
  text(feedbackText, width / 2, height / 2 + 100);
}

// Funktion zum Überprüfen der Vermutung des Spielers
function checkGuess() {
  if (gameOver) return; // Wenn das Spiel vorbei ist, tue nichts

  let userGuess = int(guessInput.value()); // Konvertiere den Eingabewert in eine ganze Zahl
  guessInput.value(''); // Leere das Eingabefeld nach der Eingabe

  // Überprüfe, ob die Eingabe eine gültige Zahl ist und im Bereich liegt
  if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
    feedbackText = "Ungültige Eingabe. Bitte gib eine Zahl zwischen 1 und 100 ein.";
    return;
  }

  triesLeft--; // Reduziere die Anzahl der verbleibenden Versuche

  if (userGuess === secretNum) {
    // Wenn die Vermutung richtig ist
    feedbackText = "Richtig! Du hast die Zahl in " + (10 - triesLeft) + " Versuchen erraten!";
    gameOver = true; // Setze das Spiel auf "Game Over"
    guessButton.hide(); // Verstecke den Raten-Button
    guessInput.hide(); // Verstecke das Eingabefeld
    resetButton.show(); // Zeige den Neues-Spiel-Button an
  } else if (triesLeft <= 0) {
    // Wenn keine Versuche mehr übrig sind
    feedbackText = "Du hast keine Versuche mehr! Die Zahl war " + secretNum + ".";
    gameOver = true;
    guessButton.hide();
    guessInput.hide();
    resetButton.show();
  } else if (userGuess < secretNum) {
    // Wenn die Vermutung zu niedrig ist
    feedbackText = "Zu niedrig! Versuche es erneut.";
  } else { // userGuess > secretNum
    // Wenn die Vermutung zu hoch ist
    feedbackText = "Zu hoch! Versuche es erneut.";
  }
}

// Funktion zum Zurücksetzen des Spiels
function resetGame() {
  secretNum = floor(random(1, 101)); // Wähle eine neue geheime Zahl
  triesLeft = 10; // Setze die Versuche zurück
  feedbackText = ""; // Leere das Feedback
  gameOver = false; // Setze das Spiel auf "nicht Game Over"
  guessInput.value(''); // Leere das Eingabefeld
  guessButton.show(); // Zeige den Raten-Button wieder an
  guessInput.show(); // Zeige das Eingabefeld wieder an
  resetButton.hide(); // Verstecke den Neues-Spiel-Button
}

// Funktion, die aufgerufen wird, wenn die Fenstergröße geändert wird
function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // Passe die Canvas-Größe an
  // Positioniere die DOM-Elemente neu, um responsiv zu bleiben
  guessInput.position(width / 2 - guessInput.width / 2, height / 2 + 50);
  guessButton.position(guessInput.x + guessInput.width + 10, height / 2 + 50);
  resetButton.position(width / 2 - resetButton.width / 2, height / 2 + 150);
}