​

// 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

​

// to preoload placeholder images with the same dimensions as your intended image if its not yet ready yet http://placekitten.com/

// so function preload then cat = loadImage (http://placekitten.com/400/400) for example

​

// REF. TO SOUND SKETCH FOR CLICKING BUTTONS

// REF. TO P5 EXAMPLES UNDER FILE

​

// global variables

let x;

let y;

let waldo;

let popArt;

let xCo, yCo, r, g, b; // you can declare multiple variables on the same line if you put a comma

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

let haveWonGame;

​

// where's waldo?

function setup() {

  createCanvas(512, 384);

  background(beach); // draws background once, so it doesn't keep layering

​

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

  haveWonGame = false;

​

  // chooses random location for waldo

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

  y = random(50, 300); // chooses random value between 50 and 400

}

​

function preload() {

  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")

}

​

function draw() {

  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, x, y, 24.9, 53.1); // (image name, x coordinate, y coordinate, width of image, height of image)

  }

​

  if (mouseIsPressed) {

    // checks if you won the game

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

  }

}

​

function drawVictory() {

  // this is the function it calls if you find waldo and click on him

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

//   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

​

​

  //  image(popArt, 0, 0, 500, 500);

​

  //   textSize(40);

  //   fill (0);

  // text('You found Waldo!', 80, 150);

}

​

// function resetSketch() {

//     if (keyPressed === true);

//      }

​

function drawLoss () {

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

}

​