The Memoire

GIF
GIF Demo

Inspiration

I wanted to make something simple as my knowledge with HTML, CSS and JavaScript is very bare-bones, I remembered playing this type of game with my friends a couple of weeks ago, so i decided to rehash the idea

What it does

It's a simple memory game where you have to flip 2 identical cards from the board. As the cards are shuffled onto the board, it becomes challenging to remember where each card is located.

How we built it

HTML was the skeleton, CSS was the clothes and the muscle and JS was the brains. The program really is mainly JS with its logic.

The script remembers what card was clicked and edits the CSS to flip the card to show the data on it (the emoji). Once 2 cards have been flipped, it checks if both the values in the card are equal? If not, it edits the CSS to flip the cards back. The board is locked when checking so no additional cards can be clicked.

It also shuffles the cards along with playing sound effects to make it more immersive.

Challenges we ran into

As someone who had little knowledge of JS when i began this project, i had to learn how to implement what i wanted and where i wanted. Also had to fix a bug that if too many cards were clicked in a short period of time, the game would basically break and leave a card flipped forever and not be able to be interacted with, so i had to learn how to lock the board.

Accomplishments that we're proud of

The animated background and the implementation of the logic of the game, it really makes me proud how i was able to create a game from a language that i had little knowledge about. The sound effects are my favorite thing that i did, it just made the game 10x better