smilefacecatch

constructor() {
    this.x = random(width);      // Random starting X position
    this.y = -50;                // Start above the canvas
    this.speed = random(2, 5);   // Random falling speed
    this.size = random(30, 60);  // Random size for the smiley face
    this.caught = false;         // Flag to check if the face has been caught
  }

update() {
    if (!this.caught) {
      this.y += this.speed;
    }
  }

display() {
    if (!this.caught) {
      fill(255, 255, 0); // Yellow face color
      stroke(0);         // Black outline
      strokeWeight(2);
      circle(this.x, this.y, this.size); // Draw the main circle for the face

      // Eyes
      fill(0);
      circle(this.x - this.size * 0.2, this.y - this.size * 0.1, this.size * 0.1);
      circle(this.x + this.size * 0.2, this.y - this.size * 0.1, this.size * 0.1);

      // Mouth (a simple arc)
      noFill();
      arc(this.x, this.y + this.size * 0.1, this.size * 0.4, this.size * 0.2, 0, PI);
    }
  }

isOffscreen() {
    return this.y > height + this.size / 2;
  }

hits(catcher) {
    // Simple square collision detection for the catcher, circle for smiley face
    let catcherLeft = catcher.x - catcher.w / 2;
    let catcherRight = catcher.x + catcher.w / 2;
    let catcherTop = catcher.y - catcher.h / 2;
    let catcherBottom = catcher.y + catcher.h / 2;

    // Find the closest point on the catcher rectangle to the center of the smiley face circle
    let testX = this.x;
    let testY = this.y;

    if (this.x < catcherLeft) testX = catcherLeft;
    else if (this.x > catcherRight) testX = catcherRight;

    if (this.y < catcherTop) testY = catcherTop;
    else if (this.y > catcherBottom) testY = catcherBottom;

    // Calculate the distance between the closest point and the circle's center
    let distX = this.x - testX;
    let distY = this.y - testY;
    let distance = sqrt((distX * distX) + (distY * distY));

    // If the distance is less than or equal to the smiley face's radius, they are colliding
    return distance <= this.size / 2;
  }

constructor() {
    this.w = 120; // Catcher width
    this.h = 20;  // Catcher height
    this.x = width / 2; // Start in the middle
    this.y = height - this.h / 2 - 10; // Position slightly above the bottom edge
    this.speed = 10; // Movement speed
  }

update() {
    if (keyIsDown(LEFT_ARROW)) {
      this.x -= this.speed;
    }
    if (keyIsDown(RIGHT_ARROW)) {
      this.x += this.speed;
    }

    // Constrain the catcher to stay within the canvas boundaries
    this.x = constrain(this.x, this.w / 2, width - this.w / 2);
  }

display() {
    fill(0, 150, 255); // Blue catcher color
    stroke(0);
    strokeWeight(2);
    rectMode(CENTER);
    rect(this.x, this.y, this.w, this.h, 5); // Draw a rounded rectangle for the catcher
  }

function preload() {
  // Setup generated sound for catching a smiley face
  catchSound = new p5.Oscillator('sine'); // Sine wave oscillator
  catchSound.amp(0);                      // Start with 0 volume
  catchSound.freq(880);                   // Frequency: A5 (high pitch)
  catchEnv = new p5.Envelope();           // Envelope to control volume over time
  catchEnv.setADSR(0.01, 0.1, 0.5, 0.2);  // Attack, Decay, Sustain, Release times

  // Setup generated sound for missing a smiley face
  missSound = new p5.Oscillator('triangle'); // Triangle wave oscillator
  missSound.amp(0);
  missSound.freq(220);                    // Frequency: A3 (low pitch)
  missEnv = new p5.Envelope();
  missEnv.setADSR(0.01, 0.2, 0.1, 0.3);   // Attack, Decay, Sustain, Release times
}

function setup() {
  createCanvas(windowWidth, windowHeight); // Create a canvas that fills the window
  catcher = new Catcher();                 // Initialize the catcher
  gameState = PLAY;                        // Set initial game state
  score = 0;
  missed = 0;
  smileyFaces = [];
  lastSpawnTime = millis();                // Record the current time for spawning

  // Start the sound oscillators (they will only make sound when their amplitude is increased by the envelope)
  catchSound.start();
  missSound.start();
}

function draw() {
  background(220); // Light gray background

  if (gameState === PLAY) {
    // --- Game Logic when playing ---

    // Spawn new smiley faces at regular intervals
    if (millis() - lastSpawnTime > spawnInterval) {
      smileyFaces.push(new SmileyFace()); // Add a new smiley face to the array
      lastSpawnTime = millis();
    }

    // Update and display the catcher
    catcher.update();
    catcher.display();

    // Iterate through all smiley faces
    for (let i = smileyFaces.length - 1; i >= 0; i--) {
      let face = smileyFaces[i];
      face.update();
      face.display();

      // Check for collision with the catcher
      if (face.hits(catcher) && !face.caught) {
        face.caught = true; // Mark as caught to prevent multiple collisions
        score++;
        catchSound.amp(catchEnv); // Trigger the catch sound envelope
        catchEnv.play(catchSound);
        smileyFaces.splice(i, 1); // Remove the caught face from the array
      }

      // Check if the smiley face has gone off-screen (missed)
      if (face.isOffscreen() && !face.caught) {
        missed++;
        missSound.amp(missEnv); // Trigger the miss sound envelope
        missEnv.play(missSound);
        smileyFaces.splice(i, 1); // Remove the missed face from the array
      }
    }

    // Display the current score and missed count
    fill(0);
    textSize(24);
    textAlign(LEFT, TOP);
    text(`Score: ${score}`, 10, 10);
    text(`Missed: ${missed}/${maxMissed}`, 10, 40);

    // Check for game over condition
    if (missed >= maxMissed) {
      gameState = GAMEOVER;
    }
  } else if (gameState === GAMEOVER) {
    // --- Game Over Screen ---
    fill(255, 0, 0); // Red text for "GAME OVER!"
    textSize(64);
    textAlign(CENTER, CENTER);
    text('GAME OVER!', width / 2, height / 2 - 50);

    fill(0); // Black text for score and restart message
    textSize(32);
    text(`Final Score: ${score}`, width / 2, height / 2);
    text('Press Space to Restart', width / 2, height / 2 + 50);
  }
}

function keyPressed() {
  // If the game is over and the Space key is pressed, restart the game
  if (gameState === GAMEOVER && key === ' ') {
    setup(); // Call setup() again to reset the game
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // Resize the canvas to fill the new window size
  catcher.y = height - catcher.h / 2 - 10; // Adjust the catcher's Y position to stay at the bottom
}