My Butter Half

Inspiration

Everyone has a warm memory of helping their parent with cooking by spooning the soup, or just from eating tomatoes that were supposed to be in the sandwich. My Butter Half converts these sweet memories into a web game that single parents in shelters can use to bond with their children, while also providing them a relaxing feeling of playing a video game, and healthy, affordable recipes they can then create in the shared kitchen of the shelter.

The game is a two-player game that allows mothers and children to bond over an activity that helps with the care of the child, the mother's mind and soul, and helps fuel the body in the future. This game is inspired by Overcooked.

How we built it

We built the project using: HTML, for page structure and UI layout HTML Canvas, rendering the 2D pixel game environment CSS, for creating pixel-style UI styling and a responsive layout with screen resizing JavaScript, for game logic, objects/characters’ movements, collision detection, and interaction between characters and objects. Figma, to design the UI/UX and pixel-styled assets

Challenges we ran into

The main challenges we ran into were the constraints set by the case.

We acknowledge that some residents do not have their personal devices. Thus, the web game can be accessed from the shelter computer. It doesn't require any installations or accounts, to protect the user's privacy. You only need to open the browser and start playing.

We also acknowledge that not all women are proficient in English, the same goes for the kids. This is why our web game has animations and pictures depicting the exact ingredients required. This will ease understanding and allow physical implementation in the kitchen.

Another major challenge was the time constraint. Due to the limited time, we could only finish creating one recipe — tomato soup. Apart from that, we weren't able to edit some of the backend to set a timer for the food to cook. There is also no finished filtering system; there is a rendered site for the ingredients. The game also includes staff interactions. We thought about making them able to add new ingredients that are sent from the food banks to filter the recipes available at the moment of playing. However, with the time constraint, we weren't able to implement this fully and connect the interaction with the database. With more time, we would be able to add more recipes and provide a more efficient development. For now, we focused on the major features, and the finer details will be added later.

Accomplishments that we're proud of

This was our first hackathon ever (for the four of us). We used a variety of tools that we had to learn how to use, including Figma and programming languages, such as JavaScript, CSS, and HTML. We are proud of our time management and brainstorming as a team. Our group came up with an interesting concept and uniquely applied it to the case prompt. We worked cooperatively as a team to divide tasks and also worked together to create ideas and concepts.

What we learned

Our project was a very iterative process. Our ideas had to change multiple times before we came up with our final idea because of constraints. Our team kept a continuous discussion, which allowed us to share our ideas and work as a team. During the hackathon, we learned the ropes of creation and development. Certain parts of this game used concepts that we were not too familiar with, forcing us to learn new things, which furthered our technical skills. In addition, we learned a lot of real-world challenges that individuals face. This project made us deeply reflect on how these challenges interfere with people’s daily lives, and how we can use technology to help solve these problems.

What's next for My Butter Half

We hope to add more recipes to our game, My Butter Half. Additionally, we want to add recipes with more complexity and steps into the game with animations, to replicate the actions completed in real life. This could look like: kneading dough, spinning salad, or marinating meat. We would also like to implement the "updating ingredients" and recipes filtering features fully.

Built With

• css
• figma
• html
• javascript