Sketch 2026-04-17 17:30

function preload() {
  // Load sound effects
  // Using p5.Noise for simple sounds, but you could load .wav or .mp3 files
  jumpSound = new p5.Noise('white'); // 'white', 'pink', 'brown'
  jumpSound.amp(0); // Start silent
  jumpSound.start();

  gameOverSound = new p5.Noise('brown');
  gameOverSound.amp(0); // Start silent
  gameOverSound.start();
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100); // Use HSB for vibrant colors
  noStroke(); // No outlines on shapes
  textSize(24);
  textAlign(CENTER, CENTER);

  // Initialize player position
  playerX = width / 4;
  playerY = height - playerSize - 50; // 50 pixels above the bottom ground line

  // Start audio on user interaction
  userStartAudio(); // IMPORTANT for web audio
}

function draw() {
  background(0, 0, 0); // Black background

  if (gameState === 'playing') {
    updatePlayer();
    updateObstacles();
    checkCollisions();
    displayScore();
  } else if (gameState === 'gameOver') {
    displayGameOver();
  }

  drawPlayer();
  drawObstacles();
  drawGround();
}

function updatePlayer() {
  // Apply gravity
  playerVelocityY += gravity;
  playerY += playerVelocityY;

  // Prevent player from falling through the ground
  if (playerY + playerSize / 2 >= height - 50) {
    playerY = height - playerSize / 2 - 50;
    playerVelocityY = 0;
    isOnGround = true;
  } else {
    isOnGround = false;
  }

  // Score increases as time passes (simulating distance)
  score += 0.5;
  if (score > highScore) {
    highScore = score;
  }
}

function drawPlayer() {
  fill(180, 100, 100); // Neon blue
  // Draw the player as a square
  rectMode(CENTER);
  rect(playerX, playerY, playerSize, playerSize, 5); // Rounded corners
}

function jump() {
  if (isOnGround) {
    playerVelocityY = jumpForce;
    isOnGround = false;

    // Play jump sound
    jumpSound.amp(0.3, 0.05); // Fade in to 0.3 amplitude
    jumpSound.freq(440); // A4 note
    setTimeout(() => jumpSound.amp(0, 0.5), 100); // Fade out after 100ms
  }
}

function Obstacle(x, y, w, h, type) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.type = type; // 'spike' or 'block'

  this.move = function() {
    this.x -= obstacleSpeed;
  };

  this.display = function() {
    fill(60, 100, 100); // Neon green
    if (this.type === 'block') {
      rectMode(CORNER);
      rect(this.x, this.y, this.w, this.h, 5); // Rounded corners
    } else if (this.type === 'spike') {
      // Draw a triangle for a spike
      triangle(this.x, this.y + this.h, // Bottom-left
               this.x + this.w / 2, this.y, // Top-middle
               this.x + this.w, this.y + this.h); // Bottom-right
    }
  };
}

function generateObstacle() {
  let type = random(['spike', 'block']);
  let obstacleWidth, obstacleHeight, obstacleY;

  if (type === 'spike') {
    obstacleWidth = random(20, 40);
    obstacleHeight = random(30, 60);
    obstacleY = height - 50 - obstacleHeight; // Spikes sit on the ground line
  } else { // type === 'block'
    obstacleWidth = random(50, 100);
    obstacleHeight = random(40, 100);
    obstacleY = height - 50 - obstacleHeight; // Blocks sit on the ground line
  }

  let newObstacle = new Obstacle(width, obstacleY, obstacleWidth, obstacleHeight, type);
  obstacles.push(newObstacle);

  // Schedule the next obstacle generation
  nextObstacleTime = frameCount + random(40, 120); // Random frames until next obstacle
}

function updateObstacles() {
  // Generate new obstacles
  if (frameCount >= nextObstacleTime) {
    generateObstacle();
  }

  // Move and display obstacles
  for (let i = obstacles.length - 1; i >= 0; i--) {
    obstacles[i].move();
    // Remove obstacles that are off-screen
    if (obstacles[i].x + obstacles[i].w < 0) {
      obstacles.splice(i, 1);
    }
  }
}

function drawObstacles() {
  for (let obstacle of obstacles) {
    obstacle.display();
  }
}

function checkCollisions() {
  for (let obstacle of obstacles) {
    if (obstacle.type === 'block') {
      // Simple rect-rect collision for blocks
      if (
        playerX + playerSize / 2 > obstacle.x &&
        playerX - playerSize / 2 < obstacle.x + obstacle.w &&
        playerY + playerSize / 2 > obstacle.y &&
        playerY - playerSize / 2 < obstacle.y + obstacle.h
      ) {
        endGame();
        return;
      }
    } else if (obstacle.type === 'spike') {
      // Simplified rect-triangle collision for spikes
      // Check if player's bottom touches the spike's top point, or player's sides overlap
      let spikeTipX = obstacle.x + obstacle.w / 2;
      let spikeTipY = obstacle.y;

      if (
        playerX + playerSize / 2 > obstacle.x &&
        playerX - playerSize / 2 < obstacle.x + obstacle.w &&
        playerY + playerSize / 2 > spikeTipY // Player's bottom is below spike tip
      ) {
        endGame();
        return;
      }
    }
  }
}

function endGame() {
  gameState = 'gameOver';
  noLoop(); // Stop the draw loop

  // Play game over sound
  gameOverSound.amp(0.4, 0.05); // Fade in to 0.4 amplitude
  gameOverSound.freq(220); // A3 note
  setTimeout(() => gameOverSound.amp(0, 0.5), 200); // Fade out after 200ms
}

function restartGame() {
  gameState = 'playing';
  score = 0;
  playerY = height - playerSize - 50;
  playerVelocityY = 0;
  isOnGround = true;
  obstacles = [];
  nextObstacleTime = 0;
  loop(); // Resume the draw loop
}

function displayScore() {
  fill(0, 0, 100); // White text
  text(`Score: ${floor(score)}`, width - 100, 50);
  text(`High Score: ${floor(highScore)}`, width - 100, 80);
}

function displayGameOver() {
  fill(0, 0, 100); // White text
  text('GAME OVER', width / 2, height / 2 - 40);
  text(`Final Score: ${floor(score)}`, width / 2, height / 2);
  text(`High Score: ${floor(highScore)}`, width / 2, height / 2 + 40);
  text('Tap or press any key to restart', width / 2, height / 2 + 100);
}

function drawGround() {
  fill(0, 0, 20); // Dark grey ground
  rectMode(CORNER);
  rect(0, height - 50, width, 50); // The ground line
}

function keyPressed() {
  if (gameState === 'playing') {
    if (key === ' ' || key === 'ArrowUp') { // Spacebar or Up Arrow
      jump();
    }
  } else if (gameState === 'gameOver') {
    restartGame();
  }
}

function mousePressed() {
  if (gameState === 'playing') {
    jump();
  } else if (gameState === 'gameOver') {
    restartGame();
  }
  // Prevent default browser behavior (e.g., right-click context menu)
  return false;
}

function touchStarted() {
  if (gameState === 'playing') {
    jump();
  } else if (gameState === 'gameOver') {
    restartGame();
  }
  // Prevent default browser behavior (e.g., scrolling, zooming)
  return false;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Re-center player if canvas changes size
  playerY = height - playerSize - 50;
}