let restartButton;

let xWaldo;

let yWaldo;

let xCo, yCo, r, g, b; 

let haveWonGame; // global boolean variable - when we find waldo, we set it to true

let playButton;

let startButton;

let foundWaldo;

  // chooses random location for waldo

​

function preload() {

  // images

  waldo = loadImage("wheres waldo.png");

  popArt = loadImage("waldo-ConvertImage.png");

  beach = loadImage("where.png");

  head = loadImage ("head.png");

  youWin = loadImage ("you win.png")

  youLose = loadImage ("you lose.png")

  title = loadImage("title.png");

  context = loadImage("context.png");

  // sounds

  soundFormats('mp3');

  themeSong = loadSound('theme.mp3');

  splash = loadSound('splash.mp3');

  // fonts

  optimaFontBold = loadFont("Optima-ExtraBlack.otf");

  optimaFont = loadFont ("OPTIMA.TTF")

}

​

function setup() { // setup automatically runs first so it doesn't need to be initialized

  createCanvas(512, 384);

  // at start we haven't won, so put it at false

  haveWonGame = false;

  drawTitleScreen (); // calls title screen to start game

  xWaldo = random(50, 450); // chooses random value between 50 and 450

  yWaldo = random(100, 350); // chooses random value between 50 and 400

}

​

function drawTitleScreen() { // title screen

  background(title);

  // start button customizations

  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() { // instruction screen

  themeSong.play (); // plays theme song

  background(237, 39, 36);

  startButton.remove(); // removes start button from being displayed on screen

  // instructions title

  fill(255);

  textFont(optimaFontBold, 50); // (font name, font size)

  text("INSTRUCTIONS:", 20, 80);

​

  // instructions body text

  textFont(optimaFont, 19);

  noStroke();

  text("A randomly generated scene will pop up", 22, 110);

  text("on the screen, and you need to find Waldo", 22, 130);

  text("amongst the crowd. Once you're sure", 22, 150);

  text("you've found him, click on his little body", 22, 170);

  text("and the game will reveal whether you've", 22, 190);

  text("succeeded or not.", 22, 210);

  text("For context, this is Waldo -->", 22, 250);

​

  // instructions image of waldo

  image(context, 360, 98, 664 / 5.5, 1416 / 5.5); // (image name, x coordinate, y coordinate, width of image, height of image)

​

  // play button

  let blue1 = color(0, 156, 219);

  playButton = createButton("PLAY");

  playButton.mousePressed(draw);

  playButton.position(22, 285);

  playButton.style("font-family", "Optima bold");

  playButton.style("font-size", "30px");

  playButton.style("background-color", blue1);

}

​

function draw() {

playButton.remove () 

​

  background(beach);

  if (haveWonGame) {

    // if you've won the game (found waldo), it will call the drawVictory function

    drawVictory(); // defined below in a separate function, it calls onto it, so drawVictory then calls onto the drawVictory function below

  } else {

    // if you don't win-- which is the beginning of the game-- it calls this function to plot waldo on the screen

    // draw waldo

      image(waldo, xWaldo, yWaldo, 664/ 29, 1416/ 29); // (image name, x coordinate, y coordinate, width of image, height of image)

//rect (0, 0, 512, 90)

  // mouse circle

  noFill ();

  stroke (237, 39, 36);

  strokeWeight (2)

  ellipse (mouseX+3.5, mouseY+8, 50, 50)

    if ((mouseX > xWaldo) && (mouseX < xWaldo + 664/ 29) && (mouseY > yWaldo) && (mouseY < 1416/ 29 + yWaldo)) {

  if (mouseIsPressed) {

    // checks if you won the game

    haveWonGame = true; // so this calls the function written above when you press the mouse

    }

  }

}

  }

  // FOR MAKING NOISE IN WATER???

  // if ((mouseX > 0) && (mouseX < 0 + 512) && (mouseY > 0) && (mouseY < 0 + 90)) {

   //  splash.play ();

  // }  

// }

​

function drawVictory() { // this is the function it calls if you find waldo and click on him

image (youWin, 0, 0, 512, 384);

​

}

​

function drawLoss() {

  image (drawLoss, 0, 0, 512, 384)

}

​

​

// ADDITIONAL RESOURCES:

​

// TO MAKE WIN AND LOSE SCREENS

// https://www.youtube.com/watch?v=SpfJUlSusj0

// https://stackoverflow.com/questions/56191291/how-do-i-create-a-you-won-screen-for-a-p5-js-game

​

// click to play

// https://www.youtube.com/watch?v=0Cdxvg9teNY

// https://www.youtube.com/watch?v=YcezEwOXun4

// https://www.youtube.com/watch?v=W5acxqEd-rc

​

// HOW TO RESET A SKETCH

// https://www.youtube.com/watch?v=lm8Y8TD4CTM

​

// resources: happy coding, coding train, check useful bookmarks

​

// REF. TO SOUND SKETCH FOR CLICKING BUTTONS

// REF. TO P5 EXAMPLES UNDER FILE

​

​

​

//   determining variables

//   r = random(0, 255); // chooses random value between 0-255

//   g = random(0, 255);

//   b = random(0, 255);

//   xCo = random(0, 500); // you could also plot width or height here if you change the size of the canvas // x = random(width)

//   yCo = random(0, 500);

​

//   noStroke();

//   fill(r, g, b, 200); // colors, if you add 4th value (alpha), it will affect the transparency (rgb is from 0-255 but even if the input is above 255 the concentration will stay the same)

//   image(head, xCo, yCo, 37, 35.7); // random coordinate between 0 and 400 for both x and y, 24 is just size of circle

​