emoji game react 15

ЖИВАЯ ДЕМО: - Игра Emoji

• Живая ссылка: 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 .

  • Если на все смайлы нажать ровно один раз

    • Статус игры вместе с кнопками «Лучший результат» и «Играть снова» должен отображаться так, как показано в файле дизайна (собственно игры) .
    • Лучший результат должен быть равен высшему баллу .

  • Если выбранный смайлик совпадает с любым из ранее нажатых смайлов

    • Статус игры вместе с текущим счетом и кнопкой «Играть снова» должен отображаться так, как показано в файле дизайна (проигрыш игры) .

    • Если результат, достигнутый в текущей игре, выше, чем в предыдущих, то лучший результат должен быть соответствующим образом обновлен.

• После нажатия кнопки «Играть снова» мы сможем снова сыграть в игру.

• Кнопка «Играть еще раз» должна сбросить игру и результат, но не значение максимального результата .

• Список смайлов передается компоненту EmojiGame как свойство emojisList в форме объекта массива.

• Каждый объект эмодзи будет иметь следующие свойства

  Ключ	Тип данных
  идентификатор	Число
  имя эмодзи	Нить
  emojiURL	Нить

• Значение id ключа в объекте emoji следует использовать в качестве ключа для компонента EmojiCard .

• Значение ключа emojiName в объекте emoji следует использовать в качестве замещающего текста для изображения 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 Outline устанавливает все свойства Outline. Используйте outline свойства CSS со значением none чтобы скрыть все свойства структуры. Нажмите здесь, чтобы узнать больше.

Ресурсы

Изображения

• 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

Цвета

Шестнадцатеричный: #6a59ff

Шестнадцатеричное выражение: #ffffff

Шестнадцатеричный: #3d3d3d

Цвета фона

Шестнадцатеричный: #9796f0

Шестнадцатеричный: #fbc7d4

Шестнадцатеричное: #ffffff33

Шестнадцатеричное: #ffce27

Цвета границ

Шестнадцатеричное: #ffffff30

Семейства шрифтов

• Робото

###Приложение полностью адаптивное (респонсивный веб-дизайн)