back to all projects

Game Development

Drops

Javascript game created to raise awareness about disparities in water quality around the United States

Collecting polluted water drops in Drops Level 3.

I built Drops with my friends Claire, Lilia, and Sarah at ByteHacks 2017, where it won 1st Place and Best UX. It was inspired by Scoops, an iOS game I loved to play growing up. I worked on developing the gameplay with the Javascript game framework Phaser.IO and creating the game's assets!

Play Drops

Gameplay

In Drops, the player moves a bucket to collect clean water drops in blue and green, while avoiding the dirty ones in brown. To advance to the next level, the player must collect 15 drops.

Gameplay: home Gameplay: instructions

The home and instruction screens at the beginning of Drops

Drops has three levels: (1) Boston, Massachusetts, (2) Charleston, West Virginia, and (3) Sebring, Ohio. With each level, the ratio of dirty to clean water drops increases, raising the game difficulty while teaching the player about disparities in water quality between the three locations.

Boston: introduction Boston: play Boston: score

Level 1: Boston, MA

Level 1: "Welcome to Boston! Cities like Boston have access to reservoirs and high quality treatment plants. In the last 5 years, 90% of water samples had safe levels of lead."

Charleston: introduction Charleston: play Charleston: score

Level 2: Charleston, WV

Level 2: "Welcome to Charleston! Areas like this with many industrial plants are prone to chemical and coal ash leaks. These make the drinking water unsafe and cause short-term health problems."

Sebring: introduction Sebring: play Sebring: score

Level 3: Sebring, OH

Level 3: "Welcome to Sebring! In the US, 6-8 million homes still get water from lead pipelines. These corrode and infect water toxins, leading to chronic health problems for families and children."

Development

We spent a lot of time planning different aspects of Drops, including research, game mechanics, control flow, and assets.

Development: whiteboard

We took over multiple whiteboards over the course of the hackathon.

Creating Assets

I drew the game's drops, buckets, and backgrounds in Illustrator.

Assets: drops

Drops: Blue, brown, and green drops

Assets: buckets

Buckets: Buckets filled with various levels of clean, polluted, and deadly water

Only the empty bucket made it into the final game, but I thought it would've been a neat feature to have the water in the bucket respond to the player's progress in the game. The more drops collected, the higher the water level in the bucket, and the greater the percentage of polluted drops collected, the dirtier the water.

Assets: backgrounds

Backgrounds: Background artwork for Boston, Charleston, and Sebring

What I Learned

Every hackathon project, I aim to learn something new. Through Drops, I learned basics of game development, including programming the game interface and working with sprites and collisions. I also learned more about the issue of water pollution and the different types of pollutants in tap water around the country.

What's Next

Each level of Drops terminates after 15 drops are collected, which is great for a quick hackathon demo, but so short for real gameplay!

In Scoops, players could continue stacking scoops of ice cream indefinitely, unless they've acquired three "bad" scoops (onions or tomatoes). Perhaps Drops levels could go on until the player's pollution level has surpassed that of drinkable tap water.

Maybe the green drops could even act as "purifying" drops that help the player reduce the pollutants they've already collected. That'll be a project for next time!

back to all projects