Skip to content

Experience the captivating Vue Memory Game, meticulously crafted with Vue and TypeScript. Sharpen your memory by matching pairs of cards in this immersive gaming adventure. Play now!

License

Notifications You must be signed in to change notification settings

abuna1985/vue-memory-game

Repository files navigation

Vue Memory Card Matching Game

GitHub package.json dependency version (prod) GitHub package.json dependency version (dev dep on branch) GitHub commits GitHub stars GitHub watchers License: MIT

Logo

Vue Memory Card Matching Game

View Demo

About The Project


Vue Memory Game Desktop View

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

back to top

About

Experience the captivating Vue Memory Game, meticulously crafted with Vue and TypeScript. Sharpen your memory by matching pairs of cards in this immersive gaming adventure. Play now!

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published