Ionică Bizău

How I ported Memory Blocks to modern web

Playing computer games is a lot of fun. Playing games improving brain function and performance is even better. The first computer game I ever played was one of these. ⚡️

It happened when I was 6-year-old. I visited a friend in the neighboring village. There were not so many computers in those days but my friend had one. He asked me to play a computer game he thought I would enjoy. And I did! It was my favorite computer game at the time (back in 2001).

The game I played was Memory Blocks, which is part of the Symantec Game Pack, created by Charles Timmerman—founder of Funster and author of over 90 puzzle books.

Since then I did a lot of things. One of them is that I became a web developer. So, I thought: it should be interesting to bring this Windows game back to life and everyone will be able to play it in their browsers (on any platform). Many people love oldies. Not long time ago I created a COBOL bridge for Node.js and the feedback was amazing.

And I did it! You can play it clicking here:

Below is how I did it:

💫 Step 1: Modularize all the things!

Instead of having a monolithic project doing one thing I preferred to separate the core part into a separate library. That's how match.js appeared. Using match.js programmers can develop similar memory blocks games.

OctiMatch is a good example: it has the same rules, but it uses the GitHub Octicons as images.

🔥 Step 2: Steal the images from the original game

I installed Windows in a virtual machine and took screenshots and cropped the images that should be displayed in the yellow blocks. There are 30 distinct images.

✨ Step 3: Use match.js to build the actual game

I used the library I created to build this game: basically passing the paths to the images and some options. This was probably the simplest part. I got an initial working version. The next step was to make it look exactly like in the original game.

🎩 Step 4: CSS Magic

I worked together with @tonkec on this. She made the amazing 3D block spinning animations. It was tricky to do that but we did it. Btw, she has some nice CodePens! 🎨

📊 Step 5: High Scores and other features

I implemented the high scores functionality and UI. The data is kept in the browser local storage and is rendered in retro tables, like in the original game. 😂

Also, I implemented the retro windows (e.g. About & How to play), made it possible to switch between the grayscale and colored modes and choose the difficulty (little or big board).

😎 Step 6: Do it right!

Before making the game public, I wanted to see who is the original game author and where can I find him. After a quick investigation, I found Charles Timmerman (funster.com) and I was 90% sure this is the guy I want to talk to.

I kindly emailed and asked him to allow me using the original game images in my clone. I was wondering if he would reply me. ✉️

After two days he sent me an enthusiastic reply. Amazing! That looks exactly my game! he said.

I like how the high score table looks the same and even the black & white option is preserved. In those days, there were Windows computers that were in black & white! You might be interested to know that I wrote all the games in assembly language- my choice in those days over the usual C.

And he agreed to use the designs and images in my game clone. Yay! 🎉

🔮 Step 7: Open-source all the things

I open-sourced the repository on GitHub and tweeted it.

💖 Feedback

One of the things I like to do is to teach people to code. I usually share with them the news I have (e.g. projects I build, something interesting I do etc).

It was a nice surprise that one of my mentees sent me three books containing Bible puzzles by the author (because, yes, I like the Bible). Thanks, Nuvi!!! 😁 🍰

Then, Timmerman sent me two signed books with so many great puzzles! You cannot know how thankful and happy I am because he allowed me to clone his game. 😄

So now, when taking a break, I know what to do! Solving puzzles! 😂

🚀 Conclusion

Sometimes it is good to invest time in bringing old things back to life. Not only you'll find people feeling nostalgic using them, but such things will make them happy and obviously it will also make you happy! And you may get shiny surprises too! 😊

To read the source code, report bugs, contribute and play the game check out the game repository on GitHub. :octocat:

Have feedback on this article? Let @IonicaBizau know on Twitter.

Have any questions? Feel free to ping me on Twitter.