I've spent the last 2 months building a game, CovidInvaders to help spread awareness about the new Coronavirus vaccine.
In this post, I'll be explaining how I built this game with just HTML, CSS, Jquery, and some Python.
Days 1-7: I Brainstormed How The Game Would Look, Work, & How I Would Build It
Disclaimer: My friend, Roman Peysakhovich inspired me to create the game CovidInvaders. Around 1 week before I began brainstorming how I would build the game, he said it could help spread awareness about the vaccine.
For the first 2 weeks, I spent my days brainstorming the game's design with the goal of building the best user experience.
Initially, I wanted to design Covid Invaders with a similar design to a classic game, Space Invaders.
However, after a few days above brainstorming how my game could be unique, I decided on a horizontal design instead of a vertical design like Space Invaders because it would give the user more time to shoot syringes at the virus.
Now, it was time to begin designing.
Days 7-20: I Worked With A Design Agency To Design The Game In Figma
After working with a design agency for almost 6 months now, I've learned a lot about design, as well as how to implement designs properly with HTML and CSS.
Working with a professional design agency has also taught me how to communicate to a designer about how I want the application/game/landing page to look like.
So, after about 2 weeks of collaborating with the design agency, DesignJoy, this is what we came up with:
Now, it was time to start coding.
Days 20-57: I Developed The Game With HTML, CSS, Vanilla JS, Jquery, and Python
Ever since teaching myself how to code when I was 11 years old, I learned an important lesson:
Developing an application or website is only the first piece of the puzzle. The second piece many developers don't have is to actually write clean and maintainable code.
It's very important to write code that's easy to work with and understand, and that was always in the back of my mind when I was developing CovidInvaders.
I'm not saying my code is perfect, but I definitely have improved in the "code cleanliness" part of web development.
I won't go too much into the exact code I wrote to make CovidInvaders a reality, but here's a brief summary:
- Implemented the designs with just HTML and CSS.
- Fell asleep on the couch in my living room.
- Implemented the game functionality with Vanilla JS, and Jquery.
- Implemented the backend using Python to make the leaderboard save the user's name and score after the game ends.
Days 57-59: I Made Sure The Game Was Easy To Use On All Devices (Desktop, Tablet, & Mobile)
After implementing the designs and adding functionality with JS, I spent the next 2 days fixing any CSS issues on different screen sizes.
This wasn't a straightforward process for mainly two reasons:
- Because the game is designed horizontally.
- Because I needed to implement arrow keys for mobile devices (since phones don't have keyboards).
However, with lots of breaks and a few naps, I managed to fix the CSS issues that appeared on mobile devices.
I Free-styled A Rap Song To Teach Players How To Play CovidInvaders
At this point, I was pretty much ready to launch CovidInvaders to its custom domain, covidinvaders.com. However, I wanted to add one final touch.
An original rap song (free-styled by yours truly) that would help players understand how to play CovidInvaders.
So, I jumped to Youtube, downloaded a free instrumental beat, and recorded away.
10 minutes later, this song was born:
After adding the song to the codebase, I deployed the site to covidinvaders.com, and the rest is history.
Okay, not really, that's a lie. I'm still trying to fix some CSS bugs I found in the dev console.