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 backgroundMusic;

let musicPlaying = false; // Start with music off

let obstacleImage;

let startBackground; 

​

​

function preload() {

  swimmer = loadImage('01.png');

  backgroundMusic = loadSound('small-waves-onto-the-sand-143040.mp3');

  obstacleImage = loadImage('shark-2.png'); // Load the obstacle image

  startBackground = loadImage('background.jpg'); // Load the background image

​

}

​

​

​

function setup() {

  createCanvas(windowWidth, windowHeight); // Set initial canvas size

  textAlign(CENTER, CENTER);

  textSize(20);

  swimmerX = width / 4; // Set initial swimmer position relative to canvas size

  swimmerY = height / 2; // Set swimmer Y to be center of canvas

  scaleFactor = width / 650; // Assuming 650 is your original canvas width

  // Update swimmer size based on window size

  swimmerWidth = 50 * scaleFactor; // Adjust swimmer width

  swimmerHeight = 50 * scaleFactor; // Adjust swimmer height

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight); // Resize canvas when window size changes

  scaleFactor = width / 650; // Update scale factor when resizing

  swimmerX = width / 4; // Update swimmer position based on new width

  swimmerY = height / 2; // Keep swimmer Y centered

}

​

​

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

  image(startBackground, 0, 0, width, height); // Draw the background image to cover the entire canvas

  fill(0);

  textSize(40);

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

  textSize(20);

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

  textSize(15);

  text("Remember To Jump When You See The Sharks!", width / 2, height / 1.7);

}

​

​

​

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

  if (gameState === 'start') {

    startGame();

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

    restartGame();

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

    nextLevel();

  }

}

​

function keyPressed() {

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

    jump();

  } 

}

​

function jump() {

  isJumping = true;

  verticalVelocity = jumpForce;

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

    jumpSound.play();

  }

}

​

function startGame() {

  gameState = 'play';

  score = 0;

  coinCount = 0;

  obstacles = [];

  coins = [];

  spawnObstacle();

  spawnCoin();

  waveAmplitude = 100;

​

  // Start playing background music

  if (backgroundMusic.isLoaded()) {

    backgroundMusic.loop();

  }

}

​

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 + swimmerWidth) { // Update to use swimmer width

      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 - swimmerHeight / 2) { // Adjusted based on swimmer height

      swimmerY = waveY - swimmerHeight / 2;

      isJumping = false;

      verticalVelocity = 0;

    }

  } else {

    swimmerY = waveY - swimmerHeight / 2; // Adjusted based on swimmer height

  }

​

  // 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 + swimmerWidth / 2, swimmerY + swimmerHeight / 2); // Adjusted for swimmer size

  rotate(waveAngle);

  imageMode(CENTER);

  image(swimmer, 0, 0, swimmerWidth, swimmerHeight); // Use the adjusted swimmer size

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

} // End of playGame function

​

function restartGame() {

  startGame();

}

​

function nextLevel() {

  gameState = 'play';

  coinCount = 0;

  obstacles = [];

  coins = [];

  spawnObstacle();

  spawnCoin();

}

​

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

}

​

class Obstacle {

  constructor() {

    this.x = width;

    this.y = height / 2;

    this.width = 90;

    this.height = 30;

  }

​

  update(wavePoints) {

    this.x -= 5;

    let closestPoint = wavePoints.reduce((closest, point) => {

      return (Math.abs(point.x - this.x) < Math.abs(closest.x - this.x) ? point : closest);

    });

    this.y = closestPoint.y - this.height;

  }

display() {

    image(obstacleImage, this.x, this.y, this.width, this.height); // Use image instead of rect

  }

​

  collidesWith(playerX, playerY) {

    return (

      playerX + 25 > this.x &&

      playerX + 25 < this.x + this.width &&

      playerY + 25 > this.y &&

      playerY + 25 < this.y + this.height

    );

  }

}

​

class Coin {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.size = 20;

  }

​

  update() {

    this.x -= 5;

  }

​

  display() {

    fill(255, 223, 0);

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

  }

​

  collidesWith(playerX, playerY) {

    return (

      playerX + 25 > this.x - this.size / 2 &&

      playerX + 25 < this.x + this.size / 2 &&

      playerY + 25 > this.y - this.size / 2 &&

      playerY + 25 < this.y + this.size / 2

    );

  }

}

​