let compHighlight; // Variable storing highlighted computer image

let showDorm = false; // Flag to track whether to show the image or not

let mainFont, numFont, computerFont;

let showCompHighlight = false;

let showClosetHighlight=false;

let showMenu = false; // Flag to track if the menu should be shown

let computerBackground;

let snake;

let fruit;

let gameState = 'start';

let currentView = 'menu';

​

function preload() {

  img = loadImage('dormroomp.jpg'); // Load the image

  mainFont = loadFont('MisterGrape.otf');

  numFont = loadFont("crashingNumber.ttf");

  computerFont=loadFont("computerFont.otf")

  compHighlight = loadImage('comphighlight.jpg'); 

  compback = loadImage("computerbackground.jpeg");

  closetHighlight = loadImage("closetHighlight.jpg")

}

​

function setup() {

  createCanvas(850, 450);

  snake = new Snake(20); // Initialize snake with grid size of 20

  fruit = new Fruit(600, 600, 20); // Initialize fruit

}

​

function draw() {

  print(mouseX, mouseY);

  background(250, 249, 240);  // Set the default background color

​

  if (showMenu) {

    // Handle views within the menu (menu or snake game)

    if (currentView === 'menu') {

      resizeCanvas(800, 450);

      drawMenu();  // Show computer menu

    } else if (currentView === 'snake') {

      resizeCanvas(600, 600);

      background(250, 249, 240);

      frameRate(10);

      drawSnakeGame();  // Run the Snake game

    }

  } else if (currentView === 'closet') {

    resizeCanvas(450, 450);

    drawCloset();  // Show the closet interaction when in 'closet' view

  } else if (showDorm) {

    frameRate(60);

    // Handle the dorm view and computer/closet interaction

    if (showCompHighlight) {

      image(compHighlight, 0, 0, width, height);  // Display the computer hover image if true

    } else if (showClosetHighlight) {

      image(closetHighlight, 0, 0, width, height);  // Display the closet hover image if true

    } else {

      image(img, 0, 0, width, height);  // Display the dorm room image

    }

    checkHoverOverComputer();  // Check if hovering over the computer

    checkHoverOverCloset();  // Check if hovering over the closet

  } else {

    drawDoors();  // Draw the doors if neither menu nor dorm is being shown

  }

}

​

​

function drawDoors() {

  //Main page text

  textFont(mainFont);

  textSize(80);

  strokeWeight(5);

  textAlign(CENTER);

  text("Linus's Dorm experience",width/2,100);

  rectMode(CENTER);

​

  // Coordinates and dimensions for the doors

  let middleDoorX = width - 400;

  let doorY = height / 1.5;

  let doorW = 150;

  let doorH = 250;

​

  // Middle Door (Interaction on hover)

  if (mouseX > middleDoorX - doorW / 2 && mouseX < middleDoorX + doorW / 2 && 

      mouseY > doorY - doorH / 2 && mouseY < doorY + doorH / 2) {

    strokeWeight(5); // Thicker border on hover

  } else {

    strokeWeight(1); // Default stroke weight

  }

​

  // Draw the middle door

  fill(20, 180, 190);

  rect(middleDoorX, doorY, doorW, doorH);

  fill(250);

  rect(middleDoorX, height / 1.75, 50, 35);

  circle(middleDoorX + 50, doorY + 15, 15);

  fill(0);

  textAlign(CENTER);

  textFont(numFont);

  textSize(20);

  text('705', middleDoorX, (height / 1.75) + 5);

​

  // Left and Right doors (Not interactive)

  strokeWeight(1);

  fill(20, 180, 190);

  rect(width - 700, doorY, doorW, doorH);

  rect(width - 100, doorY, doorW, doorH);

  fill(250);

  rect(width - 700, height / 1.75, 50, 35);

  rect(width - 100, height / 1.75, 50, 35);

  circle(width - 650, doorY + 15, 15);

  circle(width - 50, doorY + 15, 15);

  fill(0);

  text('704', width - 700, (height / 1.75) + 5);

  text('706', width - 100, (height / 1.75) + 5);

}

