Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

A responsive/web-accessible memory card matching game built in Vue.js (v3) and TypeScript.
https://github.com/abuna1985/vue-memory-game

css game responsive single-page-app typescript vue vuejs web-accessibility

Last synced: about 2 months ago
JSON representation

A responsive/web-accessible memory card matching game built in Vue.js (v3) and TypeScript.

Host: GitHub
URL: https://github.com/abuna1985/vue-memory-game
Owner: abuna1985
License: mit
Created: 2022-04-23T02:35:37.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-09-09T07:12:08.000Z (about 2 years ago)
Last Synced: 2023-03-08T10:41:09.475Z (over 1 year ago)
Topics: css, game, responsive, single-page-app, typescript, vue, vuejs, web-accessibility
Language: Vue
Homepage: https://abuna1985.github.io/vue-memory-game/
Size: 1.85 MB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.txt

Awesome Lists containing this project

README

        


# Vue Memory Card Matching Game

[![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/abuna1985/vue-memory-game/vue?color=green)](https://vuejs.org/)

[![GitHub package.json dependency version (dev dep on branch)](https://img.shields.io/github/package-json/dependency-version/abuna1985/vue-memory-game/dev/typescript?color=green)](https://www.typescriptlang.org/)

[![GitHub commits](https://badgen.net/github/commits/abuna1985/vue-memory-game/main?color=green)](https://github.com/abuna1985/vue-memory-game/commits/)

[![GitHub stars](https://badgen.net/github/stars/abuna1985/vue-memory-game?color=green)](https://github.com/abuna1985/vue-memory-game/stargazers/)

[![GitHub watchers](https://badgen.net/github/watchers/abuna1985/vue-memory-game?color=green)](https://github.com/abuna1985/vue-memory-game/watchers/)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)






  

    

  

  
Vue Memory Card Matching Game


  


    View Demo

  



## About The Project




![Vue Memory Game Desktop View](./images/vue-memory-game-desktop.jpg)

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](https://github.com/bencodezen/peek-a-vue). 

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 `` 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

    ```sh

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

    ```

2. Install NPM packages

    ```sh

    npm install

    ```

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

    ```sh

    npm run serve

    ```

### Deployment

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

    ```sh

    npm run build

    ```

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

    ```sh

    git branch gh-pages

    ```

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

    ```sh

    npm run deploy

    ```

### Run Unit Tests

```sh

npm run test:unit

```

### Lints And Fix Files

```sh

npm run lint

```

### Customize Configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

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

  - [x] 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](https://twitter.com/adamabundis) - [email protected]

Demo Link: [https://abuna1985.github.io/vue-memory-game/](https://abuna1985.github.io/vue-memory-game/)

back to top

## Acknowledgments

* [Vue.js v3 documentation](https://vuejs.org/)

* [@bencodezen - Peek A Vue repo](https://github.com/bencodezen/peek-a-vue)

* [Youtube - Peek A Vue](https://youtu.be/WQa9-4K3me4)

* [Youtube- Modus Create - Vue 3 Hooks and Type Safety with TypeScript](https://youtu.be/aJdi-uEKYAc)

* [Youtube - Leveraging Types with TypeScript – Kirk Shillingford – Virtual Coffee Brownbag](https://youtu.be/IDLwHFwgNY4)

back to top