現場示範：- 表情符號遊戲

即時連結：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