Midterm Progress: Where’s Waldo?

Concept

For my midterm, I’m planning on making 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 books from childhood.

A highlight of some code that you’re particularly proud of

function setup() {
  createCanvas(512, 384);
  background(title);

  let red1 = color(237, 39, 36);
  startButton = createButton("START");
  startButton.mousePressed(drawInstructions);
  startButton.position(207, 299);
  startButton.style("font-family", "Optima bold");
  startButton.style("font-size", "30px");
  startButton.style("background-color", red1);
  
}

function drawInstructions() {
  background(237, 39, 36);
  startButton.remove();

This took way too long for me to figure out because I didn’t know how to use the remove syntax for startButton while also making sure it was a global variable that I could refer to in drawInstructions. Nevertheless, I’m glad I was able to eventually format it to do what I wanted in the end!

Embedded sketch

I have two separate sketches so far: one that contains the game itself and the win screen, and another that contains both the start screen and the instructions menu.

Try them out!

p.s. I haven’t yet inputted the reset sketch option, so you have to reset the program for it to work again.

Reflection and improvements

  • Trying to get the start button to not be displayed on the screen when function drawInstructions is called. Took me a hot second to figure it out, as I realized I was either formatting something wrong or not implementing a global variable when I needed to.
  • Possibly adding more characters to be found other than Waldo.
  • Still trying to figure out how to make it so that when your mouse is within the image of Waldo and you click on him, it takes you to the win screen. For now, it’s just when your mouse is pressed anywhere on the screen, you win.
  • I still have to embed the title screen and instructions into my game file, as well as a way to reset the game without having to restart p5js.

Welcome to you're "DOOM!"

Leave a Reply