JavaScript Schnellstart / JavaScript Schnellstart Modul 3 – Wichtige Werkzeuge der Programmierer
0%
In Bearbeitung

JavaScript Schnellstart: Coding-Challenge: Schere, Stein, Papier, Raketenstart

In dieser Coding-Challenge simulieren wir den Raketenstart.

Doch es gibt ein Problem: Zwei Wissenschaftler streiten sich darum, wer den Raketenstart-Knopf drücken darf. Da kommt ihnen die Idee Schere, Stein, Papier zu spielen. Der Gewinner darf den Knopf drücken.

Wie funktioniert diese Challenge?

  1. Diese Coding-Challenge besteht aus 4 verschiedenen Aufgaben.
  2. Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.

Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.

Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉

Starten wir mit der ersten Aufgabe:

1. Spielstart - Text

Füge in die start-Funktion ein paar Ausgaben ein, die zeigen, dass das Spiel bald startet und welche Werkzeuge man zur Verfügung hat:

Text:

Jemand muss den Zünder zum Starten drücken!
Wir spielen dafür Schere/Stein/Papier!
Was wählst du?

1 - Schere
2 - Stein
3 - Papier

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

function start() {
  ausgeben("Jemand muss den Zünder zum Starten drücken!");
  ausgeben("Wir spielen dafür Schere/Stein/Papier!");

  ausgeben("Was wählst du?");
  ausgeben("1 - Schere");
  ausgeben("2 - Stein");
  ausgeben("3 - Papier");
}

[/lp_spoiler]

2. Benötigte Variablen

Erstelle die Variablen um den Spielverlauf zu steuern. Überlege dir welche Variablen du benötigen könntest.
Hier ein paar Anregungen:
- runde (für die aktuelle Spielrunde)
- punkte (Spielpunkte des Spielers)
- gegner (Spielpunkte des Gegners)
- spielzuEnde (Variable um das Spielende zu bestimmen)

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
Füge diesen Code in die start-Funktion ein.

  var runde = 1;
  var punkte = 0;
  var gegner = 0;
  var spielzuEnde = false;

[/lp_spoiler]

3. Schleife: Spielen bis Game Over

Nun erstellen wir eine Schleife mit der die Spielrunden ablaufen. Die Schleife und das Spiel ist erst zuende, WENN ein Spieler oder der Gegner mindestens 2 Punkte hat.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

while(spielzuEnde == false) {

    if (punkte >= 2) {
      ausgeben("Du hast gewonnen!");
      spielzuEnde = true;
    } else if (gegner >= 2) {
      ausgeben("Gegner hat gewonnen!");
      spielzuEnde = true;
    } else {
      ausgeben("Nächste Runde: " + runde);
    }
  }

[/lp_spoiler]

4. Spieler wählt Werkzeug

Nun benötigen wir eine Eingabe. Diese soll kurz beschreiben welche Werkzeuge wir per Zahl wählen können.
Text: Wähle: 1 - Schere, 2 - Stein oder 3 - Papier?

Die eigebene Zahl müssen wir wieder in einer Variable speichern.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

    var auswahlText = prompt("Wähle: 1 - Schere, 2 - Stein oder 3 - Papier?");
    var auswahl = parseInt(auswahlText);

[/lp_spoiler]

5. Text für Werkzeugwahl

Wir werden die Werkzeuge mehrmals im Spiel ausgeben müssen. Baue eine Funktion, die je nach Zahl (1,2,3) das passende Werkzeug zurückgibt (Schere, Stein, Papier).
Rufe diese Funktion dann nach der Auswahl des Werkzeuge auf.

Funktion:
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

function werkzeugInText(werkzeug) {
  if (werkzeug == 1) {
    return "Schere";
  } else if (werkzeug == 2) {
    return "Stein";
  } else if (werkzeug == 3) {
    return "Papier";
  }
}

[/lp_spoiler]

Aufruf
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
Nach der Auswahl eintragen:

ausgeben("Du hast " + werkzeugInText(auswahl)  + " gewählt.");

[/lp_spoiler]

6. Computer wählt mit Zufallszahl

Jetzt erstellen wir eine Zufallszahl von 1 bis 3. Diese Zahl ist die Werkzeugwahl des Computergegners.
Erstelle eine Funktion welche eine Zufallszahl zwischen 1 und 3 zurückgibt.
Der Computergegner muss dann damit seine Auswahl treffen, rufe die Funktion auf.
Speichere die Auswahl und gib die Auswahl des Gegners aus.

Funktion:
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

function zufallsZahl(min, max) {
  var faktor = max - min;
  var zufallsZahl = Math.random() * faktor;
  var ohneKomma = Math.floor(zufallsZahl);
  var minimumZufallsZahl = ohneKomma + min;
  return minimumZufallsZahl;
}

[/lp_spoiler]

