Inspiration

As children spend increasing amounts of time on video games that do not always encourage learning or cognitive growth, important parts of the natural world can be overlooked. At the same time, with technology playing a major role in recent times, topics like ocean education receive less attention. This is why we created Ocean Explorer, a website designed to make learning about the underwater world fun, engaging, and accessible for kids.

What it does

Ocean Explorer allows users to:

  • Learn and explore the different ocean zones and sea-life
  • Catch sea-life in each level
  • Collect different species of sea creatures and plants to add into a personal diary
  • Test their knowledge to unlock new levels

How we built it

Ocean Explorer was built using Phaser and typescript in order to create a smooth player experience. UI and images were hand-drawn using Procreate.

Challenges we ran into

This was our first time using Phaser, so a significant challenge we faced was learning how to use Phaser in combination with typescript to create a efficient and smooth experience. In addition to this, we encountered a bug throughout the hackathon where the background would show the wrong image, however, we managed to fix this by making the background names more specific to each page.

Accomplishments that we're proud of

We are extremely proud of the art and interactive features in Ocean Explorer. Each button, background, and sea-life image was hand-drawn by one of our members. In conjunction with this, we are proud of how we were able to customize the buttons and add a custom cursor (with a bubble trail!) to make Ocean Explorer visually pleasing.

What we learned

Throughout making Ocean Explorer, we learned how to...

  • Use Phaser
  • Implement our own custom designs
  • Make the button designs interactive
  • Make the background and sea-life zone specific

What's next for Ocean Explorer

Future implementations for Ocean Explorer include adding login and database compatibility so that the user can save their progress and access their diary on different devices. Furthermore, we plan to add more sea-life per zone, and a friending system so that users can see each other's fish diaries.

Built With

Share this project:

Updates