Link to the game: https://brandon-w1205.github.io/That-Little-Piggy/
We've all heard the story of the three little piggies... But did you know there was a fourth piggy? Fight against the big bad wolf as the fourth little piggy and send him all the way home!
Play as the untold piggy from the Three Little Piggy story to fight the Big Bad Wolf! Dodge his attacks through jumping and platforms while shooting down the Wolf. Watch out for the Wolf's three phases!
- Javascript
- HTML/CSS - Canvas
I created this wireframe to be the foundation of my idea. This game is heavily inspired by the unique gameplay of Cuphead, a popular action-platformer developed by Studio MDHR. As such I made the choice to have a 2D setup with a large enemy on the right and multiple phases that require the player to dodge and attack at the same time. Utilizing Javascript's Canvas and DOM Manipulation, I hope to create a game with button functionality and dynamic gameplay.
- Render a game window setup
- Render a character/hitbox and enemy character/hitbox
- Create movement for character and boss
- Create jump left, jump right, jump up for character
- Render platforms that character can jump on
- Render character bullets (squares/rectangles with hitboxes)
- Render enemy bullets, long attack, wave attack, and rain attack items/hitboxes (squares/rectangles with hitboxes)
- Generate three hearts for the player and healthpoint system for the enemy
- Loss state when player loses hearts
- Win state when player beats the boss
- Create invisible wall for boss so that player cannot go behind boss to cheese him
- Dash mechanic
- Add images to characters/attacks to match with the story
- Create static animation for boss and character
- Add a background scene
- Smooth the animations to make it feel more responsive
- Getting stuck on creating a good window for the game
- Creating a fluid movement and jumping mechanic (gravity included)
- Spacing out my time and not procrastinating
Within the one week span, I was able to create an action-platformer that included multiple attack phases and smooth movement dynamics. Specifically, I was not only able to hit the MVP checklist, but I was also able to implement the stretch goals I had set out for myself and more. The process led me to sharpen my time management skills and follow a process of writing code that was not fully optimized, but leaving notes to optimize at a later time. I was able to learn new techniques and algorithms for certain functions and became more comfortable with javascript overall.
Initially, I need to lessen the strain of the picture loading times as the game has a current issue of slowing down in certain circumstances. Also, I plan to add sound effects and more animations as they are an integral part of game design. Furthermore, I hope to find new techniques for creating AI mechanics so that I can further optimize my code and not rely on interval timings.
- Game idea inspired by Cuphead fromo Studio MDHR. Without their work, this game would not have been created.
- Gravity and velocity calculations inspired from Chris Courses Youtube channel at https://www.youtube.com/watch?v=4q2vvZn5aoo
- Character sprite and frame animation calculations inspired from Frank's Laboratory Youtube channel at https://www.youtube.com/watch?v=EYf_JwzwTlQ