let help = "Press Space Bar to Toggle FullScreen"; //Helps Users toggle into Full Screen

​

//IMGs

let landscape;

let clouds; 

let grass;

let shellImg;

let mario;

​

//Sound 

let mainThemeSong;

let inGameMusic;

let mainButtonSound;

let gameButtonSound;

let winSound;

let loseSound;

let starSound;

let loseLifeSound;

​

// Vertical offset for the title image

let yOffset = 0; // Initial vertical offset 

let yOffsetSpeed = 0.1; // Speed of Movement/ Oscillation

​

//Sets Variable to Track Stage of Game- Begins at 0

// 0 - Landing page

// 1 - Game instructions

// 2 - Main game screen

// 3 - Win screen

// 4 - Lose screen

let gameStage = 0;

​

// Arrays to Hold Objects Used in function gameScreen

let stars = [];

let shells = [];

​

// Initial Score of the Player

let score = 0;

​

// Number of Lives the Player Starts With

let lives = 3; 

​

// Variables to Track Time-Related Information

let totalTime; //Total time throughout game

let landingTime; //Time in landing screen

let instructionTime; //Time in game instructions screen

let gameTime; //Time in game screen

let timeLimit= 30; //Time limit in game set to 30

​

//Player Controls

let playerDirection = 1; // 1 for right, -1 for left

let leftArrowPressed = false; // Tracks if left arrow is pressed

​

//Player (p1)

let p1X = 700; //Player x-position

let p1Y = 50; //Player y-position

const pWidth = 100; //Player Width

const pHeight = 130; //Player Height

​

// Preload Function to Load Assets Before Setup

function preload(){

  //IMGS

  landscape= loadImage('mario-castle.jpeg');

  title = loadImage('title.png');

  clouds = loadImage('clouds.jpg');

  grass = loadImage('grass.jpeg');

  shellImg = loadImage('blueshell.png');

  mario = loadImage('mario.png')

  //Sounds

  mainThemeSong = loadSound("main-theme.mp3");

  mainButtonSound = loadSound('main-buttonsound.mp3');

  gameButtonSound= loadSound('here-we-go-Mario.mp3');

  inGameMusic= loadSound('ingamemusic.mp3');

  winSong = loadSound('winSong.mp3');

  loseSong = loadSound('loseSong.mp3');

  starSound = loadSound('starSound.mp3');

  lostLifeSound = loadSound('lostLifeSound.mp3');

}

​

function setup() {

// Creates a square canvas based on the window height.

  createCanvas(windowHeight, windowHeight); 

//Output the Comment 'help' to Help Users toggle to Full Screen to Start Game 

  print(help);

//Play Main Theme/Intro Song when in Landing Page

  mainThemeSong.play();

​

  // Creates 12 Stars and Adds Them to the Stars Array

for (let i = 0; i < 12; i++) {

  stars.push(new Star());

}

​

// Creates a 8 Shells and Adds Them to the Shells Array

for (let i = 0; i < 8; i++) {

  shells.push(new Shell());

}

}

​

​

function draw() {

// Updates the totalTime Variable with the Current Time Since Program Started

  totalTime = millis();

//Game Stages 

  // If the game stage is 0, call the landingPage() function to display the landing page.

  if(gameStage == 0){

    landingPage();

  }

  // If the game stage is 1, call the gameInstructions() function to display the game instructions.

  if (gameStage == 1){

    gameInstructions();

  }

  // If the game stage is 2, call the gameScreen() function to render the main game screen.

  if (gameStage == 2){

    gameScreen();

  }

  // If the game stage is 3, call the winScreen() function to display the win screen.

  if (gameStage == 3){

    winScreen();

  }

  // If the game stage is 4, call the loseScreen() function to display the lose screen.

  if (gameStage == 4){

    loseScreen();

  }

  // Check for collisions between player and shells

  for (let i = 0; i < shells.length; i++) {

    shells[i].checkCollision(p1X, p1Y, pWidth, pHeight);

  }

}

​

// Function to display the landing page of the game

