Skip to content

Memo Game - the goal is to match pairs of cards! Choose the category and amount of cards and improve your memory in this fun way! This game uses images from the Pexels API.

Notifications You must be signed in to change notification settings

kepkaklaudia/memo-game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Memo Game Website

Made by Klaudia Kępka

Memo Game Demo Website:

Memo Game Demo Website

Quick Preview

gifPreview

About the building process

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.

How to play?

Settings Menu

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!

Game Rules

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!

Responsive version

You can play on your computer, tablet or phone. Feel free!

API Data

The game uses images fetched from the Pexels API.

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

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.

Technologies used

About

Memo Game - the goal is to match pairs of cards! Choose the category and amount of cards and improve your memory in this fun way! This game uses images from the Pexels API.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published