Final Project: Carrot Hero

Project Description

The previously unnamed game I created for my MP3, Carrot Hero, is a higher-fidelity game that includes another level, new game mechanics, and support to allow players to replay the game without refreshing their page. This game is created entirely in Javascript, using the P5 js and P5 play libraries for development. You can access the game here.

Development Process

Since much of my process was previously planned out, I went into my project by prioritizing the following additions to implement into my game. These additions were prioritized via feedback I received from sharing this project in class with students in HCDE 438, but I also went and conducted a “likes, dislikes, design ideas” session to gather feedback from 5 peers.

1. Branching logic between levels, game menus, and game over screens
2. Add “game over” screen
3. Asynchronous sprite movement for stink bugs

1. Branching logic
Similar to the issues presented in the prototype version, the most difficult aspect of this project was figuring out how to refactor my code in order to connect the two levels and also navigate to the menus. Initially, I had all of my levels defined in the windows.setup function, so for this phase I began by moving all of these definitions into a separate function called levels() that was called depending on the value of a variable called level. I started this process by connecting the game menu to level 1, then level 1 to level 2.
2. Game Over (and adding a Game Complete too!)
After figuring out how to connect the game menu to level 1, I realized that during testing, I needed to add both a game over and game complete state. Since I had already figured out how to create a game menu in my prototype, I used the same logic to create the interface of the game over and game complete phases. The last step was then defining the conditions in which players would navigate to the game over vs. the game complete phases. Once that was defined, I went into connecting both of these phases back to the player menu.
3. Asynchronous sprite movement for stink bugs
The last thing I needed to figure out was looking into how to make my enemy sprites move back and forth to add an additional level of challenge to the player. I implemented this part of my code by first testing on the P5 play documentation to understand the logic and then mirror the same thing in my code.

The following points are things I had initially planned out in my project plan; however, when it came to implementing, I found that they didn’t fit in with the vision I had for this game.

1. Improve animations for falling platform tiles - Out of the 5 users I asked to play my game for feedback, only 1 had mentioned a desire to animate the falling platform tiles to make them more apparent. The remaining users found them surprisingly, but did not think that a visual appearance was necessary to improve their experience, so I decided to move forward without making any changes.
2. Change player movement to support left-right acceleration and set a counter to limit double jumping - I would definitely revisit in the future, but these levels are short and I found that almost everyone who had played would hold their d- and a- keys, so movement acceleration would only speed up a player’s completion rate.
3. Add “player death” logic that removes all health points when the player falls out of the map - Considering that this is still a pretty short game, I felt it was more appropriate to keep it as when the player falls out of the map, they lose one health point for replayability.

Issue Deep-Dive

The most concerning issue I dealt with came after I implemented all of the steps above. All of the sprites and tiles from previous levels kept loading in on the next level, causing this mix where all of the game elements were mixed together in one. See the gif below for a glimpse into what this looked like:

I spent a good chunk of time reading through p5 js documentation, as I believed that this was an error as a result of my levels being partially defined in my window.setup function. I played around with remove(), as I believed that I needed to clear out all of my sprites before each level started. It wasn’t until I talked through my issue in office hours with Raina that I found the proper syntax for removing a sprite in p5 play. I ended up creating a function called clearPrevLevel() which removed every single sprite group in the previous level before adding the new tiles and sprites for the new level.

Ideas and Future Work

While my ideas changed quite a bit in this final iteration, I found that this project was a whole lot of fun and I want to continue working on it in the future. Here are some things I would want to add!

1. “Stomping” on enemies
2. New levels (at least up to 5 levels total!)
3. Game mechanics that introduce dynamic vertical movement, such as ladders, flying, etc.

Kudos

Huge shoutout to the following:

• Ryan Bautista - Showed me some resources for asynchronous movement of sprites!
• Arissa Zheng - She helped me debug and figure out how to deploy my final prototype, which I then used the same learnings for this project.
• TA Raina - Thanks for helping me figure out my game error!
• The entire P5 Play Documentation - I would not understand a single thing if it weren’t for this documentation <3