Ratespiel

Programmieren Sie ein einfaches Spiel zum Erraten von Zufallszahlen!
Eine Zahl im Wertebereich 1 bis 10 (inklusive) soll im Programm erzeugt werden.
Der Nutzer wird aufgefordert, die vom Programm erzeugte Zahl zu erraten.
Nachdem die Zahl vom Nutzer eingegeben wurde, wird diese vom Programm mit der generierten Zahl verglichen.
Das Programm gibt eine Erfolgsmeldung aus, wenn die Zahl richtig erraten wurde.

Variante Einstieg

Das Programm soll eine Zufallszahl erzeugen im Wertebereich 1-10.
Die Zufallszahlen können Sie ermitteln wie auf folgender Seite beschrieben:
Nach jedem Versuch fragt das Programm den Nutzer, ob das Spiel fortgesetzt werden soll (z.B. "Möchten Sie noch einmal raten?"), z.B. so ...
do
{
} while( confirm( "Möchten Sie noch einmal raten?" ) );
 

ratespiel1.PNG


ratespiel2.PNG

Variante Plus

Nach dem richtigen Erraten der Zahl wird die Anzahl der benötigten Versuche ausgegeben.
Der Nutzer erhält verbesserte Hilfetexte, die ihn bei der korrekten Nutzung des Programms optimal unterstützen.
ratespiel3.PNG

Variante Full

Zum Erraten der erzeugten Zufallszahl dürfen genau drei Versuche gestartet werden.
Nach jedem Versuch erscheint die Meldung "Sie haben noch x Versuche"
ratespiel4.PNG
Nach drei erfolglosen Versuchen erhält der Nutzer die Meldung: "Sie haben verloren!"
Bei Erraten der richtigen Zahl erhält der Nutzer die Meldung: "Super! Beim x. Versuch erraten! Die richtige Zahl lautete: y"
Alle Status-Meldungen werden in einem Statusfenster ausgegeben (Nutzung eines div-Tags mit id="status" und Zugriff über innerHTML)

Variante Profi

Die Anzahl der zu erratenden Zahlen kann zu Beginn des Spiels frei festgelegt werden, z.B. 100.
Die Anzahl der möglichen Versuche kann zu Beginn des Spiels frei festgelegt werden.
Der Nutzer erhält nach jedem Versuch eine Statusmeldung, ob die eingegebene Zahl zu groß oder zu klein war.
Das Spiel kann über einen Button neu gestartet werden.

Variante Profi +

  1. Die Funktionalität der Variante "Profi" wird unter Einsatz von Funktionen realisiert.
  2. Zum Aufruf des Programms sollten Sie einen HTML-Button verwenden (siehe nachfolgendes Beispiel)!
    Der Quelltext gewinnt deutlich an Übersichtlichkeit!
  3. Alle Ausgaben mit alert() und document.write() sollten Sie ersetzen durch eine eigene Ausgabe mit innerHTML (siehe nachfolgendes Beispiel)!
...
// Im Header der Seite finden Sie
// die Ratespiel-Funktion bzw. Funktionen:
 
function ratespiel()
{
  // Hier steht Ihr Programm!
}
 
...
// Im HTML-Teil des Bodys können Sie einen Button
// zum Aufruf der Funktion verwenden.
 
<button onclick="ratespiel()">Noch ein Spiel!</button>
...
 
Ausgabe mit innerHTML:
...
 
function ausgabe( text )
{
  document.write( text );
  // document.getElementById("ausgabefeld").innerHTML = text;
}
 
...
<!-- Das Ausgabefeld im HTML-Teil der Seite -->
 
<div id="ausgabefeld">Hier stehen meine Ausgaben</div>
...




