let swimmer;

let swimmerX = 150;

let swimmerY;

let verticalVelocity = 0;

let gravity = 0.4;

let waveFrequency = 0.02;

let waveAmplitude = 100;

let maxWaveAmplitude = 300;

let waveSpeed = 0.075;

let waveXOffset = 50;

let waveAngle;

let speed = 5.5;

let riseSpeed = 2;

let obstacles = [];

let coins = [];

let isJumping = false;

let jumpForce = -10;

let score = 0;

let coinCount = 0;

let gameState = 'start';

let jumpSound;

let level = 1;

​

let musicOn = true; // To track music state

let instructionText = "Remember To Jump!";

let instructionIndex = 0; // To manage animated text

let instructionDelay = 100; // Delay in milliseconds for the animation

let instructionVisible = true; // To track visibility of instructions

let instructionTimer = 0; // Timer for showing the instruction text

let backgroundMusic;

let backgroundImg;

let showRules = false; // To track whether to show the rules page

​

function preload() {

  swimmer = loadImage('01.png');

  backgroundMusic = loadSound('Song1.mp3'); // Replace with your music file

  backgroundImg = loadImage('main.png'); // Vintage background image

}

​

function setup() {

  createCanvas(650, 500);

  textAlign(CENTER, CENTER);

  textSize(20);

  swimmerY = height / 2;

}

​

function draw() {

  background('#F8F1B0');

  if (gameState === 'start') {

    displayStartScreen();

  } else if (gameState === 'play') {

    playGame();

  } else if (gameState === 'win' || gameState === 'lose') {

    displayEndScreen();

  } else if (gameState === 'nextLevel') {

    displayNextLevelScreen();

  }

}

​

function displayStartScreen() {

  // Draw the vintage background if rules are not being shown

  if (!showRules) {

    image(backgroundImg, 0, 0, width, height); // Use the loaded vintage background

  }

  // If showing rules, display rules page

  if (showRules) {

    displayRulesPage(); // Show the rules page if toggled

  } else {

    fill(0);

    textSize(40);

    text("Surfer Game", width / 2, height / 3);

    textSize(20);

    text("Click to Start", width / 2, height / 2);

    // Music toggle option

    textSize(18);

    fill(musicOn ? 'green' : 'red');

    text(`Music: ${musicOn ? 'On' : 'Off'}`, width / 2, height / 2 + 30);

​

    // Show instructions if visible

    if (instructionVisible) {

      textSize(16);

      fill(0);

      text(instructionText.substring(0, instructionIndex), width / 2, height / 2 + 70);

      // Update instruction index for animation

      if (millis() - instructionTimer > instructionDelay) {

        instructionTimer = millis();

        if (instructionIndex < instructionText.length) {

          instructionIndex++;

        }

      }

    }

​

    // Button to show the rules page

    textSize(18);

    fill(0);

    text("Click for Rules", width / 2, height / 2 + 100);

  }

}

​

function mousePressed() {

  if (gameState === 'start') {

    // Check if the music toggle area is clicked

    if (mouseY > height / 2 + 10 && mouseY < height / 2 + 50) {

      // Toggle music

      musicOn = !musicOn;

      if (musicOn) {

        backgroundMusic.loop(); // Play music when toggled on

      } else {

        backgroundMusic.stop(); // Stop music when toggled off

      }

    } else if (mouseY > height / 2 + 70 && mouseY < height / 2 + 130) {

      // Toggle rules page

      showRules = true;

    } else {

      startGame(); // Start the game if the music toggle was not clicked

      instructionVisible = true; // Show instructions when starting the game

      instructionIndex = 0; // Reset instruction index

    }

  } else if (gameState === 'win' || gameState === 'lose') {

    restartGame();

  } else if (gameState === 'nextLevel') {

    nextLevel();

  }

}

​

function displayRulesPage() {

  // Set a solid color background for rules page

  background('#F8F1B0'); // Solid background color

  fill(0);

  textSize(30);

  text("Rules of the Seas: As Told by Sindbad", width / 2, 100);

  textSize(18);

  text(`Listen up, sailor! The waves be treacherous, and the monsters ever-hungry.

But if ye follow these rules, ye just might survive…`, width / 2, 150);

  text(`1. Ride the Waves: Keep yer balance on the surf!

2. Jump, You Fool!: Monsters be ahead—spacebar is yer friend.

3. Shiny Treasures: Coins are gold! Collect 10 to level up.

4. Avoid the Monsters: One hit and ye be fish food!

5. Sing to the Sea: Toggle yer music with a click—tune in or out.`, width / 2, 200);

​

  // Button to go back to the start screen

  textSize(20);

  text("I'm ready to sail!", width / 2, height - 100);

  // Allow clicking to go back to the start screen

  if (mouseIsPressed) {

    showRules = false; // Go back to the start screen

  }

}

​

​