function landingPage(){

//Reset for Next Game

// Reset lives to 3 when game is restarted

  lives = 3;

​

// Clear stars array and populate it with new Star objects

  stars = [];

    for (let i = 0; i < 12; i++) {

      stars.push(new Star());

  }

// Reset the collided property of each star

  for (let i = 0; i < stars.length; i++) {

      stars[i].collided = false;

  }

// Reset score to 0

  score = 0;

​

//Landing Page Content

// Record the time when the landing page is displayed

  landingTime = totalTime;

// Sets the background to the landscape image

  background(landscape);

// Adjusts the yOffset based on a sine function to create a floating effect for the title image

  yOffset += yOffsetSpeed * sin(frameCount * 0.1);

//Draws the title image with the adjusted yOffset

  image(title, 80, -200 + yOffset, 1280, 1100);

//Button- Click to Start

  //Rectangle to Resemble Button 

  fill('rgba(255,255,255,0.83)');

  stroke('rgba(255,255,255,0.83)')

  rect(580, 500 + yOffset, 330, 95, 20);

​

  //Text Inside Button

  textSize(30);

  textFont("Mina");

  fill('#000000');

  text("Click to Start", 658, 560 + yOffset);

​

// Highlights the button when the mouse hovers over it (is within the frame of the rectangle)

  if (mouseX >=580 && mouseX <=909 && mouseY>=500 && mouseY<=594 ){

  //Rectangle

  fill('#FFD5DB');

  stroke('#FFD5DB')

  rect(580, 500 + yOffset, 330, 95, 20);

  //Text within Rectangle

  fill('#000000');

  text("Click to Start", 658, 560 + yOffset);

}

​

//Helps transition to the game instructions page when the button is pressed

  if (mouseX >=580 && mouseX <=909 && mouseY>=500 && mouseY<=594 && mouseIsPressed == true){

  //Moves to gameStage 1, which is instructions page

  gameStage = 1;

  //When button is pressed mainButtonSound will play

  mainButtonSound.play();

}

// Ensures that the main theme song is playing until users moves to the next page.

 if (!mainThemeSong.isPlaying()) {

        mainThemeSong.play();

    }

// Ensures that lose song stops playing

 if (loseSong.isPlaying()) {

        loseSong.stop();

    }  

// Ensures that win song stops playing

 if (winSong.isPlaying()) {

        winSong.stop();

    }  

// Ensures that if Lost Life Sound is playing it stops

 if (lostLifeSound.isPlaying()) {

      lostLifeSound.stop();

  }

}

​

// Function to display the game instructions

function gameInstructions(){

// Records the time when the landing page is displayed

  instructionTime = totalTime;

// Ensures that the main theme song is not playing

 if (mainThemeSong.isPlaying()) {

        mainThemeSong.stop();

    }

​

// Sets the background color to a light blue

  background('#4FD2FC');

​

// Displays a cloud background image

  image(clouds, 0, 0, width,height/4);

//Title of Page

  textSize(40);

  textFont("Mina"); //Mina font from Google Fonts

  textStyle(BOLD);

  fill('white');

  stroke('#056C9C');

  strokeWeight('2');

  text('GAME INSTRUCTIONS', 538, 315);

//Instructions

  textSize(25);

  textStyle(NORMAL);

  textFont("Mina"); //Mina font from Google Fonts

  fill('white');

//Display Instructional Text

  text('Welcome to Star Chaser! The goal is to collect as many stars within the', 338, 430);

    text('the time limit while preserving your three lives. Use your arrow keys to', 342, 510);

    text('navigate Mario to avoid enemies and hazards. Keeping an eye on the timer', 342, 595);

    text('and your remaining lives, aim to collect as many stars as possible ', 342, 680);

    text('before time runs out. Good luck on your star-collecting adventure!', 338, 760);

​

//Button- Start Game

 //Rectangle to Resemble Button 

  fill('rgba(255,255,255,0.83)');

  stroke('rgba(255,255,255,0.83)')

  rect(1210, 795 , 200, 80, 20);

  //Text Inside Button

  textSize(28);

  textFont("Mina");

  fill('#000000');

  text("Start Game", 1238, 845);

// Highlights the button when the mouse hovers over it (is within the frame of the rectangle)

     if (mouseX >= 1210 && mouseX <= 1410 && mouseY >= 800 && mouseY <= 880){

  //Rectangle

  fill('#0689C5');

  stroke('#0689C5')

 rect(1210, 795 , 200, 80, 20);

  //Text within Rectangle

  fill('#FFFFFF');

  stroke('#08ACF8')

  strokeWeight(1);

 text("Start Game", 1238, 845);

}

//Helps transition to the game screen page when the button is pressed

   if (mouseX >= 1210 && mouseX <= 1410 && mouseY >= 800 && mouseY <= 880 && mouseIsPressed == true){

      //Moves to gameStage 2, which is game page

      gameStage = 2;

      //When button is pressed gameButtonSound will play

      gameButtonSound.play();

  }

}

