现场演示：- 表情符号游戏

实时链接：https://emojigame1.netlify.app/
在这个作业中，我们来构建一个表情符号游戏

参考下图：

请参阅链接以了解应用程序 - https://assets.ccbp.in/frontend/content/react-js/emoji-game-output.gif -

设计文件

超小（尺寸 < 576 像素）、小（尺寸 >= 576 像素）- 输出
特小号（尺寸 < 576 像素）、小号（尺寸 >= 576 像素）- 赢得比赛
特小（尺寸 < 576 像素）、小（尺寸 >= 576 像素）- 输掉比赛
中（尺寸 >= 768 像素）、大（尺寸 >= 992 像素）和超大（尺寸 >= 1200 像素）- 输出
中号（尺寸 >= 768 像素）、大号（尺寸 >= 992 像素）和超大号（尺寸 >= 1200 像素）- 赢得比赛
中号（尺寸 >= 768 像素）、大号（尺寸 >= 992 像素）和超大号（尺寸 >= 1200 像素）- 输掉比赛

项目设置说明

通过运行npm install下载依赖项
使用npm start启动应用程序

项目完成说明

添加功能

该应用程序必须具有以下功能

当前游戏的得分和总得分最初应为0 。
单击表情符号时
- 如果单击的表情符号与之前单击的任何表情符号不同，则分数应增加1 。
- 如果所有表情符号都被点击一次
  - 游戏状态以及最佳得分和重玩按钮应如设计文件（游戏自己的）中所示显示。
  - 最佳分数应等于最高分数。
- 如果单击的表情符号与之前单击的任何表情符号相同
  - 游戏状态以及当前得分和重玩按钮应如设计文件中所示显示（游戏失败） 。
  - 如果当前比赛的得分高于之前的得分，则最高得分应相应更新。
当单击“再次玩”按钮时，我们应该能够再次玩游戏。
“重玩”按钮应重置游戏和得分，但不会重置最高得分值。
表情符号列表以数组对象的形式作为 prop emojisList传递给EmojiGame组件。
每个表情符号对象将具有以下属性
钥匙数据类型
ID 数字
表情符号名称细绳
表情符号网址细绳
emoji 对象中的键id的值应用作EmojiCard组件的键。
表情符号对象中键emojiName的值应用作emoji图像的替代文本。
你的任务是完成实施
- 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

快速提示

CSS 光标属性设置鼠标光标的类型（如果有），以在鼠标指针位于元素上方时显示。使用带有值pointer CSS 属性光标来指示链接。单击此处了解更多信息。
轮廓是在边框之外围绕元素绘制的线。轮廓 CSS 简写属性设置所有轮廓属性。使用值为none CSS 属性outline来隐藏所有轮廓属性。单击此处了解更多信息。

资源

图片

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