Save the Turtles

• 

  Home page

• 

  Instructions

• 

  Requests user input to determine the number of obstacles

• 

  Game play

• 

  Game over screen

• 

  Game play with pirate hat

Inspiration

Popularized last summer, “save the turtles” has become the slogan for ocean conservancy and reducing plastic usage. An estimated 14 billion pounds of plastic is deposited into the ocean every year, posing a threat to the entire ocean ecosystem. Part of these endangered species are turtles. Over 1,000,000 marine animals, including over 1,000 turtles, are killed each year due to plastic waste such as fishing nets, six pack rings from canned drinks, plastic bags, and most infamously, plastic straws.

The deep sea theme of HackItShipIt immediately made us think of how we can introduce the importance of reducing plastic usage to younger audiences.

We named Cap'n Scutes after the bony plate on a turtle's shell, which is called a scute.

What it does

Save the Turtles is an interactive game designed to educate the public about the threat that plastic pollution poses to our marine ecosystem.

The player controls the movement of a turtle as it tries to navigate an ocean with hazardous plastic waste, nets, and oil spills. The difficulty of the game depends on the player’s own impact on the environment. Before the game starts, the player inputs how many single-use plastic items they used that day. The more plastic waste the player has produced, the more plastic waste will show up in the game, posing a greater threat to the turtle’s safety.

The turtle starts out with 3 lives and loses a life every time it eats plastic waste or gets caught in a net or oil spill. The player scores points by eating jellyfish. Keep an eye out for the special pirate hat. Finding the pirate hat gives the turtle an extra life, and while the turtle is wearing the hat, the jellyfish are worth double the points!

After the player has experienced the reality of millions of marine animals, they will be more likely to think twice before using plastic items such as plastic bags, water bottles, utensils, cups, and straws.

How we built it

We developed the game with HTML, CSS, and JavaScript. We used p5.js to animate our turtle character and move obstacles across the screen. The p5.collide2D library was used to check for collisions. We used repl.it to collaborate online. We made our code efficient and organized by using object oriented programming. The background, turtle, pirate hat, and obstacles were all drawn by our team members.

Challenges we ran into

One of the challenges we struggled with was collision detection. Our game only detected when the turtle hit the obstacles head on and didn’t detect when the turtle collided with an obstacle from the side. To solve this, we used the p5.collide2D library to detect any collision between the turtle and an obstacle.

Another challenge we ran into was positioning the text on the screen while allowing it to have an overflow that fits onto different screen sizes. We solved this issue by creating sub-renderers for our text displays which were dynamically sized to match any screen size and could have text added to them before being displayed on the website.

Accomplishments that we’re proud of

The accomplishment that we’re most proud of is our cute and friendly user interface and animation. We wanted our game to be inviting for young children to play so that we could educate a younger audience about the importance of recycling and conserving our natural environment. Our adorable main character, Cap’n Scutes, is animated to look like he is swimming. We love Cap’n Scutes even more with a pirate’s hat atop his head.

What we learned

While we had previously worked with p5.js, none of us have ever made a full-fledged game, especially one which is so heavily dependent on user input through buttons and sliders. We had to learn how buttons and sliders work, adding them as DOM elements to the HTML canvas, while text and images were all displayed within the p5 renderer.

We also had never worked with sub-renderers before, so we had to learn how renderers can overlay on each other and act as images in the context of the main renderer. However, once we learned how to use sub-renderers, we were able to make our designs much more aesthetically pleasing, while keeping the positioning of text elements relatively simplistic.

We have also never made JavaScript objects which interact with each other in so many different ways. Not only did each of our Obstacle objects have to be linked with the Turtle for collision checking, but the result of that collision would depend on the specific image the object shows, as well as the current state of the Turtle. We also learned how to use the p5.collide2D library, implementing it to detect collisions between the Turtle and each Obstacle.

We also learned what a scute is :)

What's next for Save the Turtles

The next step is to create a database so that players can log in and their high scores can be saved. We would also like to develop achievements for the player, such as collecting 20 pirate hats and eating 100 jellyfish, which would unlock different costumes for Cap'n Scutes to go along with the pre-existing pirate outfit.

We’re also excited to add more characters to elucidate the consequences of ocean pollution on other marine animals. This could include noise pollution where players must distinguish between a motor boat roar and clownfish clicking to elucidate the struggles clownfish face when trying to communicate with their family.

We would like to expand our project into an educational gaming website for all things environmentalism. In addition to ocean pollution, our games would also cover topics such as deforestation, water and energy conservation, and food waste.