Aufruf:
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

    var gegnerWahl = zufallsZahl(1,3);
    ausgeben("Dein Gegner hat " + werkzeugInText(gegnerWahl)  + " gewählt.");

[/lp_spoiler]

7. Wer hat gewonnen?

Wenn beide Spieler gewählt haben, müssen wir prüfen wer gewonnen hat.
Schere schlägt Papier.
Stein schlägt Schere.
Papier schlägt Stein.
Gleiche Wahl ist ein unentschieden.

Schreibe dafür eine Funktion mit 2 Parametern und gib dort den Gewinner zurück.
Rufe die neue Funktion nach der Wahl der Werkzeuge auf.

Funktion:
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

function prüfeGewinn(spieler1, spieler2) {
  if (spieler1 == 1 && spieler2 == 3) {
    return 1;
  } else if (spieler1 == 2 && spieler2 == 1) {
    return 1;
  } else if (spieler1 == 3 && spieler2 == 2) {
    return 1;
  }
  if (spieler1 == 3 && spieler2 == 1) {
    return 2;
  } else if (spieler1 == 1 && spieler2 == 2) {
    return 2;
  } else if (spieler1 == 2 && spieler2 == 3) {
    return 2;
  }
  return 0;
}

[/lp_spoiler]

Aufruf:
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

var gewinner = prüfeGewinn(auswahl, gegnerWahl);

[/lp_spoiler]

8. Punktevergabe

Da wir nun den Gewinner kennen, sollte dieser auch die Punkte dafür bekommen. Zusätzlich geben wir aus, wer die Runde gewonnen hat!

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

    if (gewinner == 1) {
      alert("Du gewinnst die Runde!");
      punkte = punkte + 1;
      runde = runde + 1;
    } else if (gewinner == 2) {
      alert("Gegner gewinnt die Runde!");
      gegner = gegner + 1;
      runde = runde + 1;
    } else {
      runde = runde + 1;
    }

[/lp_spoiler]

Herzlichen Glückwunsch! Du hast grad Schere / Stein / Papier programmiert!

Hat nicht geklappt? Hier nochmal der gesamte Code zum überprüfen:

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

function start() {
  ausgeben("Jemand muss den Zünder zum Starten drücken!");
  ausgeben("Wir spielen dafür Schere/Stein/Papier!");

  ausgeben("Was wählst du?");
  ausgeben("1 - Schere");
  ausgeben("2 - Stein");
  ausgeben("3 - Papier");

  var runde = 1;
  var punkte = 0;
  var gegner = 0;
  var spielzuEnde = false;
  while(spielzuEnde == false) {
    var auswahlText = prompt("Wähle: 1 - Schere, 2 - Stein oder 3 - Papier?");
    var auswahl = parseInt(auswahlText);
    ausgeben("Du hast " + werkzeugInText(auswahl)  + " gewählt.");
    var gegnerWahl = zufallsZahl(1,3);
    ausgeben("Dein Gegner hat " + werkzeugInText(gegnerWahl)  + " gewählt.");

    var gewinner = prüfeGewinn(auswahl, gegnerWahl);
    if (gewinner == 1) {
      alert("Du gewinnst die Runde!");
      punkte = punkte + 1;
      runde = runde + 1;
    } else if (gewinner == 2) {
      alert("Gegner gewinnt die Runde!");
      gegner = gegner + 1;
      runde = runde + 1;
    } else {
      runde = runde + 1;
    }

    if (punkte >= 2) {
      ausgeben("Du hast gewonnen!");
      spielzuEnde = true;
    } else if (gegner >= 2) {
      ausgeben("Gegner hat gewonnen!");
      spielzuEnde = true;
    } else {
      ausgeben("Nächste Runde: " + runde);
    }

  }

}

function prüfeGewinn(spieler1, spieler2) {
  if (spieler1 == 1 && spieler2 == 3) {
    return 1;
  } else if (spieler1 == 2 && spieler2 == 1) {
    return 1;
  } else if (spieler1 == 3 && spieler2 == 2) {
    return 1;
  }
  if (spieler1 == 3 && spieler2 == 1) {
    return 2;
  } else if (spieler1 == 1 && spieler2 == 2) {
    return 2;
  } else if (spieler1 == 2 && spieler2 == 3) {
    return 2;
  }
  return 0;
}

function werkzeugInText(werkzeug) {
  if (werkzeug == 1) {
    return "Schere";
  } else if (werkzeug == 2) {
    return "Stein";
  } else if (werkzeug == 3) {
    return "Papier";
  }
}

function zufallsZahl(min, max) {
  var faktor = max - min;
  var zufallsZahl = Math.random() * faktor;
  var ohneKomma = Math.floor(zufallsZahl);
  var minimumZufallsZahl = ohneKomma + min;
  return minimumZufallsZahl;
}
Code ausprobieren ×

[/lp_spoiler]