Code exercise – Memory Game

Why am I coding?

My immediate goal in learning to code, is to be able to appreciate the _poetry_ written by my colleagues and the lovely community of open source. I believe understanding this code will also help me do my day-to-day work as a support engineer so much better.

My current job has made me practice and improve my skills in CSS. I am also super grateful to my employers who encourage constant learning.

Slow self-paced start

Over the last many months, I explored a few courses around core JavaScript, including FreeCodeCamp, Zac Gordon, WesBos and a few others. They are all truly amazing, and I can’t be more thrilled that we can learn so many things without enrolling in a university. We can also learn at our own pace! I took my own sweet time to learn the basics and do a bit of exploration. There were times when I thought nothing was moving, and almost gave up.

Fixing a fun goal

Prof. Eric Raymond mentioned that great work of software begins with a developer’s personal itch. To take my learning further, I thought of figuring something of my own, maybe something more joyous than itching ;). I watched my dotter (muggles spell it as daughter), was playing a game of Pictureka. That made me picture myself playing a memory game with her on a computer, where we score against each other by picking matching pairs of cards.

I figured out that this project will help me with a few learning objectives:

• Brush up skills around CSS – particularly grid
• Get to practice JavaScript through this simple application
• Practice GitHub workflow
• Practice using VS Code and an online IDE – Repl.it

Let the games begin .. but wait

I started off building the HTML + CSS part of it and used a 6 X 6 grid to show the cards ( I don’t know why I named it ‘blocks’ in the code).

I saw that there were quite a few people who had made similar games online. I held myself back from reading their codes, and kept to using MDN / W3Schools for basic code usage.

I broke this vow slightly, when I found my efforts in writing a function to shuffle an array randomly, was going north-by-northwest. To my surprise I found that there was a named algorithm for this called – Fisher Yates shuffle algorithm. I took hints of that and wrote the card shuffle function based on it.

Version 0.0

Yes! I made it to the first level. Needless to say this had bugs, including the announcement always announcing player 1 as the winner 😀 .

Dotter’s laughs and shrieks while playing it with me made it worthwhile. I shared the game with my friends. It was nice and encouraging of them to spot bugs and suggest improvements. It is always good to have many other sets of eyes watching your code and helping you learn.

This is just the beginning

I am happy that I am now able to already see a few improvements to be done, or a roadmap for the next set of things I need to do that will help me learn, as well as make this game better.

Wanna Play?

Here is the Memory Game :

and the code on GitHub

To summarize

• Don’t be discouraged by a slower pace in the beginning. There maybe times when things do not appear to move at all. Those are useful ‘wait states’.
• Give yourself a fun project and implement it using the language you are learning
• Share it with your friends and get their valuable feedback. They need not be necessarily coders. Feedback from real users is the best! Feedback about the actual code structure is a further icing
• Revisit the project regularly to find out how you can improve the code. The excitement never stops. Keep Playing!