Spiel 'Rate die Münze' erstellen

Einführung

In diesem Projekt lernst du, wie du ein einfames "Rate die Münze" - Spiel bauen kannst. Beim Spiel werden zufällig drei aus neun Gläsern ausgewählt, in die Münzen gelegt werden, und der Spieler muss die richtigen Gläser erraten, indem er die entsprechenden Zahlen eingibt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Die findNum - Funktion implementieren, um einzigartige Zahlen aus der Benutzereingabe zu extrahieren.
• Die randomCoin - Funktion implementieren, um drei nicht wiederholende Zufallszahlen zwischen 1 und 9 zu generieren.
• Das Verzeichnisstruktur des Projekts und die bereitgestellten Dateien verstehen.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Mit JavaScript - Funktionen und Arrays umzugehen.
• Reguläre Ausdrücke verwenden, um bestimmte Daten aus einem String zu extrahieren.
• Zufallszahlen zu generieren und sicherzustellen, dass sie einzigartig sind.
• Schritt für Schritt Anweisungen zu befolgen, um ein Projekt abzuschließen.

Projektstruktur einrichten

In diesem Schritt wirst du die Projektdateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur ist wie folgt:

├── css
├── images
├── index.html
└── js
    ├── findCoin.js
    └── index.js

Dabei gilt:

• css ist der Ordner für Stildateien.
• images ist der Ordner für Bilddateien.
• index.html ist die Hauptseite.
• js/index.js ist die JavaScript - Datei für das Rendern und Animieren der Münzen.
• js/findCoin.js ist die JavaScript - Datei, die abgeschlossen werden muss.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben in der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Implementiere die findNum - Funktion

In diesem Schritt wirst du die findNum - Funktion in der Datei js/findCoin.js implementieren.

1. Öffne die Datei js/findCoin.js.

2. Locate die findNum - Funktion:

   // Zusammensetzen eines Arrays aus den Eingabewerten 1-9
   function findNum(input_values) {
     // TODO
     const reg = /\d/g;
     const uniqueNumbers = [];
     const nums = input_values.match(reg) || [];
     nums.forEach((num) => {
       const parsedNum = parseInt(num);
       if (!isNaN(parsedNum) && !uniqueNumbers.includes(parsedNum)) {
         uniqueNumbers.push(parsedNum);
       }
     });
     return uniqueNumbers;
   }

3. Die findNum - Funktion nimmt einen Parameter input_values und gibt ein Array von einzigartigen Zahlen (1-9) zurück, die in der Eingabe gefunden wurden.

4. Implementiere die findNum - Funktion, indem du folgendermaßen vorgehst:

   • Verwende eine reguläre Ausdruck /\d/g, um alle Ziffern in der Zeichenkette input_values zu finden.
   • Erstelle ein leeres Array uniqueNumbers, um die einzigartigen Zahlen zu speichern.
   • Iteriere über die gefundenen Zahlen und konvertiere sie zu ganzen Zahlen mit parseInt.
   • Überprüfe, ob die geparste Zahl eine gültige Zahl (nicht NaN) ist und noch nicht im Array uniqueNumbers enthalten ist.
   • Wenn die Zahl gültig und einzigartig ist, füge sie dem Array uniqueNumbers hinzu.
   • Gebe das Array uniqueNumbers zurück.

Implementiere die randomCoin - Funktion

In diesem Schritt wirst du die randomCoin - Funktion in der Datei js/findCoin.js implementieren.

1. Locate die randomCoin - Funktion:

   let randomCoin = () => {
     let randomNumArr = [];
     // TODO
     while (randomNumArr.length < 3) {
       const randomNumber = Math.floor(Math.random() * 9) + 1;
       if (!randomNumArr.includes(randomNumber)) {
         randomNumArr.push(randomNumber);
       }
     }
     return randomNumArr;
   };

2. Die randomCoin - Funktion sollte ein Array von 3 nicht wiederholenden Zufallszahlen zwischen 1 und 9 generieren.

3. Implementiere die randomCoin - Funktion, indem du folgendermaßen vorgehst:

   • Erstelle ein leeres Array randomNumArr, um die Zufallszahlen zu speichern.
   • Verwende eine while - Schleife, um 3 einzigartige Zufallszahlen zwischen 1 und 9 zu generieren.
   • Innerhalb der Schleife generiere eine Zufallszahl mit Math.floor(Math.random() * 9) + 1.
   • Überprüfe, ob die generierte Zahl nicht bereits im Array randomNumArr enthalten ist.
   • Wenn die Zahl einzigartig ist, füge sie dem Array randomNumArr hinzu.
   • Sobald das Array randomNumArr 3 einzigartige Zahlen enthält, gebe das Array zurück.

Nach Abschluss dieser Schritte sollte das "Rate die Münze" - Spiel voll funktionsfähig sein. Ein GIF aller abgeschlossenen Funktionen ist wie folgt:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.