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 = 100;

var platformHeight = 160;

var cover;

var ball;

let selectedAvatar; // Variable to store the selected avatar

let myFont;

let song1, song2;

let song1Playing = false; // Variable to track if song1 is playing

let song2Playing = false; // Variable to track if song2 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

//   cover2 = loadImage("cover2.jpeg");   // Load cover image

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

  song1 = loadSound("Meatier Shower.mp3");  // Game music

  song2 = loadSound("The Mayor's Big Plan.mp3"); // Menu music

}

​

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) {

    playSong2();

    startScreen(); // Main start screen

  } else if (screen == 1) {

    playSong2();

    avatarSelectionScreen(); // Avatar selection screen

  } else if (screen == 2) {

    playSong1();

    gameOn(); // Game screen

  } else if (screen == 3) {

    playSong2();

    endScreen(); // End screen

  }

}

​

// Start screen (screen 0)

function startScreen() {

  background(0);

  imageMode(CORNER); 

 tint(255, 200); // Set the image opacity

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

noTint(); // Reset tint for other elements

  fill(225);

  textAlign(CENTER);

  textFont(myFont2);

  textSize(50);

  noStroke();

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

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

  strokeWeight(1);

  stroke('red');

  textFont(myFont1);

  textSize(20);

  text("THE GAME", width / 2 + 150, height / 2 + 20);

  fill(200);

 noStroke();

  textFont(myFont2);

  textSize(50);

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

}

​

// Avatar selection screen (screen 1)

function avatarSelectionScreen() {

  background(0);

  stroke('red');

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

  textAlign(CENTER);

  textFont(myFont1);

  textSize(35);

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

​

  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() {

  background(0);

   //imageMode(CORNER); 

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

  textFont(myFont2);

  textSize(15);

  stroke(0);

  fill(255);

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

​

  imageMode(CENTER);

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

​

  if (selectedAvatar) {

    image(selectedAvatar, mouseX, height - platformHeight / 2 - 15, 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() {

  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;

}

​

// Functions to control music playback

function playSong1() {

  if (!song1Playing) {

    song2.stop(); // Stop song2 if it's playing

    song1.loop(); // Play song1 in loop

    song1Playing = true;

    song2Playing = false;

  }

}

​

function playSong2() {

  if (!song2Playing) {

    song1.stop(); // Stop song1 if it's playing

    song2.loop(); // Play song2 in loop

    song2Playing = true;

    song1Playing = false;

  }

}

​

​