JavaScripts › Spiele

Schere Stein Papier

Der Klassiker gegen den Computer — mit Bildern für Schere, Stein und Papier und einer mitlaufenden Bilanz.

„Schere, Stein, Papier“ kennt wohl jeder: Ihr wählt eines von drei Symbolen, der Computer wählt gleichzeitig ebenfalls eines — und je nach Kombination gewinnt ihr, verliert ihr oder es steht unentschieden. Eingeschickt wurde das Script von unserem User davidp. Vielen Dank an dieser Stelle dafür!

Die Regeln sind schnell erzählt: Schere schneidet Papier, also gewinnt die Schere. Stein macht die Schere stumpf, also gewinnt der Stein. Papier wickelt den Stein ein, also gewinnt das Papier. Wählen beide dasselbe Symbol, ist die Runde unentschieden. Klickt einfach auf eines der drei Bilder — der Computer deckt sofort auf, und darunter wächst eine Bilanz mit, die eure und seine Siege und Niederlagen mitzählt. Über das Pfeil-Symbol startet ihr die nächste Runde.

Das Spiel gilt als klassisches Beispiel für ein Spiel ohne beste Strategie: Jedes Symbol schlägt genau eines und verliert gegen genau eines, deshalb gibt es keinen Zug, der auf Dauer im Vorteil wäre. Weil der Computer hier rein zufällig wählt, pendelt sich eure Bilanz über viele Runden zwangsläufig um den Ausgleich ein — kurze Glückssträhnen inklusive.

Um das Script auf der eigenen Homepage einzubinden, braucht ihr auch die dazugehörigen Bilder. Diese könnt ihr hier herunterladen: einfach entpacken und auf den eigenen Webspace hochladen. In der Variablen bilderpfad könnt ihr den Pfad anpassen, falls die Bilder nicht im selben Verzeichnis liegen wie die Seite. Ansonsten lasst ihr die Variable einfach, wie sie ist.

Noch mehr Glücksspiele findet ihr beim Münzwurf und bei den Glücksbuttons; wer lieber gegen den Rechner grübelt, ist bei Mastermind richtig.

Spiele Baujahr 2009 läuft in deinem Browser

Klickt auf ein Symbol — der Computer hat seine Wahl bereits getroffen.

Eingesandt von davidp

So funktioniert das Script

Das Script hat drei Bausteine: start() beginnt eine Runde und würfelt heimlich den Zug des Computers aus, waehle() wertet eure Wahl aus und schreibt das Ergebnis samt Bilanz in die Seite, und ein einziger Klick-Beobachter verbindet beides mit den erzeugten Knöpfen. Alle Zwischenstände leben in Variablen, die außerhalb der Funktionen stehen und deshalb zwischen den Runden erhalten bleiben.

let zufall = Math.round(Math.random() * 2);

Math.random() liefert eine Zufallszahl zwischen 0 und (fast) 1, mal 2 ergibt das einen Wert zwischen 0 und 2, und Math.round rundet auf eine ganze Zahl. Heraus kommt 0, 1 oder 2 — die drei Symbole in der Reihenfolge Schere, Stein, Papier. Der Zug des Computers steht damit schon fest, bevor ihr klickt; aufgedeckt wird er erst danach.

function bild(nr) {
  return "<img src='" + bilderpfad + namen[nr] + ".gif' alt='" + namen[nr] + "'>";
}

Weil die drei Symbolnamen in dem Feld namen stehen, genügt eine einzige Funktion, um aus der Zahl 0, 1 oder 2 das passende Bild-Tag zu bauen. Ein solches Feld — in JavaScript ein „Array“ — ist eine nummerierte Liste; namen[1] ist der zweite Eintrag, also "stein". Der bilderpfad steht ganz oben als eigene Variable, damit ihr ihn an einer Stelle ändern könnt.

if (zufall === was) html += "<p>Gleich – Unentschieden</p>";
else if (was === 0 && zufall === 1) { html += "<p>Du hast verloren</p>"; lost_self++; won_pc++; }

Hier stecken die Spielregeln, ausgeschrieben als Kette von Bedingungen. Zuerst der Sonderfall, dass beide dasselbe gewählt haben; danach die sechs möglichen Paarungen. && heißt „und“ — die Bedingung trifft nur zu, wenn beide Vergleiche stimmen. Die Zeile im Beispiel liest sich also: „Du hast die Schere (0), der Computer den Stein (1)“ — Stein gewinnt, also je ein Punkt für die Niederlagen-Spalte bei euch und die Sieges-Spalte beim PC. lost_self++ ist die Kurzform für „erhöhe um eins“.

let html = "<p>Computer: " + bild(zufall) + "<br>Du: " + bild(was) + "</p>";
…
ausgabe.innerHTML = html;

Die gesamte Ausgabe wird erst in der Textvariablen html zusammengesetzt und ganz am Ende in einem Rutsch in die Seite geschrieben. Das ist nicht nur schneller als viele einzelne Schreibvorgänge, sondern auch übersichtlicher: Man sieht der Funktion an, dass sie genau eine Anzeige erzeugt.

ausgabe.addEventListener("click", function (ereignis) {
  const gewaehlt = ereignis.target.closest("[data-wahl]");
  if (gewaehlt) { waehle(Number(gewaehlt.getAttribute("data-wahl"))); return; }
  …
});

Die Knöpfe entstehen erst zur Laufzeit, man kann ihnen also nicht vorab einzeln einen Klick-Beobachter mitgeben. Der Trick heißt Ereignis-Delegation: Ein einziger Beobachter sitzt am umgebenden Behälter und fängt alle Klicks darin ab. ereignis.target ist das genau angeklickte Element — meist das Bild —, und closest() sucht von dort aus nach oben den nächsten Knopf mit dem Merkmal data-wahl. Dessen Wert sagt, welches Symbol gemeint war.

Zum Anpassen: Die Texte „Du hast gewonnen“ und „Du hast verloren“ dürft ihr frei ändern, ebenso die Dateinamen im Feld namen, wenn ihr eigene Bilder verwenden wollt. Wer statt Bildern lieber Text möchte, ersetzt in bild() das <img>-Tag einfach durch namen[nr].

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Spiele