Umsetzungstipps

  • Im ersten Schritt sollten wir uns Gedanken machen über die Erzeugung einer Zufallszahl im Bereich von 1 bis 10.
    • Die Zahl muß eine ganze Zahl sein, denn Zahlen mit Nachkomma stellen lassen sich schwer erraten!
    • Geben Sie die erzeugte Zahl erst einmal aus (z.B. mit alert()), damit Sie schnell merken ob Sie richtig liegen!
    • Für Fortgeschrittene: Wie bekommen wir es hin, dass alle Zahlen gleich häufig vom Programm generiert werden?
  • Der Nutzer wird mittels prompt() aufgefordert, die generierte Zahl zu erraten.
    • Die Zahl wird als Zeichenkette eingelesen (z.B. var eingabe; eingabe = ...)
    • Die eingegebene Zeichenkette muß geprüft werden, ob es sie für unsere Zwecke überhaupt sinnvoll ist (isNaN()). Ggf. muss der Nutzer die Eingabe wiederholen.
    • Die Eingabe muß in eine ganze Zahl gewandelt werden (parseInt()).
    • Der Wertebereich der Zahl muss geprüft werden (z.B. zahl >0 && zahl < 11)
  • Die Zahlen müssen verglichen werden.
  • Die Ausgaben können mit alert ausgegeben werden. Besser ist es allerdings, die Ergebnisse direkt in die HTML-Seite zu schreiben (div-Tag mit id versehen und Ausgaben dann mit document.getElementById("ausgabefeld").innerHTML = "Hello World";), siehe folgendes Beispiel
    • Textausgabe-CSS-1T.html
    • Mit CSS-Formatierungen kann man die Seite so schön gestalten, wie Nutzer dieses erwarten. Eine Vorlage hierfür finden Sie ebenfalls im obigen Beispiel.


Musterlösung

Die folgende Musterlösung - Variante FULL light ;-) - ist immer noch nicht perfekt und hat noch die eine oder andere Macke! Also bitte nicht kopieren, sondern nachvollziehen, verstehen und BESSER MACHEN!!

Wie funktioniert eine brauchbare Eingabeprüfung?

Zuerst wird überprüft, ob es sich bei der Tastatureingabe überhaupt um die Eingabe von Zahlen handelt:
    var eingabe;
    var istKeineZahl; // Ergebnis der Pruefung isNaN(); true oder false
    var istGueltig;
 
    do
    {
      eingabe = prompt("Geben Sie die Zahl ein!")
      istKeineZahl = isNaN(eingabe);
 
      if( istKeineZahl == true )
      {
        alert("Hey, das ist aber keine gültige Zahl, oder?")
      }
      else
      {
        // Wandlung der Eingabe in eine Zahl
      }
    } while( istKeineZahl == true )
Die obige Lösung muss man jetzt noch erweitern auf die Prüfung des Wertebereichs der eingegebenen Zahl, denn diese soll ja entsprechend der Aufgabenstellung zwischen 0 und 11 liegen, d.h. 1,2,3,4,5,6,7,8,9 und 10 sind gültig!
    var eingabe="";
    var zahl=0;
    var istGueltig=false;
 
    do
    {
      eingabe = prompt("Geben Sie die Zahl ein!");
      zahl = parseInt( eingabe );
 
      if( zahl < 11 && zahl > 0 )
      {
        istGueltig = true;
      }
      else
      {
        istGueltig = false;
        alert("Die eingegebene Zahl soll 1-10 sein!");
      }
    } while( istGueltig == false )
 
    alert("Prima, jetzt haben Sie eine gueltige Zahl eingegeben!");

Wie funktioniert eine verknüpfte Prüfung von zwei Bedingungen? z.B. so:
    var zahl    = 0;
    var zahlMin = 0;
    var zahlMax = 50;
    var eingabe = "";
 
    eingabe = prompt("Zahl eingeben");
    zahl = parseInt(eingabe);
 
    if( zahl > zahlMin-1 && zahl < zahlMax+1 )
    {
      alert("Jaaaaaa! :-)")
    }
    else
    {
      alert("Das war wohl nix!")
    }
 
    document.write("Nochmal? Drücken Sie F5");
Anzahl von Versuchen begrenzen? z.B. so:
  var versuche = 3;
 
  while( versuche-- > 0 )
  {
    eingabe = prompt("Raten Sie! Sie haben noch "
            +  versuche + " Versuch(e)");
  }