​

function drawMenu() {

  background(50, 50, 50); // Change the background color for the menu

  image(compback,0,0,width,height)

  textFont(computerFont);

  textSize(50);

  fill(255);

  textAlign(CENTER);

  textSize(30);

  text("Press 1: Open Drum Machine", width / 2, 150);

  text("Press 2: Play Snake", width / 2, 250);

  text("Press ESC to go back", width / 2, 350);

}

function drawSnakeGame() {

  if (gameState === 'start') {

    // Display start screen

    fill(0);

    textAlign(CENTER);

    textSize(50);

    text("Snake Game", 600 / 2, 600 / 4);  // Game title

    textSize(36);

    text("Press ENTER to Start", 600/ 2 , 600/ 2);  // Instructions to start

    text("control using W A S D",  600/2, 600/2+100 )

  }

  else if (gameState === 'playing') {

    if (gameActive) {

      snake.update();  // Update the snake's position

      snake.draw();  // Draw the snake

      // Check if the snake eats the fruit

      if (snake.x === fruit.x && snake.y === fruit.y) {

        snake.grow();  // Make the snake grow

        fruit.move();  // Move the fruit to a new position

      }

      fruit.draw();  // Draw the fruit

      // Check if the game is over

      if (gameOver()) {

        gameState = 'gameOver';  // If game over, change state

      }

    }

  }

  else if (gameState === 'gameOver') {

    // Display "Game Over" screen

    fill(0);

    textAlign(CENTER);

    textSize(72);

    text("Game Over", width / 2, height / 4);  // Display "Game Over" text

    textSize(60);

    text(snake.body.length + 1, width / 2, height / 2);  // Display the snake's length as score

    textSize(36);

    text("Press ENTER to Play Again", width / 2, height * 0.75);  // Instructions to replay

  }

}

​

​

function mousePressed() {

  let middleDoorX = width - 400;

  let doorY = height / 1.5;

  let doorW = 150;

  let doorH = 250;

​

  // Check if the mouse is within the middle door to display the main room image

  if (!showDorm && mouseX > middleDoorX - doorW / 2 && mouseX < middleDoorX + doorW / 2 && 

      mouseY > doorY - doorH / 2 && mouseY < doorY + doorH / 2) {

    showDorm = true; // Set flag to true to show the dorm room image

    showCompHighlight = false; // Reset highlight to ensure no immediate transition to computer menu

    return; // Exit the function after entering the dorm room

  }

​

  // Check if the user clicks on the computer only after dorm room is shown

  if (showDorm && !showMenu && showCompHighlight) {

    showMenu = true; // Show the menu when the user clicks on the computer

  }

  if (showDorm && showClosetHighlight) {

    currentView = 'closet';  // Switch to the closet view

  }

}

​

function keyPressed() {

  // Handle transitions when the ESCAPE key is pressed

  if (keyCode === ESCAPE) {

    if (currentView === 'snake') {

      currentView = 'menu';  // Go back to the computer menu from the Snake game

    } else if (showMenu) {

      showMenu = false;  // Close the menu if it is open

    } else if (showDorm) {

      showDorm = false;  // Return to the previous scene (doors)

    }

  }

​

  // Handle the computer menu view

  if (showMenu) {

    if (currentView === 'menu') {

      if (key === '2') {

        currentView = 'snake';  // Switch to the Snake game when '2' is pressed

        gameState='start';

      }

    }

​

    if (currentView === 'snake') {

      if (gameState === 'start' && keyCode === ENTER) {

        // Start the Snake game when ENTER is pressed

        resetGame();

        gameState = 'playing';

      }

​

      if (gameState === 'gameOver' && keyCode === ENTER) {

        // Replay the Snake game when ENTER is pressed on the game over screen

        resetGame();

        gameState = 'playing';

      }

​

      if (gameState === 'playing') {

        snake.action(key);  // Pass the key to the snake's action method

      }

    }

  }

}

