Vue Memory Card Matching Game

Vue Memory Card Matching Game

View Demo

About The Project

This is a memory card matching game that showcases my mastery of Vue.js (version 3) and TypeScript. This is based off a tutorial from @bencodezen peek-a-vue project.

I also added the following to my project:

• TypeScript Declarations
• Camping theme for the cards and background image
• Web Accessibility
  • Made the back of the cards <button> elements so they can be accessed by the keyboard (tab and shift + tab)
  • The card button default state is disabled until the Start Game button is clicked
• Additional State
  • Displaying the total number of turns the player takes to to complete the game.

back to top

How to play

First, you must press the Start Game button.

The game board consists of sixteen cards arranged randomly in a 4x4 grid. The deck is made up of eight different pairs of camping themed cards. Each turn:

• A player flips one card over to reveal its underlying image
• The player then turns over a second card, trying to find the corresponding card with the same symbol
• If the cards match, both cards stay flipped over
• If the cards do not match, both cards are returned to their initial hidden state
• The game ends once all cards have been correctly matched (with a fun surprise)

back to top

Getting Started

Installation

1. Clone the repo

   git clone https://github.com/abuna1985/vue-memory-game.git

2. Install NPM packages

   npm install

3. Run develop environment (compiles and hot-reloads)

   npm run serve

Deployment

1. Create production build (Compiles and minifies to HTML/CSS/JavaScript)

   npm run build

2. Create gh-pages branch (only needs to done once)

   git branch gh-pages

3. move the contents of the dist folder to the gh-pages branch

   npm run deploy

Run Unit Tests

npm run test:unit

Lints And Fix Files

npm run lint

Customize Configuration

See Configuration Reference.

back to top

Usage

Click here to see a desktop screenshot of the game

Desktop Screenshot of the Vue Memory Game

Click here to see a mobile screenshot of the game

Mobile Screenshot of the Vue Memory Game

back to top

Roadmap

• Add Toggle button to switch to a 2nd theme
• A choice of grids before the games start
  • 4x4
  • 4x5
  • 4x6

back to top

License

Distributed under the MIT License. See LICENSE.txt for more information.

back to top)

Contact

Adam Abundis - @adamabundis - [email protected]

Demo Link: https://abuna1985.github.io/vue-memory-game/

back to top

Acknowledgments

• Vue.js v3 documentation
• @bencodezen - Peek A Vue repo
• Youtube - Peek A Vue
• Youtube- Modus Create - Vue 3 Hooks and Type Safety with TypeScript
• Youtube - Leveraging Types with TypeScript – Kirk Shillingford – Virtual Coffee Brownbag

back to top