Kleiner JavaScript Kurs

Papier, Schere, Stein

Auf dieser Seite wollen wir das Spiel "Papier, Schere, Stein" (auch als "Schnick, Schnack, Schnuck" bekannt) programmieren.
Im ersten Programm soll der Computer uns einen Spielpartner ersetzen. Wir spielen als manuell (mit den Händen) gegen den Computer. Bei dem Spiel gibt es 3 Gegenstände, die mit einer Hand angezeigt werden:

Papier
Schere
Stein

Wer gewinnt?
Papier gewinnt gegen Stein (packt ihn ein)
Schere gewinnt gegen Papier (zerschneidet es)
Stein gewinnt gegen Schere (macht die Schere stumpf)

Unser Programm soll auf Knopfdruck (ein Button) eines der 3 Bilder anzeigen (Zufall)
Der html - Teil könnte so aussehen:

<body>
    <h1>Schnick, Schnack, Schnuck</h1>
    <button onclick="ssp();">Schnick, Schnack, Schnuck</button>
    <br>
    <img src="images/papier.gif" id="pcBild">
</body>

Jetzt zum JavaScript - Programm (Name ssp() Abkürzung von SchereSteinPapier ;-)
Da wir mit einem Zufallsgenerator nur Zufallszahlen erzeugen können, legen wir die 3 Bilder in eine Liste mit dem Namen "bild". Mit bild[0] können wir dann das Papier anzeigen, mit bild[1] die Schere und mit bild[2] den Stein. Wir brauchen also nur eine Zufallszahl zwischen 0 und 2.
Zum Schluss tauschen wir das Bild in unserem img - Tag (src) gegen das Zufallsbild aus. 
<script>
  function ssp(){
    var bild = ["images/papier.gif","images/schere.gif","images/stein.gif"];
    var bildNummer = Math.floor(Math.random()*3);
    var pcBild = document.getElementById("pcBild");
    pcBild.src = bild[bildNummer];
    }
</script>

So könnte es aussehen: JS_Kurs_B09.html

Hier die HTML-Seite mit dem kompletten Programm 


<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        
    </head>                   
    <body>
		<h1>Schnick, Schnack, Schnuck</h1>
        <button onclick="ssp();">Schnick, Schnack, Schnuck</button>
        <br>
        <img src="images/papier.gif" id="pcBild">
        <script>
          function ssp(){
            var bild = ["images/papier.gif","images/schere.gif","images/stein.gif"];
            var bildNummer = Math.floor(Math.random()*3);
            var pcBild = document.getElementById("pcBild");
            pcBild.src = bild[bildNummer];
            }
        </script>
    </body>
</html>

Leider kann der Computer bei unserem Programm nicht feststellen, wer gewonnen hat, da wir ja unsere Wahl (Papier - Schere - Stein) mit der Hand anzeigen. Wir erweitern deshalb unser Programm so, dass wir unsere Auswahl (Papier, Schere oder Stein) auf dem Bildschirm anklicken. Dann kann der Computer auch feststellen, wer gewonnen hat.
Als erstes wieder die html - Seite; wir zeigen die 3 Bilder an und machen sie anklickbar (onclick=""). Damit das Programm weiss, welches Bild angeklickt wurde, übergeben wir mit dem Programmaufruf eine Zahl (0 - 2; z.B. ssp(1)). Den Button benötigen wir nicht mehr (das Programm wird ja durch anklicken der Bilder gestartet). Statt dessen gibt es einen "Ergebnisbereich" (h2 - Tag) in dem wir später anzeigen, wer gewonnen hat. 

<h1>Schnick, Schnack, Schnuck</h1>
<img src="images/papier.gif" onclick="ssp(0);">
<img src="images/schere.gif" onclick="ssp(1);">
<img src="images/stein.gif" onclick="ssp(2);">
<br>
<h2 id="ergebnis">Bitte ein Bild anklicken</h2>
<img src="images/papier.gif" id="pcBild">

Nun zum JavaScript Programm. Bei der Funktionsdefinition brauchen wir in den Klammern einen Variablen Namen (spielerBildNummer). Mit dieser Variablen wird die Nummer des angeklickten Bildes übergeben. Probiere es bitte aus: alert(spielerBildNummer); 
<script>
  function ssp(spielerBildNummer){
    //alert(spielerBildNummer);
    var bild = ["images/papier.gif","images/schere.gif","images/stein.gif"];
    var bildNummer = Math.floor(Math.random()*3);
    var pcBild = document.getElementById("pcBild");
    pcBild.src = bild[bildNummer];
    }
</script>
Das Programm hat sich kaum geändert. Am Ende des Programms könnte man jetzt auswerten wer gewonnen hat (mit if die Zahlen in den Variablen spielerBildNummer und bildNummer auswerten; z.B. spielerBildNummer = 0 und bildNummer = 2 bedeutet Spieler hat Papier, Computer hat Stein => Spieler hat gewonnen)
Leider kann man nicht dauerhaft sehen, welches Bild der Spieler angeklickt hat. Es wäre schön, wenn das angeklickte Bild einen Rahmen bekäme. Am Besten fragt man ChatGPT wie so etwas mit JavaScript funktioniert.
Hier ein Vorschlag, wie so etwas funktionieren könnte. Zuerst müssen alle alten Rahmen gelöscht werden (for - Schleife) dann wird das angeklickte Bild eingerahmt. 
var spielerBilder = document.getElementsByTagName("img");
for(var i = 0; i < 3; i++){
  spielerBilder[i].style.border = "";
}
spielerBilder[spielerBildNummer].style.border = "5px solid red";

So könnte es aussehen: JS_Kurs_B09ja.html