A card matching game. The "Have you seen my _____?" edition.
My first project with html, css, vanilla javascript, and my own graphics!
This memory game was created following along with "Code with Ania Kubow" in her 12HR+ coding bootcamp on Youtube. Because the game was purposefully left minimal, it was a great starting point for me to implement many changes of my own.
- HTML5
- CSS3
- vanilla JavaScript
- Procreate
- Photoshop
- Google Fonts
My goal was to make the game more user friendly and easier on the eyes. I made a list of things I wanted to do and worked my way through it. I thought the best place to start would be improving the UI. This included: removing system pop-up alerts with every event, using flexbox to space out and evenly distribute the cards, and adding a restart option to reset the board. It also seemed important to make sure the board would be responsive for smaller screens, so I added media queries to reduce the columns to two and scale the banner image depending on the screen size.
After improving the game's ease of use I wanted to make more superficial changes to the overall aesthetic. When I decided to give the game a silly (but all too relatable) theme, I used Procreate to draw my own card tiles, card back, and reset button. Photoshop was used for final editing and to create the game banner.
To challenge myself further, I looked at other games to figure out what else I could do to enhance my own. I chose to add a timer that starts with the first attempt, a counter that tracks total attempts, and a 3D flip animation to the cards when clicked. I also moved the congratulations message that appears upon winning from the board itself to an overlay that pops up with the "Reset Board" button.
The addition of each new feature was a lesson in itself, and I could have found more and more to add before deciding enough is enough!
- I practiced breaking down ideas (or problems) into much smaller bits to make it less overwhelming. ("add cool 3d flip animation" became --> 1. look up resources and tutorials, 2. look for other games using it, 3. try to understand how their method works, etc.)
- This project was an awesome intro to coding and, more importantly, ✨problem solving✨. By the end I began to form some understanding of how/why something does what it does. I could see why the flip animation wasn't executing and why the cards would become "stuck" open if clicked too quickly. And fix it!
- A majority of my time was spent googling snippets of code to copy/paste (rinse and repeat until I got lucky). An extremely time consuming process, even if it worked eventually and made me happy when it did. Because of this I spent longer than necessary dwelling on problems I couldn't get to work out.
- I need the practice for setting a timeline, and deciding when to move on to another project.
Features I thought about and would add in the future if I could:
- add final time and score stats to the pop-up overlay
- different color/card and theme options
- ways to make the game harder if user wishes, such as
- adding many new card sets to find
- swapping the current timer to a countdown instead
- example: halloween/zombie theme. you have two minutes to match your survivor gear or you're (zombie) toast!
- Memory game Copyright (c) 2020 Ania Kubow
- Background image from Toptal.com
- All other images my own
Any feedback is welcome! Thank you for visiting!