​

function gameOver() {

  // Check if the snake goes out of bounds

  if (snake.x < 0 || snake.x >= 600 || snake.y < 0 || snake.y >= 600) {

    return true;

  }

  // Check if the snake runs into its own body

  for (let i = 0; i < snake.body.length; i++) {

    if (snake.x === snake.body[i][0] && snake.y === snake.body[i][1]) {

      return true;

    }

  }

  return false;

}

​

// Function to reset the Snake game

function resetGame() {

  snake = new Snake(20);  // Reset the snake object

  fruit = new Fruit(600, 600, 20);  // Reset the fruit object

  gameActive = true;  // Reactivate the game

}

​

// Function to check if the mouse is hovering over the computer area

function checkHoverOverComputer() {

  let computerX = 344; // X coordinate of the c  omputer

  let computerY = 225; // Y coordinate of the computer

  let computerW = 130; // Width of the computer area

  let computerH = 93;  // Height of the computer area

​

  // Check if mouse is over the computer only when the user is in the dorm room and menu is not showing

  if (showDorm && !showMenu && mouseX > computerX && mouseX < computerX + computerW &&

      mouseY > computerY && mouseY < computerY + computerH) {

    showCompHighlight = true; // Show the hover image

  } else {

    showCompHighlight = false; // Revert back to the main image

  }

}

​

function checkHoverOverCloset() {

  let closetX = 660; // X coordinate of the closet

  let closetY = 90; // Y coordinate of the closet

  let closetW = 140; // Width of the computer area

  let closetH = 340;  // Height of the computer area

​

  // Check if mouse is over the computer only when the user is in the dorm room and menu is not showing

  if (showDorm && mouseX > closetX && mouseX < closetX + closetW &&

      mouseY > closetY && mouseY < closetY + closetH) {

    showClosetHighlight = true; // Show the hover image

  } else {

    showClosetHighlight = false; // Revert back to the main image

  }

} how would i incorporate this code into my functionality in this code: let img; // Variable to store the loaded image

let compHighlight; // Variable storing highlighted computer image

let showDorm = false; // Flag to track whether to show the image or not

let mainFont, numFont, computerFont;

let showCompHighlight = false;

let showClosetHighlight=false;

let showMenu = false; // Flag to track if the menu should be shown

let computerBackground;

let snake;

let fruit;

let gameState = 'start';

let currentView = 'menu';

​

function preload() {

  img = loadImage('dormroomp.jpg'); // Load the image

  mainFont = loadFont('MisterGrape.otf');

  numFont = loadFont("crashingNumber.ttf");

  computerFont=loadFont("computerFont.otf")

  compHighlight = loadImage('comphighlight.jpg'); 

  compback = loadImage("computerbackground.jpeg");

  closetHighlight = loadImage("closetHighlight.jpg")

}

​

function setup() {

  createCanvas(850, 450);

  snake = new Snake(20); // Initialize snake with grid size of 20

  fruit = new Fruit(600, 600, 20); // Initialize fruit

}

​

function draw() {

  print(mouseX, mouseY);

  background(250, 249, 240);  // Set the default background color

​

  if (showMenu) {

    // Handle views within the menu (menu or snake game)

    if (currentView === 'menu') {

      resizeCanvas(800, 450);

      drawMenu();  // Show computer menu

    } else if (currentView === 'snake') {

      resizeCanvas(600, 600);

      background(250, 249, 240);

      frameRate(10);

      drawSnakeGame();  // Run the Snake game

    }

  } else if (currentView === 'closet') {

    resizeCanvas(450, 450);

    drawCloset();  // Show the closet interaction when in 'closet' view

  } else if (showDorm) {

    frameRate(60);

    // Handle the dorm view and computer/closet interaction

    if (showCompHighlight) {

      image(compHighlight, 0, 0, width, height);  // Display the computer hover image if true

    } else if (showClosetHighlight) {

      image(closetHighlight, 0, 0, width, height);  // Display the closet hover image if true

    } else {

      image(img, 0, 0, width, height);  // Display the dorm room image

    }

    checkHoverOverComputer();  // Check if hovering over the computer

    checkHoverOverCloset();  // Check if hovering over the closet

  } else {

    drawDoors();  // Draw the doors if neither menu nor dorm is being shown

  }

}

