LIVE-DEMO: - Emoji-Spiel

Live-Link: https://emojigame1.netlify.app/
In dieser Aufgabe erstellen wir ein Emoji-Spiel

Siehe Bild unten:

Verweisen Sie auf den Link, um die Anwendung zu verstehen – https://assets.ccbp.in/frontend/content/react-js/emoji-game-output.gif –

Designdateien

Extra klein (Größe < 576 Pixel), Klein (Größe >= 576 Pixel) – Ausgabe
Extra klein (Größe < 576 Pixel), klein (Größe >= 576 Pixel) – gewonnenes Spiel
Extra klein (Größe < 576 Pixel), klein (Größe >= 576 Pixel) – Spiel verlieren
Mittel (Größe >= 768 Pixel), Groß (Größe >= 992 Pixel) und Extra Groß (Größe >= 1200 Pixel) – Ausgabe
Mittel (Größe >= 768 Pixel), Groß (Größe >= 992 Pixel) und Extra Groß (Größe >= 1200 Pixel) – gewonnenes Spiel
Mittel (Größe >= 768 Pixel), Groß (Größe >= 992 Pixel) und Extra Groß (Größe >= 1200 Pixel) – Spiel verlieren

Anweisungen zur Projekteinrichtung

Laden Sie Abhängigkeiten herunter, indem Sie npm install ausführen
Starten Sie die App mit npm start

Anweisungen zum Projektabschluss

Funktionalität hinzufügen

Die App muss über die folgenden Funktionalitäten verfügen

Die Punktzahl und die Gesamtpunktzahl für das aktuelle Spiel sollten zunächst 0 sein.
Wenn ein Emoji angeklickt wird
- Wenn das angeklickte Emoji nicht mit einem der zuvor angeklickten Emojis übereinstimmt, sollte die Punktzahl um 1 erhöht werden.
- Wenn alle Emojis genau einmal angeklickt werden
  - Der Spielstatus sollte zusammen mit der besten Punktzahl und der Schaltfläche „Erneut spielen“ wie in der Designdatei (spieleigene) angezeigt werden.
  - Die beste Punktzahl sollte der höchsten Punktzahl entsprechen.
- Wenn das angeklickte Emoji mit einem der zuvor angeklickten Emojis identisch ist
  - Der Spielstatus sollte zusammen mit dem aktuellen Punktestand und der Schaltfläche „Erneut spielen“ wie in der Designdatei angezeigt werden (Spiel verloren) .
  - Wenn der im aktuellen Spiel erzielte Punktestand höher ist als der vorherige Punktestand, sollte der Top-Score entsprechend aktualisiert werden.
Wenn dann auf die Schaltfläche „Erneut spielen“ geklickt wird, sollten wir das Spiel erneut spielen können.
Die Schaltfläche „Erneut spielen“ sollte das Spiel und den Punktestand zurücksetzen, nicht jedoch den Höchstpunktzahlwert .
Die Liste der Emojis wird als Prop emojisList in Form eines Array-Objekts an die EmojiGame -Komponente übergeben.
Jedes Emoji-Objekt verfügt über die folgenden Eigenschaften
Schlüssel Datentyp
Ausweis Nummer
EmojiName Zeichenfolge
emojiUrl Zeichenfolge
Der Wert der Schlüssel- id im Emoji-Objekt sollte als Schlüssel für die EmojiCard Komponente verwendet werden.
Der Wert des Schlüssels emojiName im Emoji-Objekt sollte als Alternativtext zum emoji Bild verwendet werden.
Ihre Aufgabe ist es, die Implementierung abzuschließen
- src/components/EmojiGame/index.js
- src/components/EmojiGame/index.css
- src/components/NavBar/index.js
- src/components/NavBar/index.css
- src/components/EmojiCard/index.js
- src/components/EmojiCard/index.css
- src/components/WinOrLoseCard/index.js
- src/components/WinOrLoseCard/index.css

Schnelle Tipps

Die CSS-Eigenschaft „cursor“ legt den Typ des Mauszeigers (falls vorhanden) fest, der angezeigt wird, wenn sich der Mauszeiger über einem Element befindet. Verwenden Sie den CSS-Eigenschaftscursor mit einem pointer um einen Link anzuzeigen. Klicken Sie hier, um mehr zu erfahren.
Ein Umriss ist eine Linie, die um ein Element außerhalb des Rahmens gezogen wird. Die CSS-Kurzschrifteigenschaft „outline“ legt alle Outline-Eigenschaften fest. Verwenden Sie die CSS-Eigenschaft outline mit dem Wert none , um alle Outline-Eigenschaften auszublenden. Klicken Sie hier, um mehr zu erfahren.

Ressourcen

Bilder

https://assets.ccbp.in/frontend/react-js/game-logo-img.png
https://assets.ccbp.in/frontend/react-js/face-with-stuck-out-tongue-img.png
https://assets.ccbp.in/frontend/react-js/face-with-head-bandage-img.png
https://assets.ccbp.in/frontend/react-js/face-with-hugs-img.png
https://assets.ccbp.in/frontend/react-js/face-with-laughing-img.png
https://assets.ccbp.in/frontend/react-js/face-with-laughing-with-hand-infront-mouth-img.png
https://assets.ccbp.in/frontend/react-js/face-with-mask-img.png
https://assets.ccbp.in/frontend/react-js/face-with-silence-img.png
https://assets.ccbp.in/frontend/react-js/face-with-stuck-out-tongue-and-winking-eye-img.png
https://assets.ccbp.in/frontend/react-js/grinning-face-with-sweat-img.png
https://assets.ccbp.in/frontend/react-js/smiling-face-with-heart-eyes-img.png
https://assets.ccbp.in/frontend/react-js/grinning-face-img.png
https://assets.ccbp.in/frontend/react-js/smiling-face-with-star-eyes-img.png
https://assets.ccbp.in/frontend/react-js/won-game-img.png
https://assets.ccbp.in/frontend/react-js/lose-game-img.png