emoji game react 15

ライブデモ:- 絵文字ゲーム

• ライブリンク: https://emojigame1.netlify.app/
  この課題では、絵文字ゲームを作成しましょう

以下の画像を参照してください。

アプリケーションを理解するにはリンクを参照してください -- https://assets.ccbp.in/frontend/content/react-js/emoji-game-output.gif --

デザインファイル

• 極小 (サイズ < 576px)、小 (サイズ >= 576px) - 出力
• 特小 (サイズ < 576px)、小 (サイズ >= 576px) - ゲームに勝ちました
• 極小 (サイズ < 576px)、小 (サイズ >= 576px) - ゲームに負けます
• 中 (サイズ >= 768px)、大 (サイズ >= 992px)、特大 (サイズ >= 1200px) - 出力
• 中 (サイズ >= 768px)、大 (サイズ >= 992px)、特大 (サイズ >= 1200px) - ゲームに勝ちました
• 中 (サイズ >= 768px)、大 (サイズ >= 992px)、特大 (サイズ >= 1200px) - ゲームに負けます

プロジェクトのセットアップ手順

• npm install実行して依存関係をダウンロードする
• npm start使用してアプリを起動します

プロジェクトの完了手順

機能の追加

アプリには次の機能が必要です

• 現在のゲームのスコアと合計スコアは、最初は0である必要があります。

• 絵文字をクリックしたとき

  • クリックされた絵文字が以前にクリックされた絵文字のどれとも同じでない場合、スコアは1増加する必要があります。

  • すべての絵文字が 1 回だけクリックされた場合

    • デザイン ファイル (ゲーム自体)に示されているように、ゲーム ステータスとベスト スコアおよび再プレイボタンが表示されます。
    • Best スコアはTop Scoreと同じである必要があります。

  • クリックした絵文字が以前にクリックした絵文字のいずれかと同じ場合

    • ゲームのステータスと現在のスコアおよび再プレイボタンがデザイン ファイルに示されているように表示されます (ゲームの敗北) 。

    • 現在のゲームで達成されたスコアが以前のスコアより高い場合は、それに応じてトップ スコアを更新する必要があります。

• [Play Again]ボタンをクリックすると、ゲームを再度プレイできるようになります。

• [もう一度プレイ]ボタンをクリックすると、ゲームとスコアがリセットされますが、トップ スコアの値はリセットされません。

• 絵文字のリストは、配列オブジェクトの形式のプロップemojisListとしてEmojiGameコンポーネントに渡されます。

• 各絵文字オブジェクトには次のプロパティがあります。

  鍵	データ型
  ID	番号
  絵文字名	弦
  絵文字URL	弦

• 絵文字オブジェクトのキー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 のカーソル プロパティは、マウス ポインターが要素上にあるときに表示されるマウス カーソルのタイプを設定します (存在する場合)。リンクを示すには、CSS プロパティ カーソルを値pointerとともに使用します。詳細については、これをクリックしてください。

• アウトラインは、要素の周囲、境界線の外側に引かれる線です。アウトライン 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

色

16 進数: #6a59ff

16 進数: #ffffff

16 進数: #3d3d3d

背景色

16 進数: #9796f0

16 進数: #fbc7d4

16 進数: #ffffff33

16 進数: #ffce27

枠線の色

16 進数: #ffffff30

フォントファミリー

• ロボト

###アプリケーションは完全にレスポンシブです (レスポンシブ Web デザイン)