raghavrover/match-game

Play the game by selecting the matching thumbnail to the main image

In this project, I've built a image Match Game by applying react concepts Components, Component Life Cycle methods Constructor, render, ComponentDidMount and shcedulers to a set timer.

Design Files on Different Devices

Click to view

• Extra Small (Size < 576px) and Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Match Game
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Scorecard

Functionalities Added

Clcik to view

The app has the following functionalities

• Initially,

  • Score is 0 and timeer is 60 sec
  • The Fruits tab is the active tab and the thumbnails with FRUIT as their category will be displayed

• The timer will start running backwards from the 60 sec

• When a tab is clicked, then the thumbnails in the corresponding category will be displayed

• When a thumbnail is clicked, if that is matched with the image to be matched,

  • Score is incremented by one
  • The new image to be matched will be generated randomly among the value of the key imageUrl from imagesList provided

• When a thumbnail is clicked, if it is not matched with the image to be matched,

  • The game will end, and the total score view will be displayed
  • When PLAY AGAIN button is clicked, then we will be able to play the game again
    • The score and time values will be reset to 0 and 60 sec respectively
    • The image to be matched will reset to the value of the key imageUrl from the first object in imagesList provided
    • The active tab will reset to Fruits, and the thumbnails with FRUIT as their category will be displayed

• When the timer reaches 0 sec, then the game will end, and the total score view will be displayed

• The App is provided with tabsList. It consists of a list of tabItem objects with the following properties in each tabItem object

  Key	Data Type
  tabId	String
  displayText	String

• The App is provided with imagesList. It consists of a list of imageItem objects with the following properties in each imageItem object

  Key	Data Type
  id	String
  imageUrl	String
  thumbnailUrl	String
  category	String

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/match-game-bg.png
• https://assets.ccbp.in/frontend/react-js/match-game-score-card-lg-bg.png
• https://assets.ccbp.in/frontend/react-js/match-game-score-card-sm-bg.png
• https://assets.ccbp.in/frontend/react-js/match-game-website-logo.png
• https://assets.ccbp.in/frontend/react-js/match-game-timer-img.png- https://assets.ccbp.in/frontend/react-js/match-game-play-again-img.png
• https://assets.ccbp.in/frontend/react-js/match-game-trophy.png

Colors

Hex: #2c0e3a

Hex: #ffffff

Hex: #fec653

Hex: #cf60c8

Font-families

• Roboto