I was exploring how the reactivity works and how to divide tasks to different components. I discovered more about fetching data from api and about passing props. I used styled-components to make the game look exactly how I want it.
During the logical part of the game i was coding along the YouTube Tutorial video. I saw how much attention should be paid to every detail because the logic of even a simple game can be complex to be transferred to React.
After entering the page, you will see the settings - you can choose the theme of the pictures and the number of cards you want to play. By default we have "space" theme and 8 cards. After pressing the START button, the game begins!
The game starts with all the cards face down and player must turn over two cards at a time. If the two cards have the same picture, then the pictures match, so the cards will flip over, turn darker, and you won't be able to click them. You win if you match all the pictures. After winning, you will see the relevant information and the FINISH GAME button, which will take you back to the start screen. Then you can start the game again!
You can play on your computer, tablet or phone. Feel free!
The game uses images fetched from the Pexels API.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.