DÉMO EN DIRECT : - Jeu Emoji

Lien en direct : https://emojigame1.netlify.app/
Dans ce devoir, créons un jeu Emoji

Reportez-vous à l'image ci-dessous :

reportez-vous au lien pour comprendre l'application -- https://assets.ccbp.in/frontend/content/react-js/emoji-game-output.gif --

Fichiers de conception

Extra petit (taille < 576 px), petit (taille >= 576 px) – sortie
Extra Small (Taille < 576px), Small (Taille >= 576px) - partie gagnée
Extra Small (Taille < 576px), Small (Taille >= 576px) - perdre la partie
Moyen (Taille >= 768px), Grand (Taille >= 992px) et Extra Large (Taille >= 1200px) - sortie
Medium (Taille >= 768px), Large (Taille >= 992px) et Extra Large (Taille >= 1200px) - partie gagnée
Medium (Taille >= 768px), Large (Taille >= 992px) et Extra Large (Taille >= 1200px) - perdez la partie

Instructions de configuration du projet

Téléchargez les dépendances en exécutant npm install
Démarrez l'application en utilisant npm start

Instructions d'achèvement du projet

Ajouter des fonctionnalités

L'application doit avoir les fonctionnalités suivantes

Le score et le score total du jeu en cours doivent être initialement 0 .
Lorsqu'un Emoji est cliqué
- Si l'emoji cliqué n'est pas le même que l'un des emojis cliqués précédemment, le score doit être augmenté de 1 .
- Si tous les emojis sont cliqués exactement une fois
  - L' état du jeu ainsi que le bouton Meilleur score et Rejouer doivent être affichés comme indiqué dans le fichier de conception (propre au jeu) .
  - Le meilleur score doit être égal au meilleur score .
- Si l'emoji cliqué est le même que l'un des emojis cliqués précédemment
  - L' état du jeu ainsi que le score actuel et le bouton Rejouer doivent être affichés comme indiqué dans le fichier de conception (jeu perdu) .
  - Si le score obtenu dans le jeu en cours est supérieur aux scores précédents, le meilleur score doit être mis à jour en conséquence.
Lorsque vous cliquez sur le bouton Rejouer , nous devrions pouvoir rejouer au jeu.
Le bouton Rejouer devrait réinitialiser le jeu et le score, mais pas la valeur du meilleur score .
La liste des emojis est transmise au composant EmojiGame en tant que prop emojisList sous la forme d'un objet tableau.
Chaque objet emoji aura les propriétés suivantes
Clé Type de données
identifiant Nombre
nomemoji Chaîne
URLemoji Chaîne
La valeur de l' id de clé dans l'objet emoji doit être utilisée comme clé du composant EmojiCard .
La valeur de la clé emojiName dans l'objet emoji doit être utilisée comme texte alternatif pour l'image emoji .
Votre tâche consiste à achever la mise en œuvre de
- 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

Conseils rapides

La propriété CSS curseur définit le type de curseur de la souris, le cas échéant, à afficher lorsque le pointeur de la souris est sur un élément. Utilisez le curseur de propriété CSS avec un pointer de valeur pour indiquer un lien. Cliquez ici pour en savoir plus.
Un contour est une ligne tracée autour d’un élément, en dehors de la bordure. La propriété raccourcie CSS outline définit toutes les propriétés du outline. Utilisez la propriété CSS outline avec la valeur none pour masquer toutes les propriétés du outline. Cliquez ici pour en savoir plus.

Ressources

Images

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