var screen = 0;

var y = -20; // y- coordinate for falling ball

var x = 200; // x- coordinate for falling ball

var speed = 2;

var score = 0;

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

var avatar1, avatar2; 

var platformWidth = 120; // width of avatar

var platformHeight = 250; // height of avatar

var cover, ball;

let selectedAvatar; // Variable to store the selected avatar

let myFont1, myFont2, myFont3;

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');

  myFont3 = loadFont('RubikBubbles-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.jpg"); // Load cover2 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(); // Play song 2 for the start screen

    startScreen();

  } else if (screen == 1) {

    playSong2(); // Play song 2 for the avatar selection screen

    avatarSelectionScreen();

  } else if (screen == 2) {

    playSong1(); // Play song 1 during the game

    gameOn();

  } else if (screen == 3) {

    playSong2(); // Play song 2 during the end screen

    endScreen();

  }

}

​

// Start screen (screen 0)

function startScreen() {

  background(0);

  imageMode(CORNER);

  tint(255, 150); // Set the image opacity (200 is semi-opaque, 255 is fully opaque)

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

  noTint(); // Reset tint to default for other elements

  fill(255);

  textAlign(CENTER);

  textFont(myFont3);

  textSize(70);

  noStroke();

  text("CLOUDY  WITH  A", width / 2, height / 2 - 115);

  text("CHANCE  OF  MEATBALLS", width / 2, height / 2 - 45);

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

  textFont(myFont1);

  textSize(40);

  stroke('red');

  text("the game", width / 2 + 150, height / 2);

​

  textFont(myFont2);

  // Hover detection for "START"

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

    fill('red');

    textSize(60); // Make "START" bigger and red when hovered

  } else {

    fill(225);

    textSize(50); // Normal "START" size

  }

  noStroke();

  text("START", width / 2, height / 2 + 100); // Correctly positioned START button

}

​

// Avatar selection screen (screen 1)

function avatarSelectionScreen() {

  background(0);

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

  textAlign(CENTER);

  textFont(myFont1);

  textSize(45);

  stroke('red');

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

​

  // Hover detection for avatar1

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

    image(avatar1, width / 2 - 170, height / 2 - 90, 170, 310); // Make avatar1 bigger when hovered

  } else {

    image(avatar1, width / 2 - 150, height / 2 - 70, 150, 300); // Normal size

  }

​

  // Hover detection for avatar2

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

    image(avatar2, width / 2 + 50, height / 2 - 70, 170, 310); // Make avatar2 bigger when hovered

  } else {

    image(avatar2, width / 2 + 50, height / 2 - 50, 150, 300); // Normal size

  }

}

​

// Game screen (screen 2)

function gameOn() {

  background(0);

  imageMode(CORNER);

  tint(225, 100); // Set the image opacity (200 is semi-opaque, 255 is fully opaque)

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

  noTint(); // Reset tint to default for other elements

  textFont(myFont2);

  textSize(30);

  fill(255);

  noStroke();

  text("score = " + score, 75, 50);

​

  imageMode(CENTER);

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

​

  if (selectedAvatar) {

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

  }

​

  y += speed;

​

  // Improved collision detection between ball and platform with exact boundaries

  let platformTop = height - platformHeight / 2 - 60;

  let ballBottom = y + 50; // 50 is half the ball's height (ball size is 100x100)

​

  // Reducing the collision range for the platform's width

  let collisionMargin = 10; // Adjust the margin to reduce the detection area further

​

  // Collision detection logic

  if (

    ballBottom > platformTop &&               // Ball bottom crosses platform top

    y < platformTop + platformHeight &&       // Ball is not too far below the platform

    x > mouseX - platformWidth / 2 + collisionMargin &&  // Narrow the left boundary

    x < mouseX + platformWidth / 2 - collisionMargin     // Narrow the right boundary

  ) {

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

  }

​

  // Reset ball position and increase speed if it goes off the screen

  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(255);

  textFont(myFont2);

  textSize(30);

  stroke('red');

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

​

  if (score > bestScore) {

    bestScore = score;

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

  }

  fill(255);

  stroke('red');

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

  // Detect hover for "PLAY AGAIN"

  if (mouseX > width / 2 - 100 && mouseX < width / 2 + 100 && mouseY > height / 2 + 100 && mouseY < height / 2 + 160) {

    fill('red');

    textSize(40); // Make "PLAY AGAIN" bigger when hovered

  } else {

    fill(225);

    textSize(30);

    noStroke();

  }

  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 - 200 && mouseX < width / 2 && mouseY > height / 2 - 40 && mouseY < height / 2 + 200) {

      selectedAvatar = avatar1; // Flint selected

      screen = 2; // Start the game

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

      selectedAvatar = avatar2; // Sam selected

      screen = 2; // Start the game

    }

  } else if (screen == 3) {

    reset(); // Reset game variables

    screen = 0; // Go back to start screen

  }

}

​

// Randomize x-position of falling ball

function pickRandom() {

  x = random(20, width - 20);

}

​

// Reset game variables

function reset() {

  score = 0;

  speed = 2;

  y = -20;

  x = random(20, width - 20); // Reset x-position to random

}

​

// Music control function to play song 1 (game music)

function playSong1() {

  if (!song1Playing) {

    song2.stop();       // Stop song2 before playing song1

    song1.loop();       // Loop song1

    song1Playing = true;

    song2Playing = false; // Ensure song2 is marked as not playing

  }

}

​

// Music control function to play song 2 (menu music)

function playSong2() {

  if (!song2Playing) {

    song1.stop();       // Stop song1 before playing song2

    song2.loop();       // Loop song2

    song2Playing = true;

    song1Playing = false; // Ensure song1 is marked as not playing

  }

}

​