Title Card

Inspiration

Inspired by the ongoing environmental battle we are facing right now, as populations continue to rise and the need for resources increases, we wanted to have a fun way to educate people about recycling. This lesson, framed as a game, also doubles as a stress reliever for anyone and everyone. With every snap, your neurons are activated, and your brain is learning more about recycling rather than being stressed with work.

What it does

Snap! is a web game. When presented with the title screen, you press the play button and are told how to play: There are two options, Recyclable or Not Recyclable. When the card rises up out of the magic hat, an image is shown of a random waste product, and you are to choose whether it is recyclable or not. There are ten rounds; each time you answer correctly, you get a point. By the end of the 10 rounds, if you have scored more than 7 points, you win; otherwise, you lose.

How we built it

We built our web-based game with vanilla JavaScript, HTML, and CSS. We handled all the game logic with JavaScript, used CSS for the animations, and structured everything with HTML.

Challenges we ran into

Way too many... one challenge was coordinating the CSS animations with the JavaScript game logic. For example, when a card goes off-screen, we needed to ensure the animation completed before triggering the next round. We solved this by using setTimeout() in JavaScript to wait for the CSS animation duration, and carefully timing when elements appeared and disappeared to create smooth transitions.