https://github.com/janicemv/memory-game

Practicing Javascript by creating a memory game
https://github.com/janicemv/memory-game

bootstrap javascript modules object-oriented-programming vanilla-javascript vanilla-js

Last synced: 4 days ago
JSON representation

Practicing Javascript by creating a memory game

• Host: GitHub
• URL: https://github.com/janicemv/memory-game
• Owner: janicemv
• Created: 2024-12-16T13:33:28.000Z (9 days ago)
• Default Branch: main
• Last Pushed: 2024-12-16T14:56:11.000Z (8 days ago)
• Last Synced: 2024-12-16T15:50:18.305Z (8 days ago)
• Topics: bootstrap, javascript, modules, object-oriented-programming, vanilla-javascript, vanilla-js
• Language: JavaScript
• Homepage: https://janicemv.github.io/memory-game/
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Memory Game

This project is a modular and interactive memory game built with JavaScript, HTML, and CSS. The game consists of a grid of cards, and the goal is to match pairs of cards by flipping them over. Once all the pairs are matched, a completion screen is displayed.

## Features

- **Dynamic Grid Sizes**: Players can choose the size of the grid (e.g., 2x2, 4x4, 6x6, 8x8).

- **Modular Design**: The project is organized into classes for scalability and maintainability.

  - `Board`: Responsible for creating and managing the game board.

  - `MemoryGame`: Manages the game logic, such as flipping cards, checking for matches, and tracking progress.

- **Completion Overlay**: A completion image is displayed when all cards are matched.

- **Responsive Design**: The game is designed to work across various screen sizes. It works better in bigger screens at the moment.

## How It Works

### Classes

1. **Board**

   - Generates a grid of cards based on the selected size.

   - Randomly assigns pairs of images to cards.

   - Ensures the board layout is properly styled.

2. **MemoryGame**

   - Handles game logic, including:

     - Flipping cards.

     - Checking for matches.

     - Resetting unmatched cards.

   - Tracks progress and detects when the game is complete.

   - Displays a completion overlay when all pairs are found.

### User Interaction

1. The user selects a grid size (e.g., 4x4).

2. The game board is dynamically generated with shuffled cards.

3. The user clicks on cards to flip them and find matching pairs.

4. The game ends when all pairs are matched, and a completion screen is displayed.

## Technologies Used

- **HTML5**: For the game’s structure.

- **CSS3 and Bootstrap**: For styling the game board and cards.

- **JavaScript (ES6)**: For game logic and interactivity.

## Future Improvements

- Make sure the card divs are always square

- Make game div fit screen

## Acknowledgments

- Images used for the cards are my own creation and should be replaced with appropriate assets if published.

- Stellar glyphs are mostly from [Raven Grimassi's Hereditary Witchcraft: Secrets of the Old Religion](https://amzn.to/3ZTstg9).

---

Enjoy playing the Memory Game and feel free to contribute or provide feedback!