Midterm Project – Cat Rescue Game
For my midterm project, I was very excited to create a game based on something that I love, cats! As I have grown up and lived in Abu Dhabi for half my life, I have noticed that there are a lot of stray cats. So with this in mind, I wanted to design a game where the player walks around a city, rescues stray cats, and takes them to a shelter. I was inspired by a photography project I completed last semester about the spirit of street cats in Abu Dhabi. I went around the city in Abu Dhabi and captured these cats’ lives and the environment they are in. (link to the photos). The game combines movement mechanics, object interactions, and a simple pet care system. The goal of the game is to rescue and rehome all the stray cats in order to win the game. I started this midterm project by drawing a rough sketch of how I wanted it to look like, and the various screens I wanted to implement.
Link to sketch:
Midterm Sketch
Final Game:
Link to final game
Essentially, my game consists of three main screens, the start, game, and restart screen. I wanted a specific look for my background that I was not able to find online, so I decided to create my own. For both the start screen and the game background screen, I used Illustrator to make various shapes and used some images like trees or garbage bins. Then I converted these to PNG files so that I was able to upload them into p5.js and use them in my code. For the shelter, I used different shapes to make it look like a house. Additionally, I made the start screen display a box with on-screen text explaining how to play the game. Similarly, the restart screen also has a circle with on-screen text showing that you won, and a button to restart. For the interaction aspect of my project, I implemented a way for the player to control the girl using the arrow keys on the keyboard to move around. The stray cats are located at random locations in the city and if the girl touches a cat, it is rescued and sent to a shelter. I also used happy, chill background music that I found fitting to the game that starts once you press “Start Game”.
Overall I am extremely satisfied with the way that my final game turned out. Something I am particularly proud of is that instead of using pre-made designs from the internet, I designed my own backgrounds in Illustrator, which gives my game the unique quality I was seeking. Also, I am proud that I was able to successfully implement a collision detection system that ensures that once the player rescues a cat, it gets added to the shelter. I also liked the three-screen system (Start → Game → Restart) which provides the game with a clear structure. Lastly, I am extremely proud that I was able to draw inspiration from my real-life experiences in Abu Dhabi, which makes the game more unique and personal to me. I was able to connect my previous photography project and this game, linking different creative disciplines. I like that my game has an underlying story about spreading awareness about stray cats, which adds an emotional layer to my project.
Car class (which represents the girl’s movement):
if (keyIsDown(LEFT_ARROW)) this.x -= 5;
if (keyIsDown(RIGHT_ARROW)) this.x += 5;
if (keyIsDown(UP_ARROW)) this.y -= 5;
if (keyIsDown(DOWN_ARROW)) this.y += 5;
// Keep girl inside canvas
this.x = constrain(this.x, 0, width - this.size);
this.y = constrain(this.y, 0, height - this.size);
image(carImage, this.x, this.y, 60, 100);
class Car {
constructor() {
this.x = width / 2;
this.y = height - 80;
this.size = 50;
}
move() {
if (keyIsDown(LEFT_ARROW)) this.x -= 5;
if (keyIsDown(RIGHT_ARROW)) this.x += 5;
if (keyIsDown(UP_ARROW)) this.y -= 5;
if (keyIsDown(DOWN_ARROW)) this.y += 5;
// Keep girl inside canvas
this.x = constrain(this.x, 0, width - this.size);
this.y = constrain(this.y, 0, height - this.size);
}
display() {
image(carImage, this.x, this.y, 60, 100);
}
class Car {
constructor() {
this.x = width / 2;
this.y = height - 80;
this.size = 50;
}
move() {
if (keyIsDown(LEFT_ARROW)) this.x -= 5;
if (keyIsDown(RIGHT_ARROW)) this.x += 5;
if (keyIsDown(UP_ARROW)) this.y -= 5;
if (keyIsDown(DOWN_ARROW)) this.y += 5;
// Keep girl inside canvas
this.x = constrain(this.x, 0, width - this.size);
this.y = constrain(this.y, 0, height - this.size);
}
display() {
image(carImage, this.x, this.y, 60, 100);
}
Throughout developing this game, I faced a few challenges that required me to problem-solve. One of the issues was ensuring that the text box and circle were layered properly over the background so they remained visible. It took me some time to adjust their positioning and layering so that they were correctly visible on the screen. Another challenge I came across was making sure that the girl’s movement worked smoothly in all directions (up, down, left, and right). Debugging this movement system took some trial and error, but I was able to fix it. Additionally, I ran into smaller, frustrating issues, like file name errors, for example, a missing capital letter caused images not to load properly. Debugging these minor but important details taught me the importance of careful file management. However, I was able to overcome these challenges and successfully build a functioning game.
If I had more time, there are a few features I would have liked to add to enhance the user experience. One idea was to expand on the rescue aspect, right now, when the cats reach the shelter, they are considered rescued. However, I would have liked to add an extra step where the player needs to care for the cats (feeding them, treating injuries, etc.) before they are fully rescued. Another improvement would be to introduce different difficulty levels (Easy, Medium, Hard) by adding obstacles that the player must overcome to rescue the cats. Also, smaller interactive details, like the cats meowing when clicked, would also add to the game. Even without these extra features, I am really happy with how my game turned out. This project challenged me to problem-solve, debug, and think creatively, and I’m proud of what I was able to accomplish.
Music citation:
Music track: Marshmallow by Lukrembo
Source: https://freetouse.com/music
