Save the Water!

The sun's burning your skin. You're drenched in sweat. You’ve already walked for 2 hours and you’re carrying a jug of water heavier than yourself. Save the water provides awareness for these issues.

Comment

Inspiration

After attending the Xylem workshops we were surprised and inspired by all of the stories we had heard. While doing more research about this issue, we stumbled upon a story about Cheru, a 5 year old girl who travels for almost 4 hours twice a day to get a kettle full of water just enough for morning tea. Even at age 5, Cheru knows the worries and daily struggles to drink water that may not even be fresh. She never complains about her trips as she knows it is her only way to survive. Her sisters carry much larger and heavier jerrycans to go fill the water. Cheru understands she must get stronger fast to catch up to her sisters. This story touched our hearts and gave us a deeper need to do something about this. We wish we had learned about these issues and stories when we were younger. Being more educated would have allowed us to help in more ways earlier. This website is dedicated to Cheru. Thank you for being so brave.

Here's our inspiration!

What it does

Save the Water is a web-based game meant to educate children and youth about the water crisis and water poverty worldwide. The story and game guides you through a simulation of Cheru’s arduous struggles to find water each and every day. The player navigates obstacles like tumbleweeds and birds by jumping and ducking over them as they block their way. Every time an obstacle hits the player, water is lost - emulating the difficult landscape Cheru faces bringing water home to her family. The only way to succeed is to arrive home without having lost all of the water. The amount of water the player begins with is randomly generated (but reflects real circumstances), and the background also changes colour based on the time of day!

How we built it

Within the past 24 hours, our team coded an easy-to-navigate website using front-end technologies including HTML, CSS and JavaScript. We involved JavaScript libraries such as JQuery and JavaScript Canvas to create the back-end of the game, from moving the character, objects to and handling collision detection.

In the process of developing the UI/UX we created multiple prototypes in Figma, testing different colour schemes, user flows and layouts to select those that created the best experience. We chose fonts and designed themes that suited our target audience from the solid, blocky illustration to the cute artstyle meant for youth! Additionally, the use of CSS transitions, typography and colouring helped to enhance the interactivity of our website and provide visual cues to the user on the information hierarchy.

Nevertheless, the power of teamwork, along with the passion and motivation we fostered in one another allowed us to assemble and create this website to educate and entertain children worldwide.

Challenges we ran into

One of the most time consuming challenges that we ran into was collision detection. We struggled to figure out how to ensure the player would detect an object hitting it and on top of that decrease the water bar once they collided. We went through many tutorials trying to solve this problem. At one point everything was being detected, but the objects would push the player off the screen.

Another major issue was resolving a problem with our water level bar, as it would only decrease for one collision. This required us to do careful debugging, making use of well-placed alerts and research on variable scopes to realize the variable passed through was only within the scope of the function and was not being saved. Through immense teamwork and perseverance, we were able to solve this problem.

Accomplishments that we're proud of

The UI/UX design is our most stunning feature. Everything was done from scratch, including hand drawn obstacles and the main character. We’ve got our eyes set on the UI/UX prize! We designed and planned everything in Figma prior to actually coding the website to ensure an astonishing website. We chose vibrant colours and playful fonts to captivate the younger audience we’re hoping to inspire and inform with this educational game!

We’re also proud of the game itself. We ran into a lot of bugs and issues that took a lot of patience to fix such as collision detection, issues with our variable scopes, moving obstacles, and keyboard controls. Fixing these bugs was a nightmare at times but we managed to resolve them.

Both of these could not have been accomplishments without collaboration. When one teammate grew weary of an issue another came to the rescue! We’re all super proud of the amount of continuous effort and support we gave each other throughout these 24 hours.

What we learned

None of our team has ever designed a fully functional game. All the experience we had with JavaScript prior to this hackathon was adding small features to websites. We learned so much more about JavaScript through designing our game, from experimenting with new CSS attributes to testing out audio controls, animations, social media SDKs, and working with libraries like jQuery.

We learned that teamwork and collaboration were one of the key tools to our success in these past hours. Without any one of our teammates, we would not have been able to accomplish what we have. These skills were the driving force behind our accomplishments. When one of us ran into a problem, we would all help out when we could to resolve it. Even though we all had separate tasks every single one of us had a part in each other’s assignments. In addition, when we began to fall behind we continued to motivate each other and persevere through the challenges. *We were each others’ key to success. *

What's next for Save the Water

  1. Different games to highlight various key issues revolving water. This would allow the website to be even more informative and be able to educate our population about.
  2. Other games with more realistic and graphic rendering would target different demographics to accurately inform and educate older populations about these issues.
  3. Integrating more features related to real-time water data such as water levels in reservoirs, rivers, and humidity in various locations around the world would create a more dynamic game that allows users to simulate the varying degrees of water poverty around the world.

We would also like to link the data given from Xylem and incorporate tips depending on the time of day, during a drought or a storm. During a drought, the game can give tips on how to save water, whereas, during a storm, it would display helpful reminders and information about flooded areas. By conveying this vital learning into a gamified format, we hope to engage young people in solving the water problem.

Built With

Share this project:

Updates