function playGame() {

  // Wave creation and obstacle positioning

  fill(118, 170, 206);

  beginShape();

  let xOffset = waveXOffset;

  let waveY = 0;

  let wavePoints = [];

  for (let x = 0; x <= width; x += 10) {

    let y = map(noise(xOffset, yOffset), 0, 1, height / 2 - waveAmplitude, height / 2 + waveAmplitude);

    vertex(x, y);

    wavePoints.push({x, y});

    if (x >= swimmerX && x <= swimmerX + 10) {

      waveY = y;

      let nextY = map(noise(xOffset + waveFrequency, yOffset), 0, 1, height / 2 - waveAmplitude, height / 2 + waveAmplitude);

      waveAngle = atan2(nextY - y, 10);

    }

    xOffset += waveFrequency;

  }

  yOffset += 0.01;

  vertex(width, height);

  vertex(0, height);

  endShape(CLOSE);

​

  // Jumping mechanics

  if (isJumping) {

    verticalVelocity += gravity;

    swimmerY += verticalVelocity;

    if (swimmerY >= waveY - 25) {

      swimmerY = waveY - 25;

      isJumping = false;

      verticalVelocity = 0;

    }

  } else {

    swimmerY = waveY - 25;

  }

​

  // Draw and update obstacles

  for (let i = obstacles.length - 1; i >= 0; i--) {

    obstacles[i].update(wavePoints);

    obstacles[i].display();

    // Check for collision

    if (obstacles[i].collidesWith(swimmerX, swimmerY)) {

      gameState = 'lose';

    }

    // Remove off-screen obstacles

    if (obstacles[i].x < -50) {

      obstacles.splice(i, 1);

      score++;

      spawnObstacle();

    }

  }

​

  // Draw and update coins

  for (let i = coins.length - 1; i >= 0; i--) {

    coins[i].update();

    coins[i].display();

​

    // Check for collection of coin

    if (coins[i].collidesWith(swimmerX, swimmerY)) {

      coins.splice(i, 1);

      coinCount++;

      if (coinCount >= 10) {

        gameState = 'nextLevel';

      } else {

        spawnCoin();

      }

    }

​

    // Remove off-screen coins

    if (coins[i].x < -50) {

      coins.splice(i, 1);

      spawnCoin();

    }

  }

​

  // Draw the swimmer

  push();

  translate(swimmerX + 25, swimmerY + 25);

  rotate(waveAngle);

  imageMode(CENTER);

  image(swimmer, 0, 0, 50, 50);

  pop();

​

  // Increase wave amplitude

  if (waveAmplitude < maxWaveAmplitude) {

    waveAmplitude += 0.05;

  }

​

  // Move wave

  waveXOffset += waveSpeed * 0.05;

​

  // Display score and coin count

  fill(0);

  text(`Score: ${score}`, width - 60, 30);

  text(`Coins: ${coinCount}`, width - 60, 60);

}

​

function displayEndScreen() {

  fill(0);

  textSize(40);

  if (gameState === 'win') {

    text("Congratulations!", width / 2, height / 3);

    textSize(24);

    text("You've reached a score of 20!", width / 2, height / 2);

  } else {

    text("Game Over", width / 2, height / 3);

    textSize(24);

    text(`Final Score: ${score}`, width / 2, height / 2);

  }

  textSize(20);

  text("Click to Restart", width / 2, height * 2 / 3);

}

​

function displayNextLevelScreen() {

  fill(0);

  textSize(40);

  text("Level 2", width / 2, height / 3);

  textSize(24);

  text("You've collected 10 coins!", width / 2, height / 2);

  textSize(20);

  text("Click to Continue", width / 2, height * 2 / 3);

}

​

function keyPressed() {

  if (key === ' ' && !isJumping && gameState === 'play') {

    jump();

  }

}

​

function jump() {

  isJumping = true;

  verticalVelocity = jumpForce;

  if (jumpSound && jumpSound.isLoaded()) {

    jumpSound.play();

  }

}

​

function spawnObstacle() {

  obstacles.push(new Obstacle());

}

​

function spawnCoin() {

  let coinX = random(width, width + 300);

  let coinY = random(height / 4, height / 2);

  coins.push(new Coin(coinX, coinY));

}

​

function startGame() {

  gameState = 'play';

  score = 0;

  coinCount = 0;

  obstacles = [];

  coins = [];

  spawnObstacle();

  spawnCoin();

  waveAmplitude = 100;

  if (musicOn) {

    backgroundMusic.loop(); // Play music when starting the game

  }

}

​

function restartGame() {

  gameState = 'start';

  instructionVisible = false; // Hide instructions

  instructionIndex = 0; // Reset instruction index

  if (musicOn) {

    backgroundMusic.loop(); // Play music when restarting the game

  }

}

​

function nextLevel() {

  level++;

  score += 20; // Increase score for next level

  gameState = 'play';

  waveAmplitude = 100; // Reset wave amplitude for next level

  obstacles = [];

  coins = [];

  spawnObstacle();

  spawnCoin();

  if (musicOn) {

    backgroundMusic.loop(); // Play music when going to next level

  }

}

​

// Obstacle and Coin classes remain unchanged

class Obstacle {

  constructor(x, y, width, height) {

    this.x = x;

    this.y = y;

    this.width = width;

    this.height = height;

  }

​

  display() {

    fill(255, 0, 0); // Red color for obstacles

    rect(this.x, this.y, this.width, this.height);

  }

​

  update() {

    this.x -= 5; // Move obstacle to the left

  }

}

​

class Coin {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.size = 20; // Size of the coin

  }

​

  display() {

    fill(255, 215, 0); // Gold color for coins

    ellipse(this.x, this.y, this.size);

  }

​

  update() {

    this.x -= 5; // Move coin to the left

  }

}

​