Memory Game built with jQuery

Benjamin Cunningham
letsboot
Published in
2 min readFeb 13, 2018

--

As a great fun challenge I wrote a jQuery based memory game as part of our Udacity Front End Web Developer nanodegree. I actually prefer Angular for such apps but jQuery is a good start to get the JavaScript fundamentals right.

Memory Game Interface

In this project, I had to create a memory game with 16 cards of 8 different symbols. The goal of the game was to match two equal cards, have them stay open, change color and to continue this way until all cards have been matched together. Some other additions that were needed included a reset button that can be clicked at anytime to reset the game, a timer that would start as soon as the game is loaded, and a score depending on how many moves it took to finish the game.

Memory Game explained

The following code enables the user to click on each card and if two cards are match, then they stay open and change color. If two cards are not matched, the cards stay for a fraction of a second and turn over again.

Below, is the scoring depending on how many moves were made: with 14 moves you get 3 stars, 20 moves for 2 stars, and anything above 26 moves for 1 star.

Finally, after the game is won, a popup window pops down and it gives a congratulatory message. How long it took to win the game, with the number of moves and with which scoring.

If you would like to test the game out yourself, feel free to clone it through the following link: https://github.com/Ul1ra/MemGame. The next project that I will code for my Udacity degree will be a classic arcade game like Frogger.

--

--

Benjamin Cunningham
letsboot

I live in Basel, CH and I aim to become a front end web developer. I have started working as a Co-Trainer and a Software Engineer at Letsboot.