​

​

function drawDoors() {

  //Main page text

  textFont(mainFont);

  textSize(80);

  strokeWeight(5);

  textAlign(CENTER);

  text("Linus's Dorm experience",width/2,100);

  rectMode(CENTER);

​

  // Coordinates and dimensions for the doors

  let middleDoorX = width - 400;

  let doorY = height / 1.5;

  let doorW = 150;

  let doorH = 250;

​

  // Middle Door (Interaction on hover)

  if (mouseX > middleDoorX - doorW / 2 && mouseX < middleDoorX + doorW / 2 && 

      mouseY > doorY - doorH / 2 && mouseY < doorY + doorH / 2) {

    strokeWeight(5); // Thicker border on hover

  } else {

    strokeWeight(1); // Default stroke weight

  }

​

  // Draw the middle door

  fill(20, 180, 190);

  rect(middleDoorX, doorY, doorW, doorH);

  fill(250);

  rect(middleDoorX, height / 1.75, 50, 35);

  circle(middleDoorX + 50, doorY + 15, 15);

  fill(0);

  textAlign(CENTER);

  textFont(numFont);

  textSize(20);

  text('705', middleDoorX, (height / 1.75) + 5);

​

  // Left and Right doors (Not interactive)

  strokeWeight(1);

  fill(20, 180, 190);

  rect(width - 700, doorY, doorW, doorH);

  rect(width - 100, doorY, doorW, doorH);

  fill(250);

  rect(width - 700, height / 1.75, 50, 35);

  rect(width - 100, height / 1.75, 50, 35);

  circle(width - 650, doorY + 15, 15);

  circle(width - 50, doorY + 15, 15);

  fill(0);

  text('704', width - 700, (height / 1.75) + 5);

  text('706', width - 100, (height / 1.75) + 5);

}

​

function drawMenu() {

  background(50, 50, 50); // Change the background color for the menu

  image(compback,0,0,width,height)

  textFont(computerFont);

  textSize(50);

  fill(255);

  textAlign(CENTER);

  textSize(30);

  text("Press 1: Open Drum Machine", width / 2, 150);

  text("Press 2: Play Snake", width / 2, 250);

  text("Press ESC to go back", width / 2, 350);

}

function drawSnakeGame() {

  if (gameState === 'start') {

    // Display start screen

    fill(0);

    textAlign(CENTER);

    textSize(50);

    text("Snake Game", 600 / 2, 600 / 4);  // Game title

    textSize(36);

    text("Press ENTER to Start", 600/ 2 , 600/ 2);  // Instructions to start

    text("control using W A S D",  600/2, 600/2+100 )

  }

  else if (gameState === 'playing') {

    if (gameActive) {

      snake.update();  // Update the snake's position

      snake.draw();  // Draw the snake

      // Check if the snake eats the fruit

      if (snake.x === fruit.x && snake.y === fruit.y) {

        snake.grow();  // Make the snake grow

        fruit.move();  // Move the fruit to a new position

      }

      fruit.draw();  // Draw the fruit

      // Check if the game is over

      if (gameOver()) {

        gameState = 'gameOver';  // If game over, change state

      }

    }

  }

  else if (gameState === 'gameOver') {

    // Display "Game Over" screen

    fill(0);

    textAlign(CENTER);

    textSize(72);

    text("Game Over", width / 2, height / 4);  // Display "Game Over" text

    textSize(60);

    text(snake.body.length + 1, width / 2, height / 2);  // Display the snake's length as score

    textSize(36);

    text("Press ENTER to Play Again", width / 2, height * 0.75);  // Instructions to replay

  }

}

​

​

