Half a decade ago I built a simple little heroes and villains themed matching game using only the most basic front-end web technologies: HTML, CSS, and JavaScript.
It had been gathering dust for a while. Since I have a blog now, I thought I would share my creation with you guys. The goal of the game is to find the match for each hero and villain using the fewest number of clicks. You probably have played something similar at some point in your life. This little game won’t win any awards, but much like tic tac toe, it’s great for kids and makes for a good introduction to front-end web technology.
Click here to play the matching game!
How It’s Made
For the tech-savvy among you, please forgive me for the code quality. I’ve learned a lot about code readability and maintainability since my early programming days, but I’m not really interested in spending time refactoring this little project.
If you’re not tech-savvy but want to understand how it works, it actually is pretty simple. It consists of only three files: matching.html, matching.css, and matching.js.
You can view the raw CSS and JavaScript files by following the links above. For viewing the raw html file, just right click on the game’s page and then click on “View Page Source”. The HTML file contains the basic structure of the page, while the CSS file controls the colors and spacing of some of the html elements. The JavaScript file is where the heart of the program lies, and is what controls the logic for the matching game. If you want to learn more about programming languages like JavaScript, check out my post about the topic.
That’s the whole game! For extra fun, try creating these three files in a folder on your own desktop computer.
Then you can change the color scheme, fix bugs, add new features, and more. Just open up the html file you modified in your web browser to see your own creation in action. By making just a few tweaks you could end up with a matching game as cool as this one:
