Sketch 2026-04-17 16:24

function preload() {
  gameFont = loadFont('https://cdn.jsdelivr.net/npm/@fontsource/roboto@latest/files/roboto-latin-400-normal.woff');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  hitZoneY = height - 100; // Set hit zone near the bottom

  // Set default font and text size for game UI
  textFont(gameFont);
  textSize(24);
  textAlign(CENTER, CENTER);

  // Initialize Tone.js synthesizer
  synth = new Tone.PolySynth(Tone.Synth, {
    oscillator: {
      type: "triangle" // Simple waveform for beat sounds
    }
  }).toDestination(); // Send output to the speakers

  // Schedule beats using Tone.Loop
  // This loop will call scheduleBeat every "8n" (eighth note)
  beatLoop = new Tone.Loop(scheduleBeat, "8n").start(0);
  beatLoop.probability = 1; // Always trigger if pattern has a beat

  // Create initial crowd elements (start off-screen below)
  // Initially, the crowd is always 'person' on the first game attempt
  generateCrowd('person');
}

function scheduleBeat(time) {
  if (gameStarted && !gameOver) {
    if (pattern[patternIndex] === 1) { // If the current pattern step is a beat (1)
      beats.push({
        x: width / 2, // Beats start in the middle top
        y: 0,
        time: time // Store the scheduled time for potential future use
      });
      synth.triggerAttackRelease("C4", "8n", time); // Play a sound when a beat is added
    }
    patternIndex = (patternIndex + 1) % pattern.length; // Move to the next step in the pattern, looping at the end
  }
}

function draw() {
  background(20, 20, 40); // Dark background

  if (!gameStarted) {
    drawStartScreen(); // Show start screen
  } else if (gameOver) {
    drawGameOverScreen(); // Show game over screen with crowd animation
  } else {
    drawGamePlaying(); // Draw game elements during gameplay
  }
}

function drawStartScreen() {
  fill(255);
  textSize(48);
  text("Poison Rhythm Game", width / 2, height / 2 - 50);
  textSize(24);
  text("Hit the beats as they pass the red line!", width / 2, height / 2);
  textSize(18);
  text("Press any key or click to start", width / 2, height / 2 + 50);
}

function drawGameOverScreen() {
  // Animate crowd covering the screen
  push();
  textAlign(CENTER, CENTER); // Ensure emojis are centered
  for (let i = 0; i < crowd.length; i++) {
    let c = crowd[i];
    // Move crowd elements upwards until they cover their target y-position
    if (c.y > height * crowdCoverProgress) {
      c.y -= crowdCoverSpeed * height;
      // Fade in crowd elements as they move up
      c.alpha = map(c.y, height * crowdCoverProgress, height, 255, 0);
      c.alpha = constrain(c.alpha, 0, 255);
    } else {
      c.y = constrain(c.y, 0, height);
      c.alpha = 255;
    }

    fill(255, c.alpha); // Emojis generally render in their own colors, but this sets the alpha

    let emoji;
    if (c.type === 'person') {
      emoji = random(peopleEmojis);
    } else if (c.type === 'dog') {
      emoji = random(dogEmojis);
    } else if (c.type === 'water') {
      emoji = random(waterEmojis);
    }
    textSize(c.size * 1.5); // Increase size for better emoji visibility
    text(emoji, c.x, c.y);
  }
  pop();

  // Update crowd cover progress
  crowdCoverProgress += crowdCoverSpeed;
  crowdCoverProgress = constrain(crowdCoverProgress, 0, 1);

  // Once the crowd fully covers the screen, display the final game over message
  if (crowdCoverProgress >= 1) {
    fill(0, 100); // Semi-transparent black overlay
    rect(0, 0, width, height);

    textFont(gameFont);
    textSize(64);
    fill(255, 0, 0); // Red "Game Over"
    text("GAME OVER", width / 2, height / 2 - 50);
    textSize(36);
    fill(255);
    text("Final Score: " + score, width / 2, height / 2);
    textSize(24);
    text("Press any key or click to restart", width / 2, height / 2 + 50);
  }
}

function drawGamePlaying() {
  // Draw hit zone line
  stroke(255, 0, 0);
  strokeWeight(4);
  line(0, hitZoneY, width, hitZoneY);

  // Draw beats and update their positions
  noStroke();
  fill(255);
  for (let i = beats.length - 1; i >= 0; i--) {
    let beat = beats[i];
    ellipse(beat.x, beat.y, beatSize, beatSize);
    beat.y += beatSpeed; // Move beat downwards

    // Remove beats that go off-screen below the hit zone (misses)
    if (beat.y > hitZoneY + beatSize / 2) {
      handleMiss(); // Player missed this beat
      beats.splice(i, 1); // Remove the beat
      feedbackText = "MISS!";
      feedbackAlpha = 255;
      feedbackX = beat.x;
      feedbackY = beat.y - beatSize; // Position feedback above the missed beat
    }
  }

  // Draw score and health UI
  fill(255);
  textSize(24);
  textAlign(LEFT, TOP);
  text("Score: " + score, 20, 20);
  textAlign(RIGHT, TOP);
  text("Health: " + health, width - 20, 20);

  // Draw feedback text (PERFECT, MISS, TOO EARLY/LATE)
  if (feedbackAlpha > 0) {
    fill(255, feedbackAlpha);
    textSize(36);
    textAlign(CENTER, BOTTOM);
    text(feedbackText, feedbackX, feedbackY);
    feedbackAlpha -= 5; // Fade out feedback text
  }
}

function handleMiss() {
  health--;
  if (health <= 0) {
    gameOver = true;
    lossCount++; // Increment loss count when the game ends
    Tone.Transport.stop(); // Stop audio scheduling
  }
}

function keyPressed() {
  if (!gameStarted) {
    startGame(); // Start game if not already started
  } else if (gameOver) {
    restartGame(); // Restart game if game over
  } else {
    checkHit(); // Check for a hit during gameplay
  }
  return false; // Prevent default browser behavior (e.g., scrolling)
}

function mousePressed() {
  if (!gameStarted) {
    startGame(); // Start game if not already started
  } else if (gameOver) {
    restartGame(); // Restart game if game over
  } else {
    checkHit(); // Check for a hit during gameplay
  }
  return false; // Prevent default browser behavior (e.g., context menu)
}

async function startGame() {
  gameStarted = true;
  gameOver = false;
  score = 0;
  health = 5;
  beats = [];
  patternIndex = 0;
  crowdCoverProgress = 0; // Reset crowd animation

  // Clear existing crowd and generate new one based on lossCount
  // If lossCount is 0 or 1, generate 'person'.
  // If lossCount is 2, generate 'dog'.
  // If lossCount is 3 or more, generate 'water'.
  let crowdType;
  if (lossCount >= 3) { // 3rd loss and beyond
    crowdType = 'water';
  } else if (lossCount >= 2) { // 2nd loss
    crowdType = 'dog';
  } else { // 0th or 1st loss
    crowdType = 'person';
  }
  generateCrowd(crowdType);

  // Ensure audio context starts on user interaction
  await Tone.start();
  Tone.Transport.bpm.value = 120; // Set BPM (beats per minute)
  Tone.Transport.start(); // Start Tone.js transport
}

function generateCrowd(type) {
  crowd = []; // Clear existing crowd
  for (let i = 0; i < crowdDensity; i++) {
    crowd.push({
      x: random(width),
      y: random(height, height * 2), // Start below the canvas
      size: random(16, 32),
      alpha: 0,
      type: type // Store the type of crowd member ('person', 'dog', or 'water')
    });
  }
}

function restartGame() {
  startGame();
}

function checkHit() {
  let hit = false;
  let closestBeatIndex = -1;
  let minDistance = beatSize / 2; // Hit window radius around the red line
  let hitBeatX = width / 2; // Default x-position for feedback

  // Find the closest beat within the hit window
  for (let i = 0; i < beats.length; i++) {
    let beat = beats[i];
    let distance = abs(beat.y - hitZoneY);
    if (distance < minDistance) {
      minDistance = distance;
      closestBeatIndex = i;
      hit = true;
      hitBeatX = beat.x; // Store x-position of the hit beat
    }
  }

  if (hit) {
    // Perfect hit!
    score += 10;
    beats.splice(closestBeatIndex, 1); // Remove the hit beat
    feedbackText = "PERFECT!";
    feedbackAlpha = 255;
    feedbackX = hitBeatX; // Use the stored x
    feedbackY = hitZoneY - beatSize;
    synth.triggerAttackRelease("G4", "16n"); // Play a different sound for hit
  } else {
    // Missed hit or hit too early/late
    handleMiss();
    feedbackText = "TOO EARLY/LATE!";
    feedbackAlpha = 255;
    feedbackX = hitBeatX; // Use default or last known beat x for feedback placement
    feedbackY = hitZoneY - beatSize;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  hitZoneY = height - 100; // Adjust hit zone position
}