let backgroundImage;

let treeScreenBackground; // New variable for tree screen background

let gameState = 'start'; // Initial state is 'start'

let christmasTree;

​

function preload() {

  backgroundImage = loadImage('background.png');

  treeScreenBackground = loadImage('treescreen.png');

  christmasTree = loadImage('christmas_tree.png');

}

​

function setup() {

  createCanvas(700, 400);

  backgroundImage.resize(width, height);

  christmasTree.resize(christmasTree.width * scaleFactor, christmasTree.height * scaleFactor);

}

​

function draw() {

  // Check the current game state and execute the corresponding function

  if (gameState === 'start') {

    background(backgroundImage);

    drawStartScreen();

  } else if (gameState === 'end') {

    background(backgroundImage);

    drawEndScreen();

  } else if (gameState === 'experience') {

    background(backgroundImage);

    drawExperienceScreen();

  } else if (gameState === 'tree') {

    background(treeScreenBackground); // Change the background to the tree screen background

    drawTreeScreen();

  } else if (gameState === 'game') {

    // Add your game logic here

  }

}

​

function drawStartScreen() {

  // Draw the start screen

  fill(255);

  textSize(32);

  text('Start Screen', width / 2 - 100, height / 2);

}

​

function drawEndScreen() {

  // Draw the end screen

  fill(255);

  textSize(32);

  text('End Screen', width / 2 - 100, height / 2);

}

​

function drawExperienceScreen() {

  // Draw the experience screen

  fill(255);

  textSize(32);

  text('Experience Screen', width / 2 - 100, height / 2);

  drawChristmasTree();

}

​

function drawTreeScreen() {

  // Draw the tree screen background

  // No need to set the background here; it's done in the draw() function

  // Center the Christmas tree

  let x = (width - christmasTree.width) / 2;

  let y = (height - christmasTree.height) / 2;

  image(christmasTree, x, y);

}

​

function drawChristmasTree() {

  // Draw the Christmas tree

  let x = width - christmasTree.width;

  let y = height - christmasTree.height;

  image(christmasTree, x, y);

}

​

function mousePressed() {

  if (gameState === 'start') {

    gameState = 'experience';

  } else if (gameState === 'experience') {

    // Check if the mouse click is over the Christmas tree image

    let x = width - christmasTree.width;

    let y = height - christmasTree.height;

    if (mouseX >= x && mouseX <= x + christmasTree.width && mouseY >= y && mouseY <= y + christmasTree.height) {

      gameState = 'tree';

    }

  } else if (gameState === 'tree') {

    gameState = 'game';

  } else if (gameState === 'game') {

    gameState = 'end';

  } else if (gameState === 'end') {

    gameState = 'start';

  }

}

​

​

​