burzum / vue-memory-game

A tiny game written in vue. It's inspired by IgorMinar's Memory-Game

Home Page:https://leftstick.github.io/vue-memory-game

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue-memory-game

A tiny game written in vue3. It's inspired by IgorMinar's Memory-Game. You can view the online demo here.

If you are looking for angular5 version, check it here

If you are looking for react version, check it here

vite is involved as build tool here.

Components Tree

Components break down

  1. Game, the whole game board
  2. ScoreBoard, the panel on the top, including "Logo", "Progress", "Highest Record"
  3. Logo, on the left of ScoreBoard, showing the game Logo
  4. Progress, on the center of ScoreBoard, showing the current matching information
  5. Score, on the right of ScoreBoard, showing the best result
  6. ChessBoard, on the center of Game, the playing area
  7. Card, each card in the Chessboard
  8. GameStatus, the footer part, displaying current status of game

File Structure

vue-memory-game
├── src
|   ├── assets
|   |   ├── 8-ball.png
|   |   ├── ...
|   |   └── zeppelin.png
│   │
│   ├── components
│   │   ├── ChessBoard
│   │   │   ├── Card.vue
│   │   │   └── index.vue
│   │   ├── ScoreBoard
│   │   │   ├── index.vue
│   │   │   ├── Logo.vue
│   │   │   ├── Progress.vue
│   │   │   └── Score.vue
│   │   ├── GameStatus.vue
│   │   └── Game.vue
│   │
│   ├── stores
│   │   ├── CountTimer.ts
│   │   ├── GameStore.ts
│   │   └── index.ts
│   │
│   ├── Game.vue
│   ├── IType.ts
│   ├── main.ts
│   ├── shims-vue.d.ts
│   └── vite-env.d.ts
│
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Detail Explanation?

Want Having a try locally?

Running Environment

Recommended Editor

#cloning code
git clone https://github.com/leftstick/vue-memory-game.git
cd vue-memory-game

#install dependencies
yarn
#start debug server
yarn start

Now, view the demo at http://localhost:3000/vue-memory-game/

LICENSE

MIT License

About

A tiny game written in vue. It's inspired by IgorMinar's Memory-Game

https://leftstick.github.io/vue-memory-game

License:MIT License


Languages

Language:Vue 66.6%Language:TypeScript 31.2%Language:HTML 2.2%