Stein, Papier, Schere (mit JavaScript)

Dieses Projekt ist perfekt für Fortgeschrittene, da es HTML, CSS und JavaScript um ein vollständiges, funktionsfähiges Spiel zu erstellen.

Dateistruktur

rock-paper-scissors/
│-- index.html    ← HTML structure
│-- styles.css    ← CSS styling
└-- script.js     ← JavaScript functionality

So führen Sie das Projekt durch

1. Erstellen Sie die Dateien:

   Erstellen Sie einen Ordner mit dem Namen Stein-Papier-Schere.
   Erstellen Sie in diesem Ordner drei Dateien: index.html, style.css und script.js.

2. Kopieren Sie den Code:

   Fügen Sie den HTML-, CSS- und JavaScript-Code in die entsprechenden Dateien ein.

3. Öffnen Sie die HTML-Datei:

   Öffnen Sie index.html in Ihrem Browser, um das Spiel zu spielen.

Wie das Spiel funktioniert

1. Wählen Sie eine Auswahl:

   Klicken Sie auf eine der Schaltflächen:
   • Stein ?, Papier ? oder Schere ✂️.

2. Die Wahl des Computers:

   Der Computer wählt zufällig
   • Stein, Papier oder Schere aus.

3. Ergebnisse anzeigen:

   Das Spiel zeigt Ihre Wahl, die Wahl des Computers und wer gewinnt.

4. Erneut abspielen:

   Klicken Sie auf die Schaltfläche
   • „Erneut spielen“, um das Spiel zurückzusetzen.

Schlüsselkonzepte für das Lernen

JavaScript-Konzepte

1. Ereignis-Listener:

   Verwendung von addEventListener zur Verarbeitung von Schaltflächenklicks.

2. Zufallszahlengenerierung:

   Math.random(), um eine zufällige Auswahl für den Computer zu generieren.

3. Bedingungen:

   if-else-Anweisungen zur Ermittlung des Gewinners.

4. DOM-Manipulation:

   Dynamische Aktualisierung des HTML-Inhalts mithilfe von textContent.

Auf GitHub ansehen

Das obige ist der detaillierte Inhalt vonStein, Papier, Schere (mit JavaScript). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!