https://github.com/erickboyzo/memory-game
A modern and responsive web-based memory game built with SvelteKit and styled with Tailwind CSS. This project is a modern take on a classic game. Built with a clean, component-based design to make sure the gameplay is smooth and enjoyable.
https://github.com/erickboyzo/memory-game
ssr svelte sveltekit tailwind tailwindcss
Last synced: 8 months ago
JSON representation
A modern and responsive web-based memory game built with SvelteKit and styled with Tailwind CSS. This project is a modern take on a classic game. Built with a clean, component-based design to make sure the gameplay is smooth and enjoyable.
- Host: GitHub
- URL: https://github.com/erickboyzo/memory-game
- Owner: erickboyzo
- Created: 2025-08-06T15:05:21.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-16T09:53:19.000Z (10 months ago)
- Last Synced: 2025-09-10T07:34:52.421Z (9 months ago)
- Topics: ssr, svelte, sveltekit, tailwind, tailwindcss
- Language: Svelte
- Homepage: https://memory-game-bqk.pages.dev/
- Size: 93.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Memory Game
A classic memory card matching game built with SvelteKit and modern web technologies.
## Demo
**Live Demo**: [Memory Game](https://memory-game-bqk.pages.dev/)
## Game Rules
**Objective:** Match all pairs of cards in the fewest moves possible.
**How to Play:**
1. Choose your game settings:
- **Theme**: Numbers or Icons
- **Players**: 1-4 players
- **Grid Size**: 4x4 or 6x6
2. Click "Start Game" to begin
3. Click on cards to flip them over
4. Try to find matching pairs
5. When you find a match, those cards stay face up
6. Continue until all pairs are matched
7. The player with the most matches wins (multiplayer)
**Scoring:**
- Single Player: Complete the game in the fewest moves
- Multiplayer: Player with the most pairs wins
## Technology Stack
- **Framework**: [SvelteKit](https://kit.svelte.dev/)
- **Language**: TypeScript
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- **State Management**: Svelte Stores - Reactive state management
- **Build Tool**: [Vite](https://vitejs.dev/) - Fast build tool and dev server
- **Testing**: [Vitest](https://vitest.dev/) - Unit testing framework
- **Linting**: ESLint + Prettier - Code quality and formatting
## Development
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
### Available Scripts
```bash
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run test # Run tests
npm run lint # Check code quality
npm run format # Format code
```
## Acknowledgments
- Project inspired by [Frontend Mentor's](https://www.frontendmentor.io/challenges/memory-game-vse4WFPvM) Memory Game Challenge
- Icons provided by FontAwesome