var screen = 0;

var y = -20;

var x = 200;

var speed = 2;

var score = 0;

var avatar1, avatar2;

var platformWidth = 50;

var platformHeight = 100;

var cover;

var ball;

// let selectedAvatar = avatar1; // Variable to store the selected avatar, default to avatar1

​

// image preload

function preload() {

  avatar1 = loadImage("Flint.png"); // Flint as avatar1

  avatar2 = loadImage("Sam.png");   // Sam as avatar2

  cover = loadImage("cover.jpg");   // Load cover image

  ball = loadImage("meatball.png"); // Load ball image

}

​

function setup() {

  createCanvas(600, 400);

  reset(); // Ensure everything is reset at the start

}

​

// screens

function draw() {

  // Handle screens based on the screen variable

  if (screen == 0) {

    startScreen(); // Main start screen

  } else if (screen == 1) {

    avatarSelectionScreen(); // New screen to choose the avatar

  } else if (screen == 2) {

    gameOn(); // Game screen

  } else if (screen == 3) {

    endScreen(); // End screen

  }

}

​

// screen 1 (start screen)

function startScreen() {

  background(0);

  imageMode(CORNER); // Ensure the image is drawn from the top-left corner

  image(cover, 0, 0, width, height); // Display the cover image as the background, stretching it to fit the canvas

​

  // Add text for the start screen

  fill(255);

  textAlign(CENTER);

  textSize(30);

  text("Cloudy With a Chance of Meatballs", width / 2, height / 2 - 10);

  textSize(15);

  text("THE GAME", width / 2 + 75, height / 2 + 10);

  textSize(20);

  text("Start", width / 2, height / 2 + 60);

}

​

// screen 2 (avatar selection screen)

function avatarSelectionScreen() {

  background(0); // Black background for the avatar selection screen

  fill(255);

  textAlign(CENTER);

  textSize(25);

  text("CHOOSE YOUR AVATAR", width / 2, 50);

​

  // Display avatar options for selection

  image(avatar1, width / 2 - 150, height / 2 - 50, 100, 100); // Flint on the left

  image(avatar2, width / 2 + 50, height / 2 - 50, 100, 100);  // Sam on the right

  textSize(15);

  text("Click to select your avatar", width / 2, height - 50);

}

​

// screen 3 (game on screen)

function gameOn() {

  background(0); // Black background for the game

  textSize(15);

  fill(255);

  text("score = " + score, 40, 30);

​

  imageMode(CENTER);

  image(ball, x, y, 60, 60); // Falling ball

​

  // Display the selected avatar as the platform

  if (selectedAvatar) {

    image(selectedAvatar, mouseX, height - platformHeight / 2, platformWidth, platformHeight);

  }

​

  // Move the ball down

  y += speed;

​

  // Collision detection between the ball and platform

  var distance = dist(x, y, mouseX, height - platformHeight / 2);

​

  if (distance < 50) { // Adjusted collision detection

    screen = 3; // End the game when the ball touches the platform

  }

​

  // Increase speed and score, reset ball position if it falls below the screen

  if (y > height) {

    y = -20;

    speed += 0.5;

    score += 1;

    pickRandom(); // Randomize the x-position of the ball

  }

}

​

// screen 4 (end screen)

function endScreen() {

  background(0); // Black background for the end screen

  fill(255);

  textAlign(CENTER);

  textSize(30);

  text("GAME OVER", width / 2, height / 2);

  textSize(20);

  text("Score = " + score, width / 2, height / 2 + 20);

  text("Play Again", width / 2, height / 2 + 40);

}

​

// Mouse press interactions to switch screens

function mousePressed() {

  if (screen == 0) {

    screen = 1; // Move to avatar selection screen

  } else if (screen == 1) {

    // Check if the user clicked on avatar1 or avatar2

    if (mouseX > width / 2 - 150 && mouseX < width / 2 - 50 && mouseY > height / 2 - 50 && mouseY < height / 2 + 50) {

      selectedAvatar = avatar1; // Flint is selected

      screen = 2; // Start the game

    } else if (mouseX > width / 2 + 50 && mouseX < width / 2 + 150 && mouseY > height / 2 - 50 && mouseY < height / 2 + 50) {

      selectedAvatar = avatar2; // Sam is selected

      screen = 2; // Start the game

    }

  } else if (screen == 3) {

    reset(); // Reset the game variables and screens when restarting

    screen = 0; // Go back to the start screen after Game Over

  }

}

​

// Randomize the x-position of the falling ball

function pickRandom() {

  x = random(20, width - 20);

}

​

// Reset game variables when starting over

function reset() {

  score = 0;

  speed = 2;

  y = -20;

  x = 200;

}

​