​

// Function to display the game screen

function gameScreen(){

// Sets background color to Green

  background('#92CA5B');

// Displays grass images

  //Right Side

  image(grass, 0, 0, 1500, 1800);

  //Left Side

   image(grass, 780, 0, 1500, 1800);

 // Displays stars

  for (let i = 0; i < stars.length; i++) { // Loop through stars array

    stars[i].display();

  }

 // Displays shells and handle their movement

   for (let i = 0; i < shells.length; i++) { // Loop through shells array

    shells[i].move(); //Moves Shells

    shells[i].bounce(); //Helps Shells Bounce around Sketch

    shells[i].display(); //Helps Display Shells on Sketch

  }

//Draws a Rectangle for Information Boxes on Top of Sketch

  //Right Box

  fill('rgba(255,255,255,0.83)');

  stroke('rgba(255,255,255,0.83)')

  rect(40, 35 , 370, 70, 20);

  //Left Box

  fill('rgba(255,255,255,0.83)');

  stroke('rgba(255,255,255,0.83)')

  rect(1030, 35 , 370, 70, 20);

​

// Ensures in-game music is looping

  if (!inGameMusic.isPlaying()) {

    inGameMusic.loop(); 

  }

// Ensures in-game music is playing

   if (!inGameMusic.isPlaying()) {

        inGameMusic.play();

    }

// Displays the Player's Score

  textFont("Mina");

  fill('black');

  stroke('white');

  strokeWeight(3);

  textSize(30);

  text('Points:', 58, 80);

  text(score, 168, 80);

// Displays the Player's Remaining Lives

  textFont("Mina");

  fill('black');

  stroke('white');

  strokeWeight(4);

  textSize(30);

  text('Lives:', 280,80 );

  text(lives, 370, 80);

// Calculates and display the remaining time

  landingTime = landingTime;

//Calculates the Game Time by Subtracting the Landing Time from the Current Total Time to then Converting the Results to Seconds by Dividing by 1000 and rounding down using the int() function.

  gameTime = int((totalTime-landingTime)/1000);

// Displays text indicating time remaining

  textFont("Mina");

  fill('black');

  stroke('white');

  strokeWeight(3);

  textSize(30);

  text('Time Remaining:', 1070, 80);

//Displays the calculated remaining time

  text(timeLimit - gameTime, 1316, 80);

//Game Outcomes

//If the score reaches 60 (maximum number of points) then the game will stop and take you to the win screen

  if (score>=60){

    inGameMusic.stop();

    gameStage = 3;

    winSong.play();

  }

//If lives reach 0 then the game will stop and take you to the lose screen

  if (lives<=0){

    inGameMusic.stop();

    gameStage = 4;

    loseSong.play();

  }

//If time reaches 0 then the game will stop and take you to the lose screen

  if (gameTime>=timeLimit){

    inGameMusic.stop();

    gameStage = 4;

    loseSong.play();

  }

​

// Arrow keys pressed to move the player accordingly

//Left Arrow

if (keyIsDown(LEFT_ARROW)) {

  playerDirection = -1; // Set direction to left

  p1X -= 12; // Move left

//Right Arrow

} else if (keyIsDown(RIGHT_ARROW)) {

  playerDirection = 1; // Set direction to right

  p1X += 12; // Move right

}

//Up Arrow

if (keyIsDown(UP_ARROW)) {

  p1Y -= 12; // Move up

} 

//Down Arrow

else if (keyIsDown(DOWN_ARROW)) {

  p1Y += 12; // Move down

}

​

// Moves the player within canvas boundaries

  p1X = constrain(p1X, pWidth / 2, width - pWidth / 2); // Constrain x position

  p1Y = constrain(p1Y, 0, height - pHeight); // Constrain y position

​

​

// Draws the image based on player direction

if (playerDirection === -1) {

  // Flips the image horizontally when moving left

  scale(-1, 1); // Flips horizontally

  image(mario, -p1X, p1Y, pWidth, pHeight); // Draws image

  scale(-1, 1); // Resets scale

} else {

  // Otherwise, draws the image normally

  image(mario, p1X, p1Y, pWidth, pHeight); // Draw image 

}

​

// Check for collision between player and stars

    for (let i = 0; i < stars.length; i++) {

        if (stars[i].checkCollision(p1X, p1Y, pWidth, pHeight)) {

            // Remove the collided star from the array

            stars.splice(i, 1);

            // Increase the score by 5 points

            score += 5;

        }

    }

}

