Kitchen

Calm your mind while cleaning! This game blends soothing sounds, breathing exercises, and gentle activities to turn kitchen chores into a relaxing experience, promoting mental well-being.

Comment 2

Inspiration

I have struggled with anxiety all my life. Menial tasks like cleaning have always helped me turn off my brain and calm down. I wanted to make a game that was fun and cute to mimic that calming reaction. Originally, I wanted it to be an ASMR game, but time and resource restrictions kept me from that. Instead, I focused on the tasks and the overall ambience. The color scheme was inspired by my comfort book that goes everywhere with me, Nine Stories by J.D. Salinger, and it even makes a cameo on the kitchen fridge!

What it does

This game takes you through a few levels of cleaning/organizing and prompts the interactions. Level One starts with dishes in the sink. They need to be dried. You are prompted three times to take a deep breath in and blow out to dry the plates. This, one by one, dries them. After that is done, you are prompted to select the spray bottle and pick a scent: pear, strawberry, or orange. The type of spray you picked is, then spray all over the sink. Lastly, the user is prompted to take the sponge and scrub the sink. This removes the dirt and spray and leaves a sparkling sink.

Users are then taken back home and can go to level two. Level two is a fridge magnet decorating game. By clicking the magnets, they are added to the fridge. The user can drag them to make different designs. At any time they can clear the fridge by refreshing the page or use the home button to return home.

At each step, users are given instruction and prompting so they are never confused and the experience can be truly relaxing. Paired with music and sound effects, the tasks create a calming ambience.

How we built it

I started by creating the home page kitchen in Figma. Once I got it to the point where I liked it, everything else started to fall in place. I wireframed and designed all the elements and pages with Figma. Then used HTML and CSS to design everything statically. Then I added interactivity with JavaScript. This was the method for all the pages and activities of the project.

Challenges we ran into

A big challenge I had was Chrome's audio blocker. I could play audio on any of the pages until the user had clicked on an element. I figured this out pretty last-minute, and had to add a variety of 'start' buttons and 'click the screen to begin'. Another challenge was not being very familiar with JavaScript. I often had to do brute-force solutions to problems because I didn't know any better. As I continue to improve my JavaScript skills, I look forward to coming back and cleaning up some of my code.

Accomplishments that we're proud of

I have never considered myself very artistic, so I am really proud and happy with my designing in Figma! I forced all my family members to test, and was surprised to see genuinely relaxed and happy faces while playing the levels. I am very proud of the presentation of this project and how much time and effort I put into it.

What we learned

I learned so much! The reason I chose to do this Hackathon was because my coursework at OSU has very little front end. I have done some, but I didn't even know how to do a for-loop in JavaScript (turns out it is the same as C). I got much more comfortable with JavaScript DOM and with CSS grids and flex boxes. I also learned that however long you think something is going to take, it will take longer. All you need to do is work hard towards your goal product and be patient.

What's next for Kitchen

Quite a few things! This one of the first projects I have done that I am really excited about improving and continuing to work on. First, I would like to add more levels. It was my intention to have more, but the time limit prevented me. I think a floor cleaning and oven cleaning level would be great! If I wanted to, I could also expand to different rooms of the house. Second, I think that the graphics were a bit glitchy and amateur. Using a JavaScript framework would take this game to the next level and allow for more complex interactions. Lastly, my original plan was to have more of an ASMR experience, but I didn't have enough time to add (or make) sound effects. Although I really like the music and typing sounds, I would love to explore more auditory elements, as well as other sensory elements.

Built With

Share this project:

Updates