function mousePressed() {

  let middleDoorX = width - 400;

  let doorY = height / 1.5;

  let doorW = 150;

  let doorH = 250;

​

  // Check if the mouse is within the middle door to display the main room image

  if (!showDorm && mouseX > middleDoorX - doorW / 2 && mouseX < middleDoorX + doorW / 2 && 

      mouseY > doorY - doorH / 2 && mouseY < doorY + doorH / 2) {

    showDorm = true; // Set flag to true to show the dorm room image

    showCompHighlight = false; // Reset highlight to ensure no immediate transition to computer menu

    return; // Exit the function after entering the dorm room

  }

​

  // Check if the user clicks on the computer only after dorm room is shown

  if (showDorm && !showMenu && showCompHighlight) {

    showMenu = true; // Show the menu when the user clicks on the computer

  }

  if (showDorm && showClosetHighlight) {

    currentView = 'closet';  // Switch to the closet view

  }

}

​

function keyPressed() {

  // Handle transitions when the ESCAPE key is pressed

  if (keyCode === ESCAPE) {

    if (currentView === 'snake') {

      currentView = 'menu';  // Go back to the computer menu from the Snake game

    } else if (showMenu) {

      showMenu = false;  // Close the menu if it is open

    } else if (showDorm) {

      showDorm = false;  // Return to the previous scene (doors)

    }

  }

​

  // Handle the computer menu view

  if (showMenu) {

    if (currentView === 'menu') {

      if (key === '2') {

        currentView = 'snake';  // Switch to the Snake game when '2' is pressed

        gameState='start';

      }

    }

​

    if (currentView === 'snake') {

      if (gameState === 'start' && keyCode === ENTER) {

        // Start the Snake game when ENTER is pressed

        resetGame();

        gameState = 'playing';

      }

​

      if (gameState === 'gameOver' && keyCode === ENTER) {

        // Replay the Snake game when ENTER is pressed on the game over screen

        resetGame();

        gameState = 'playing';

      }

​

      if (gameState === 'playing') {

        snake.action(key);  // Pass the key to the snake's action method

      }

    }

  }

}

​

function gameOver() {

  // Check if the snake goes out of bounds

  if (snake.x < 0 || snake.x >= 600 || snake.y < 0 || snake.y >= 600) {

    return true;

  }

  // Check if the snake runs into its own body

  for (let i = 0; i < snake.body.length; i++) {

    if (snake.x === snake.body[i][0] && snake.y === snake.body[i][1]) {

      return true;

    }

  }

  return false;

}

​

// Function to reset the Snake game

function resetGame() {

  snake = new Snake(20);  // Reset the snake object

  fruit = new Fruit(600, 600, 20);  // Reset the fruit object

  gameActive = true;  // Reactivate the game

}

​

// Function to check if the mouse is hovering over the computer area

function checkHoverOverComputer() {

  let computerX = 344; // X coordinate of the c  omputer

  let computerY = 225; // Y coordinate of the computer

  let computerW = 130; // Width of the computer area

  let computerH = 93;  // Height of the computer area

​

  // Check if mouse is over the computer only when the user is in the dorm room and menu is not showing

  if (showDorm && !showMenu && mouseX > computerX && mouseX < computerX + computerW &&

      mouseY > computerY && mouseY < computerY + computerH) {

    showCompHighlight = true; // Show the hover image

  } else {

    showCompHighlight = false; // Revert back to the main image

  }

}

​

function checkHoverOverCloset() {

  let closetX = 660; // X coordinate of the closet

  let closetY = 90; // Y coordinate of the closet

  let closetW = 140; // Width of the computer area

  let closetH = 340;  // Height of the computer area

​

  // Check if mouse is over the computer only when the user is in the dorm room and menu is not showing

  if (showDorm && mouseX > closetX && mouseX < closetX + closetW &&

      mouseY > closetY && mouseY < closetY + closetH) {

    showClosetHighlight = true; // Show the hover image

  } else {

    showClosetHighlight = false; // Revert back to the main image

  }

}