DEMO AO VIVO: - Jogo Emoji

Link ao vivo: https://emojigame1.netlify.app/
Nesta tarefa vamos construir um Jogo Emoji

Consulte a imagem abaixo:

consulte o link para entender o aplicativo - https://assets.ccbp.in/frontend/content/react-js/emoji-game-output.gif -

Arquivos de projeto

Extra Pequeno (Tamanho < 576px), Pequeno (Tamanho >= 576px) - saída
Extra Pequeno (Tamanho < 576px), Pequeno (Tamanho >= 576px) - jogo ganho
Extra Pequeno (Tamanho <576px), Pequeno (Tamanho >= 576px) - perde o jogo
Médio (Tamanho >= 768px), Grande (Tamanho >= 992px) e Extra Grande (Tamanho >= 1200px) - saída
Médio (Tamanho >= 768px), Grande (Tamanho >= 992px) e Extra Grande (Tamanho >= 1200px) - jogo ganho
Médio (Tamanho >= 768px), Grande (Tamanho >= 992px) e Extra Grande (Tamanho >= 1200px) - perca o jogo

Instruções de configuração do projeto

Baixe dependências executando npm install
Inicie o aplicativo usando npm start

Instruções para conclusão do projeto

Adicionar funcionalidade

O aplicativo deve ter as seguintes funcionalidades

A pontuação e a pontuação total do jogo atual devem ser 0 inicialmente.
Quando um Emoji é clicado
- Se o emoji clicado não for igual a nenhum dos emojis clicados anteriormente, a pontuação deverá ser aumentada em 1 .
- Se todos os emojis forem clicados exatamente uma vez
  - O status do jogo junto com a melhor pontuação e o botão Jogar novamente devem ser exibidos conforme mostrado no arquivo de design (próprio jogo) .
  - A melhor pontuação deve ser igual à pontuação máxima .
- Se o emoji clicado for igual a qualquer um dos emojis clicados anteriormente
  - O status do jogo junto com a pontuação atual e o botão Jogar novamente devem ser exibidos conforme mostrado no arquivo de design (jogo perdido) .
  - Se a pontuação alcançada no jogo atual for superior às pontuações anteriores, a pontuação máxima deverá ser atualizada de acordo.
Quando o botão Jogar novamente for clicado, poderemos jogar o jogo novamente.
O botão Jogar novamente deve reiniciar o jogo e a pontuação, mas não o valor da pontuação máxima .
A lista de emojis é passada para o componente EmojiGame como uma prop emojisList na forma de um objeto array.
Cada objeto emoji terá as seguintes propriedades
Chave Tipo de dados
eu ia Número
emojiNome Corda
emojiUrl Corda
O valor do id da chave no objeto emoji deve ser usado como chave para o componente EmojiCard .
O valor da chave emojiName no objeto emoji deve ser usado como texto alternativo para a imagem emoji .
Sua tarefa é concluir a implementação 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

Dicas rápidas

A propriedade CSS do cursor define o tipo de cursor do mouse, se houver, para mostrar quando o ponteiro do mouse está sobre um elemento. Use o cursor de propriedade CSS com um pointer de valor para indicar um link. Clique aqui para saber mais.
Um contorno é uma linha desenhada ao redor de um elemento, fora da borda. A propriedade abreviada CSS do contorno define todas as propriedades do contorno. Use o outline da propriedade CSS com valor none para ocultar todas as propriedades do contorno. Clique aqui para saber mais.

Recursos

Imagens

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