Image Match Game

A dynamic image matching card game
Explore the docs »
Check it out! »

Table of Contents

1. About The Project
   • Built With
2. Setup
3. Usage
4. Notes
5. Roadmap
6. Contact

About The Project

This web application was created in order to learn a new JavaScript Framework (Vue), while creating a game that would be fun and relaxing to play.

Built With

• 
• 
• 
• 
• 

(back to top)

Setup

• Clone the repository to your local machine by following instructions here
• Install dependencies:

npm i

• Start the project

npm run dev

Note: in order to utilize the dynamic images, you will need API credentials, which can be obtained here

Then create up a local .env file in the root of the project:

touch .env

and add the follwing to the .env file:

VITE_APP_API_KEY=[YOUR-API-KEY-HERE]

(back to top)

Usage

• Click cards to try and find matches
• If cards match, they will remain face up, and Matches count will increase
• If cards do not match, they will flip face down again
• Upon winning, please try again!
• New card are added periodically, for a dynamic experience!
• To play, please visit the deployed site

(back to top)

Notes

After being accustomed to using React, I decided to try using a new framework (Vue). There is still much I have to learn about Vue, but I'm happy that I was able to turn an idea into a working game.

Functionality includes...

• Card flipping animations
• Dynamic images for cards
• Tracking card matches for player feedback
• Default cards will be used, if unable to get cards from the Pexels API
• Responsiveness across devices

Wins:

• Meeting and exceeding MVP (Minimum Viable Product)
• Animations
• Responsiveness

Challenges:

• Learning Vue
• Animations
• Responsiveness

(back to top)

Roadmap

• Refactoring
• Testing
• Improved styling
• Improved accessibility

(back to top)

Contact

API Used

• pexels.com was used for this project

Credits

• Background Image by Sebastian Unrau on Unsplash
• Card Face Down Image by Alexander Tsang on Unsplash

(back to top)