Exercise 08 - Ratespiel

Programmiere das folgende Ratespiel:

Dein Spiel wird über den Browser gespielt.
Zu Beginn wird eine zufällige Zahl ermittelt.
Danach kann der Benutzer eine Zahl zwischen 1 und 100 in das Textfeld eingeben.
Mit der Enter Taste wird der Versuch abgesendet.
Das Programm überprüft ob die Eingabe mit der vorher ermittelten Zufallszahl übereinstimmt.
- Stimmt die Zahl überein, folgt die Ausgabe "Richtig! 5 Versuche. Du kannst die nächste Zahl raten, wenn du magst.". Wobei statt der Zahl 5 die jeweilige Anzahl an Versuchen angegeben wird, die der Benutzer wirklich gebraucht hat.
- Ist die Zahl zu klein, folgt die Ausgabe "Deine Zahl ist zu klein. Rate erneut."
- Ist die Zahl zu groß, folgt die Ausgabe "Deine Zahl ist zu groß. Rate erneut."
Sobald der Benutzer die richtige Zahl erraten hat, wird eine neue Zufallszahl ermittelt und der Benutzer kann sofort versuchen die nächste Zahl zu erraten.

Folgende Dateien hast du bereits zur Verfügung:

index.html

<html>
  <head>
    <meta charset="UTF-8" />
    <title>My First Website</title>
  </head>
  <body>
    <h1>Ratespiel</h1>
    <p id="prompt"></p>
    <form>
      <input id="guessInput" type="number" min="1" max="100" />
    </form>

    <script src="index.js"></script>
  </body>
</html>

/////////////////////////////////////////////////
// Der folgende Code ist vorgegeben.
// Ändere ihn NICHT
/////////////////////////////////////////////////

let input = document.getElementById("guessInput");
input.addEventListener("keypress", function (event) {
  if (event.key === "Enter") {
    event.preventDefault();
    userGuessed(Number(input.value));
    input.value = "";
  }
});

function showText(text) {
  let prompt = document.getElementById("prompt");
  prompt.innerText = text;
}

let randomNumber = 0;

function calculateRandomNumber() {
  randomNumber = Math.floor(Math.random() * 100 + 1);
}

/////////////////////////////////////////////////
// Ab hier kannst du deinen eigenen Code hinzufügen
/////////////////////////////////////////////////

// Die Variable randomNumber ist bereits deklariert.
// Verwende die Variable wenn du überprüfst ob ein Benutzer
// die richtige Zahl eingegeben hat.
// Ändere die Variable nie selbst durch eine Zuweisung.
// Wenn du eine Zufallszahl ermitteln willst, verwende die
// bereits vorhandene Funktion calculateRandomNumber, die ohne Parameter
// aufgerufen wird und der Variable randomNumber einen neuen Zufallswert zuweist.
// Die Funktion hat keinen Rückgabewert.

// Du kannst die Funktion showText verwenden
// um einen Text auf der HTML Seite anzuzeigen.
// Die Funktion hat einen Parameter, nämlich den Text (Datentyp String) der angezeigt werden soll.
// Die Funktion hat keinen Rückgabewert.

// Immer wenn der Benutzer eine Zahl rät (durch Eingabe im Textfeld und Bestätigung mit Enter)
// wird die Funktion userGuessed (auf deutsch: Benutzer hat geraten) aufgerufen.
// Diese Funktion gibt es noch nicht und muss erst von dir erstellt werden.
// Die Funktion soll einen Parameter haben, nämlich die Zahl die der Benutzer geraten hat.
// In der Funktion soll dann überprüft werden, ob die richtige Zahl gefunden wurde
// und abhängig davon (richtig, zu groß, zu klein) soll die richtige Meldung auf der HTML Seite
// ausgegeben werden und bei Bedarf zusätzliche Schritte durchgeführt werden.