Skip to content

anabeeella/memo-game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎮 Memory Game 🎮

This is a memory game implemented using HTML, CSS, and JavaScript. The game features dynamic card creation, randomized card distribution, a move counter, a timer, feedback messages, sound effects, and custom styles.

Project Description

This project is a web-based memory game where players are challenged to match pairs of cards with identical symbols. The game was built as a fun and interactive way to test and improve memory skills.

Process of Creation

1. 🪄 Dynamic Card Creation

  • Implemented JavaScript functions to dynamically create card elements based on a predefined set of symbols.
  • Each card contains a unique symbol, ensuring a diverse and challenging gameplay experience.

2. 🎴 Randomized Card Distribution

  • Developed a function to shuffle the array of card symbols, ensuring a random distribution of cards each time the game is played.
  • Used the Fisher-Yates shuffle algorithm to achieve randomness and prevent predictability.

3. ⌛ Move Counter and Timer

  • Added a move counter to track the number of moves made by the player.
  • Integrated a timer to measure the duration of each gameplay session. Implemented logic to update the display of moves and time in real-time.

4. 💬 Feedback Messages

  • Created feedback messages to provide instant feedback to the player based on their actions.
  • Included messages for successful matches, incorrect matches, level completion, and game over.

5. 🔔 Sound Effects

  • Enhanced the gaming experience with sound effects triggered by different game events.
  • Added sounds for card flips, successful matches, and game over.

6. 🎨 Custom Styles

  • Designed custom styles using CSS to create an appealing and intuitive user interface.
  • Incorporated animations and transitions to improve the visual aesthetics of the game.

Usage

To play the game, simply open the index.html file in your web browser. Follow the on-screen instructions to start a new game and test your memory skills! You can also follow this link: https://memo-game-by-anabeeella.netlify.app/

About

Memo Game - Card matching

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published