Midterm: Where’s Waldo?

My concept (recap):

For my midterm, I made a Where’s Waldo? game where the player has to search for the Waldo character on the canvas and click on him to win. Waldo is randomly generated on the canvas every time you play, and he’s in a crowded background that you have to navigate through and look closely in order to find him. It’s relatively simple; a digital version of one of my favorite picture books from childhood.

Code highlight:

// splash sound (ocean) --> rect(0, 20, 512, 70)
if (mouseX > 0 && mouseX < 0 + 512 && mouseY > 20 && mouseY < 20 + 70) {
  if (!splash.isPlaying()) {
    splash.play();
  }
}

// boing sound (ball) --> rect (250, 307, 19, 19)
if (mouseX > 250 && mouseX < 250 + 19 && mouseY > 307 && mouseY < 307 + 19) {
  if (!boing.isPlaying()) {
    boing.play();
  }
}

// laughter sound (children running) --> rect (360, 125, 30, 30)
if (mouseX > 360 && mouseX < 360 + 30 && mouseY > 125 && mouseY < 125 + 30) {
  if (!laughter.isPlaying()) {
    laughter.play();
  }
}

// snore sound (people laying down) --> rect (153, 225, 47, 23)
if (mouseX > 153 && mouseX < 153 + 47 && mouseY > 225 && mouseY < 225 + 23) {
  if (!snore.isPlaying()) {
    snore.play();
  }
}

// ouch sound (man walking) --> rect (333, 207, 20, 32)
if (mouseX > 333 && mouseX < 333 + 20 && mouseY > 207 && mouseY < 207 + 32) {
  if (!ouch.isPlaying()) {
    ouch.play();
  }
}

I added sound effects that play whenever you hover over specific things or people on the canvas, which I thought added another fun dimension to my game.

  • For example, if you hover your cursor over the ocean part of the scene, you can hear a water splash sound effect, or if you hover your cursor over the crowd of children running, you can hear a laughter sound effect.

Embedded sketch:

My game has 5 screens: the title screen, instruction screen, gameplay screen, win screen and lose screen. They are navigated via the draw function, which keeps track of the game’s state and calls functions whenever you insert the game state somewhere.

Full-screen version: https://editor.p5js.org/sara_almulla/full/SQwTp8Mj9

Reflection and improvements:

  • I think adding more rounds would have definitely improved my game, but it took me a while to figure out how to sort everything out and debug my code– so much so that I didn’t have enough time to figure out how to embed another round into my sketch (and trust me, I tried).
  • I also would have liked the game to be more interactive in terms of key pressing and mouse clicking as a form of navigation. My game is fairly simple, as all you need to do is click on Waldo to win.
  • Keeping track of everything was a nightmare until the professor helped me out with the game states in function draw, and this made it easier for me to trigger certain functions without having to continuously navigate through the code and jumble things up.
  • Advice from my peers also really helped me configure the game as well!

Leave a Reply