var screen = 0;

var y = -20;

var x = 200;

var speed = 2;

var score = 0;

var bestScore = 0; // Variable to store the best score

var avatar1, avatar2;

var platformWidth = 50;

var platformHeight = 100;

var cover;

var ball;

let selectedAvatar; // Variable to store the selected avatar

let myFont;

let song;

let songPlaying = false; // Variable to track if the song is playing

​

// Preload assets

function preload() {

  myFont1 = loadFont('SixtyfourConvergence-Regular-VariableFont_BLED,SCAN,XELA,YELA.ttf');

  myFont2 = loadFont('Anton-Regular.ttf');

  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

  song = loadSound("Meatier Shower.mp3");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  let savedBestScore = localStorage.getItem('bestScore');

  if (savedBestScore !== null) {

    bestScore = int(savedBestScore); // Load best score from localStorage if it exists

  }

​

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

}

​

function windowResized(){

  resizeCanvas(windowWidth, windowHeight);

}

​

// Main draw function

function draw() {

  if (screen == 0) {

    startScreen(); // Main start screen

  } else if (screen == 1) {

    avatarSelectionScreen(); // Avatar selection screen

  } else if (screen == 2) {

    gameOn(); // Game screen

  } else if (screen == 3) {

    endScreen(); // End screen

  }

}

​

// Start screen (screen 0)

function startScreen() {

  background(0);

  imageMode(CORNER); 

  image(cover, 0, 0, width, height); // Display cover image

  fill(0);

  textAlign(CENTER);

  textFont(myFont2);

  textSize(30);

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

  textFont(myFont1);

  textSize(15);

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

  textFont(myFont2);

  textSize(20);

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

}

​

// Avatar selection screen (screen 1)

function avatarSelectionScreen() {

  background(0);

  fill(255);

  textAlign(CENTER);

  textFont(myFont1);

  textSize(25);

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

​

  image(avatar1, width / 2 - 150, height / 2 - 70, 100, 170); // Flint

  image(avatar2, width / 2 + 50, height / 2 - 50, 100, 160);  // Sam

}

​

// Game screen (screen 2)

function gameOn() {

  if (!songPlaying) { // Play the song only if it's not playing

    song.loop();

    songPlaying = true;

  }

​

  background(0);

  textFont(myFont2);

  textSize(15);

  fill(255);

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

​

  imageMode(CENTER);

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

​

  if (selectedAvatar) {

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

  }

​

  y += speed;

​

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

  if (distance < 50) {

    screen = 3; // End game when ball hits platform

  }

​

  if (y > height) {

    y = -20;

    speed += 0.5;

    score += 1;

    pickRandom(); // Randomize ball's x-position

  }

}

​

// End screen (screen 3)

function endScreen() {

  if (songPlaying) { // Stop the song when the game is over

    song.stop();

    songPlaying = false;

  }

​

  background(0);

  fill('rgb(177,10,10)');

  textAlign(CENTER);

  textFont(myFont1);

  textSize(60);

  stroke('red');

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

  fill(225);

  textFont(myFont2);

  textSize(30);

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

​

  if (score > bestScore) {

    bestScore = score;

    localStorage.setItem('bestScore', bestScore); // Save new best score to localStorage

  }

​

  text("BEST SCORE = " + bestScore, width / 2, height / 2 + 60); // Display best score

  stroke(0);

  fill(225);

  text("PLAY AGAIN", width / 2, height / 2 + 150);

}

​

// Mouse interaction to switch screens

function mousePressed() {

  if (screen == 0) {

    screen = 1; // Move to avatar selection screen

  } else if (screen == 1) {

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

      selectedAvatar = avatar1; // Flint 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 selected

      screen = 2; // Start the game

    }

  } else if (screen == 3) {

    reset(); // Reset game variables and screens

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

  }

}

​

// Randomize x-position of 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;

}

​