Hello!
Hello everyone 👋, my name is Carlos!
A little over a month ago I decided to learn Web Development 🧑🏻💻 and signed up at Ironhack , a Bootcamp with several campuses worldwide that teaches Web Development, Data Analytics, UX/UI design and Cybersecurity.
Being Mexican 🇲🇽, I decided to enroll in the Mexico City campus to study Web Development and start this exciting adventure.
As my first article I would like to share my experience programming my first project to complete the initial module of my Bootcamp. To complete the module we had to program a video game using HTML, CSS and JavaScript with canvas.
The Project: Honey Badger Don't Care
The guidelines were as follows:
- Render a game in the browser
- Having logic for winning and/or losing
- Include separate HTML / CSS / JavaScript documents
- Use plain JavaScript for DOM manipulation (or HTML canvas for graphics)
- Have a repo on GitHub.
- Be deployed online
- 5 days to complete the project
Theme 🦡
As the main theme, I wanted to include one of my favorite animals: The honey badger.
Several years ago, someone close to me showed me a YouTube video of an animal that was nicknamed the bravest animal in the world. In this video, a narrator named Randall, describes the animal in a humorous way while scenes from a Nat Geo documentary are shown.
After watching the video this badger became one of my favorite animals, so I wanted to include it in my video game.
Here is the video if you are curious:
Game functionality
The game has simple rules. Our friend has to collect 30 honeycombs while dodging the snakes that appear randomly on the right side of the screen. The badger moves by clicking with the mouse on the place where we want to displace him.
We win the game if we manage to collect the honeycombs. The game is over if any snake strikes us.
Main Challenges
New project
The main challenge for me was to start a project from scratch.
Weeks before the project we did exercises and labs on a daily basis to practice the concepts we were learning. The difference was that we had some code base or instructions to complete the tasks. This time we had to plan and develop everything from scratch, so it was a big challenge at the beginning.
While searching on google and YouTube for some resources to start my project I came across a YT channel that teaches JavaScript with games made with the help of canvas. This channel became my main resource for my game, I highly recommend it.
Collisions
One of the main technical challenges in the development of my game was to program the collisions between objects. When moving the badger I had to calculate when the object would collide with the honeycombs and snakes. At first I modeled everything with circles, so I had to use the Pythagorean theorem to calculate the distances between the circles and program some if statements to see if the objects would touch.
Doing it first with circles then became a problem, since the spreadsheets I chose to animate it did not occupy the entire space of the circles. This caused blind spots in the game, because in some occasions it appeared that there was a collision, however, it did not appear so in the game's animations.
Mistakes and lessons learned
Project planning
I think it all comes down to planning. One of the main mistakes, as I wrote in the previous paragraph, was collisions. I should have decided from the beginning the animations I was going to use and calculate the collisions with those shapes in mind so I wouldn't have problems later on.
Another mistake was not including some buttons to start, pause and restart the game. When entering the page the game starts immediately, so the player is not prepared and does not have much time to read the instructions and conditions to win or lose the game. Also the players needs to refresh the page to play again.
Without a doubt I learned that before starting to write code, it is necessary to spend some time planning the scope, resources and conditions of the project.
Resources
To finish, I would like to share the links to the repo and URL of my Netlify site.
Thank You!
Thank you very much for reading my first article if you made it this far. I hope you had a chance to play my game and liked it. Any feedback or suggestions are welcome.
Thanks again!