xxxxxxxxxx233
// global variableslet xWaldo;let yWaldo;let startButton;let gameState = "startup"; // can be 'title', 'instructions', 'play', 'win', or 'lose'function preload() { // images waldo = loadImage("wheres waldo.png"); beach = loadImage("where.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("water splash.mp3"); boing = loadSound("boing.mp3"); laughter = loadSound("laughter.mp3"); snore = loadSound("snore.mp3"); ouch = loadSound("ouch.mp3"); yippee = loadSound("yippee.mp3"); violin = loadSound("violin.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);}function restartGame() { // print("Restarting game"); gameState = "title"; // calls on "title" in draw, which calls function drawTitleScreen(); as the first screen // chooses random values to plot waldo xWaldo = random(50, 450); // random value between 50 and 450 yWaldo = random(100, 350); // random value between 50 and 400 // START button design and position startButton = createButton("START"); startButton.mousePressed(changeToInstructions); // calls changeToInstructions function which will then call the instructions screen let red1 = color(237, 39, 36); startButton.position(207, 299); startButton.style("font-family", "Optima bold"); startButton.style("font-size", "30px"); startButton.style("background-color", red1);}function drawTitleScreen() { // title screen background(title);}function changeToInstructions() { startButton.remove(); // removes start button from being displayed on screen gameState = "instructions"; // calls the instructions screen by referring to gameStates specified in function draw themeSong.play(); // plays theme song}function changeToPlay() { // when this function is called, it changes the gameState to "play" in draw which then calls function drawGame gameState = "play";}function drawInstructions() { // instructions screen background(237, 39, 36); // instructions title fill(255); textFont(optimaFontBold, 50); // (font name, font size) text("INSTRUCTIONS:", 20, 80); // instructions body text textFont(optimaFont, 19); noStroke(); text("A crowded beach 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("P.S., try to hover your cursor over objects", 22, 250); text("and people for little surprises each time!", 22, 270); textFont(optimaFontBold, 19); text("Press any key to start.", 22, 310); // instructions image of waldo image(context, 365, 98, 664 / 5.5, 1416 / 5.5); // (image name, x coordinate, y coordinate, width of image, height of image) if (keyIsPressed) { // if key is pressed, it changes the gameState to "play" in draw which then calls function drawGame to start the game gameState = "play"; }}function draw() { if (gameState == "startup") { // beginning of game restartGame(); } if (gameState == "title") { // title screen drawTitleScreen(); } if (gameState == "instructions") { // instructions screen drawInstructions(); } if (gameState == "play") { // gameplay screen drawGame(); } if (gameState == "win") { // win screen drawVictory(); } if (gameState == "lose") { // lose screen drawLoss(); }}function drawGame() { // gameplay screen background(beach); themeSong.stop(); // stops theme song from playing when you start the game // 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(); } } // plots waldo image(waldo, xWaldo, yWaldo, 664 / 32, 1416 / 32); // (image name, x coordinate, y coordinate, width of image, height of image) // circle that follows mouse noFill(); stroke(237, 39, 36); strokeWeight(2); ellipse(mouseX + 3.5, mouseY + 8, 50, 50); // if mouse is hovered over waldo's parameters let mouseInsideWaldo = mouseX > xWaldo && mouseX < xWaldo + 664 / 32 && mouseY > yWaldo && mouseY < 1416 / 32 + yWaldo; if (mouseInsideWaldo === true) { if (mouseIsPressed) { // and mouse is pressed over waldo's parameters // checks if you won the game gameState = "win"; // calls win screen from game states in function draw yippee.play(); // plays yippee sound effect } } else if (mouseIsPressed && !mouseInsideWaldo) { gameState = "lose"; // calls lose screen from game states in function draw violin.play(); // plays sad violin }}function drawVictory() { // this is the function it calls if you find waldo and click on him image(youWin, 0, 0, 512, 384); // restart text fill(255); noStroke(); textFont(optimaFontBold, 19); text("Press any key to restart.", 140, 330); if (keyIsPressed) { gameState = "startup"; // if key is pressed, restarts game }}function drawLoss() { image(youLose, 0, 0, 512, 384); // restart text fill(255); noStroke(); textFont(optimaFontBold, 19); text("Press any key to restart.", 140, 330); if (keyIsPressed) { gameState = "startup"; // if key is pressed, restarts game violin.stop(); // stops playing violin }}