Midterm :)

Project Concept

This project is a simple point and click game based on SpongeBob’s world. The player starts outside SpongeBob, Patrick, and Squidward’s houses and can click on them to enter different rooms. Each room has its own design and sometimes interactive elements like sounds, books, or TV screens. The goal is to explore different parts of their world and experience small interactions.

link to the sketch: https://editor.p5js.org/flipflops/full/Z69RYq4v1

To make the game feel more personal, I drew all the rooms and the background instead of using images online. I tried making it so that all the drawings blend well with the objects I coded, so everything feels like part of the same world:

How it works

The game constantly checks where the user is and updates the background based on their location. When the player clicks on a house, the game detects which house was clicked and then changes the background to the correct room image. Some rooms also have extra interactive features, like playing specific sounds or changing visuals when clicked.

For example, the TV room cycles through different screens each time the player clicks, making it feel like the TV is actually changing channels. The book room has different pages that the player can flip through, and each page includes a funny SpongeBob quote. The game also manages background music, so when the player moves between different rooms, it plays the correct theme without overlapping sounds. Another thing I focused on was making sure the back button always works properly, so the player can return outside without any weird glitches.

Code highlight

One of the coolest parts that I’m proud about is the clarinet room, where the player can actually play Squidward’s clarinet. There are seven different notes, and clicking on different parts of the clarinet will play them. It’s like a mini music feature inside the game, and it makes Squidward’s room more interesting instead of just being another background.

function checkClarinetHoleClick(mx, my) {
  // all the clarinet holes coordinates (left to right) stored in array
  let clarinetHoles = [
    { x: 174, y: 153 },
    { x: 190, y: 153 },
    { x: 205, y: 153 },
    { x: 218, y: 153 },
    { x: 245, y: 152 },
    { x: 260, y: 152 },
    { x: 274, y: 152 },
  ];

  for (let i = 0; i < clarinetHoles.length; i++) {
    //distance between mouse click and centre of each hole
    let d = dist(mx, my, clarinetHoles[i].x, clarinetHoles[i].y);
    if (d < 5) { // within 5 pixels
      // hole clicked
      playClarinetSound(i); // play note
      break;
    }
  }
}

Improvement

One issue I ran into was getting the highlight effect to work when hovering over objects. I wanted players to see which items they could interact with, but at first, the effect wasn’t showing up correctly. After some testing, I made sure the game checks the mouse position and only highlights objects when the cursor is over them.

In the future, I would like to add more interactive elements, like clickable objects inside rooms that trigger animations or extra dialogues. Right now, the game works fine, but adding more details would make it feel more complete. Also, the game doesn’t have a clear goal, so maybe adding a small mission or hidden secrets to find would make it more fun.