How I Built My First (Obama Themed) JavaScript Game
If you read my last article, “5 Tips for Surviving Your First Week at a Coding Bootcamp,” then you know that I recently quit my job and moved to New York to dive into the web development field. As a quick update, I am continuing to survive my coding bootcamp and just started Week Four!
However, to make it to Week Four, we had to complete our first portfolio project which would be a game using JavaScript, HTML, and CSS. In class, we practiced by building a Memory Game, High Card, Tic-Tac-Toe, and Duck Hunt, but this would be our first original project.
Inspired by “Come Back Barack” from “Saturday Night Live”, I created a JavaScript game named “Come Back Barack,” which is an interactive clickable video game where the player will click to gain points and avoid the obstacles in order to win. The objective is to energize Obama so he will come back from vacation, but the user will need to catch “Liberal Snowflakes” to keep him energized. However, there are red “Make America Great Again” Hats that are obstacles and if a hat falls on Obama, then it exhausts him and he goes back on vacation.
Click here to view a quick tutorial video that overviews the objective of Come Back Barack and how to play.
Click here to play the game!
To explain how I built my game, I am going to break it down by outlining my six stages of web development:
1 ) Information Gathering
The goal of this project was to build a functional, interactive game. It needed to be deployed via GitHub pages, include at least one CSS animation fired by a DOM event, and styled with CSS.
My target audience included potential employers and freelance clients as well as other software engineers and developers. It was also very important to me to build something that I was excited about and wanted to share.
After researching games online, I decided that I wanted to create a game that involved a character moving to collect points and avoid obstacles but with a pop culture and political twist.
2) Planning
To begin the planning process, our class used whiteboards to create website wireframes, which are page blueprints, to serve as a visual guide for the framework of our webpage. We focused on defining our Minimum Viable Product (MVP) and Post-MVP, Priority Matrix, Functional Components, and the core HTML and CSS.
This stage was vital to ensuring that I had a direction before diving into the code as well as scaling back parts of the project that would not be possible in four days. Check out my whiteboarding below!
If you can’t read my cursive handwriting and sludged letters, then another resource that I found very helpful was Wireframe.cc. This website allows developers and designers to build wireframes through simple boxes and text, and it creates a very clear and clean schematic design.
3) Design
During the design phase, I was able to really get creative with the images and visual content. However, Obama sprites are actually pretty difficult to find on the Internet, and he was the most important component of the game.
I found a gif of a cartoon Obama online which I really liked, and it would complement the video-game type design I was going for. I used EZgif in order to make the gif into a sprite sheet so I could use different versions of the cartoon.
After I had my main character, I moved onto the background image since it would take up 80% of the page, and CSS is important! I was inspired by this CodePen by Romina Martin, and I loved the CSS transition of the moving background so I decided to add a CSS animation to the background position so the New York skyline would move behind Obama.
For the design process of the landing page, I used Google’s Materialize Framework to create the basic structure of the webpage and used a Cornflower Blue has my primary color.
4) Development
For the development stage of the project, I started with some easy wins such as writing the HTML and CSS for my Landing Page and the pseudocode for my JavaScript. This was helpful so I wouldn’t lose direction of the MVP and high priority items.
The HTML of the game.html file was mainly the HTML boilerplate as well as div elements for the progress bar and audio controls. For adding my characters, obstacles, and moving elements, I used Javascript to manipulate the DOM by creating new elements, add classes, and append the new elements to the body.
I also used Math.random() and SetInterval functions to randomize the location of the Liberal Snowflakes and MAGA hats in the body every five seconds to make the game more challenging. After, I created a For Loop to run my makeSnowflake function to create five snowflakes.
For my win logic, I decided that the player would need to click on the Liberal Snowflakes to give Obama enough energy, so I wrote an addEventListener function which would listen for a ‘click’ on the snowflake, and every click would increment the progress bar value by 10 points. To win, there was a checkForWinner function which had a setInterval to check every second to see if the player’s progress bar had a value of 100.
However, I will say it is much easier to lose my game than to win because five MAGA hats are constantly falling from the sky every three seconds. When these hats collide with Obama, it exhausts him and the player loses. To create this functionality, I had to explore the world of Collision Detection.
Collision Detection is the process of the computer being able to detect when two or more objects have intersected on a page, but the biggest challenge was that I had 11 moving elements (snowflakes every 5 seconds, hats every 3, and Obama whenever the player used the left and right arrow keys). So I started out by creating a setInterval function that would console.log out the top and left positions of the hats. From there, I was able to build out a function that would compare the top, left, width, and height of Obama to the top, left, width, and height of the hat.
Two tips that helped me a lot was putting a solid black border around your colliding objects to see the point of collision as well as using parsInt() to remove the pixels or ‘px’ from the CSS positions.
5) Testing and Launch
Test often and test early! During this whole process, it was so helpful to build out the structure of my functions before writing the code block as well as using the console.log to see if the function was working properly.
Again, using the border: 1px solid; in my moving elements was critical to seeing the actual point of collision and determining the correct steps to revise the element’s size. I also played my game frequently as I was building it which served as a nice break from writing code.
To deploy my game, I used my GitHub repo and went to Settings and turned on GitHub pages. It was very easy to use as well as make edits and re-deploy the game.
For the presentation, we had a science fair style showcase where other students could go around and play your game. A lot of my fellow students liked the idea and the game was fully functional…maybe even a little tough to win!
6) Maintenance
Although my game will never be perfect, I will continue to monitor the website and make updates when needed. The presentation with other students was also a good test in UX Design because I noticed most players wanted to use one hand instead of two as well as did not understand clicking on the snowflake, so a future improvement could be to add collision detection to the snowflakes as well.
Overall, I had a lot of fun and was amazed at how much I have learned over the last few weeks. Keep an eye out for other projects coming in the next few weeks, and if you are in the middle of building your first JavaScript game, just remember: “Yes, we can!”