​

// Function to display winning screen if player wins

function winScreen(){

// Sets background color to Green

  background('#92CA5B');

// Displays grass images

  //Right Side

  image(grass, 0, 0, 1500, 1800);

  //Left Side

   image(grass, 780, 0, 1500, 1800);

//Displays 'You Win' in the center of the sketch

  textFont("Mina");

  fill('white');

  stroke('black');

  strokeWeight(3);

  textSize(200);

  text('You Win', width/4, height/2);

//Button- Play Again

  //Rectangle to Resemble Button 

  fill('rgba(255,255,255,0.83)');

  stroke('rgba(255,255,255,0.83)')

  rect(580, 600, 330, 95, 20);

  //Text within Rectangle

  textSize(30);

  textFont("Mina");

  fill('#000000');

  text("Play Again", 675, 658);

  // Highlights the button when the mouse hovers over it (is within the frame of the rectangle)

  if (mouseX >= 580 && mouseX <= 910 && mouseY >= 500 && mouseY <= 695) {

   //Rectangle 

  fill('#59863B');

  stroke('#59863C')

  rect(580, 600, 330, 95, 20);

  //Text within Rectangle

  fill('#FFFFFF');

  text("Play Again", 675, 658);

}

​

//Helps transition back to the landing page when the button is pressed

  if (mouseX >= 580 && mouseX <= 910 && mouseY >= 500 && mouseY <= 695 && mouseIsPressed == true){

  //Moves to gameStage 0, which is landing page page

  gameStage = 0;

  //When button is pressed mainButtonSound will play

  mainButtonSound.play();

}

}

​

function loseScreen(){

// Sets background color to Green

  background('#92CA5B');

// Displays grass images

  //Right Side

  image(grass, 0, 0, 1500, 1800);

  //Left Side

  image(grass, 780, 0, 1500, 1800);

//Displays 'You Lose' in the center of the sketch

  textFont("Mina");

  fill('white');

  stroke('black');

  strokeWeight(3);

  textSize(200);

  text('You Lose', 323, height/2);

//Button- Play Again

  //Rectangle to Resemble Button 

  fill('rgba(255,255,255,0.83)');

  stroke('rgba(255,255,255,0.83)')

  rect(580, 600, 330, 95, 20);

  //Text within Rectangle

  textSize(30);

  textFont("Mina");

  fill('#000000');

  text("Play Again", 675, 658);

  // Highlights the button when the mouse hovers over it (is within the frame of the rectangle)

  if (mouseX >= 580 && mouseX <= 910 && mouseY >= 500 && mouseY <= 695) {

   //Rectangle 

  fill('#59863B');

  stroke('#59863C')

  rect(580, 600, 330, 95, 20);

  //Text within Rectangle

  fill('#FFFFFF');

  text("Play Again", 675, 658);

}

​

//Helps transition back to the landing page when the button is pressed

  if (mouseX >= 580 && mouseX <= 910 && mouseY >= 500 && mouseY <= 695 && mouseIsPressed == true){

  //Moves to gameStage 0, which is landing page page

  gameStage = 0;

//When button is pressed mainButtonSound will play

  mainButtonSound.play();

  }

}

​

// Function to adjust the canvas size and redraw the contents whenever the window size is changed

function windowResized(){

  resizeCanvas(windowWidth, windowHeight);

}

​

// Function to handle when key is pressed 

function keyTyped() {

  // Pressing the space bar toggles fullscreen mode

  if (key === ' ') {

    toggleFullscreen();

  }

}

​

// Function to help toggle fullscreen

function toggleFullscreen() {  

  let fs = fullscreen();{ // Get the current fullscreen state

    fullscreen(!fs); // Toggle fullscreen state

  }

}