Sketch 2026-03-02 23:21

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  // Initialize Matter.js engine and world
  engine = Engine.create();
  world = engine.world;
  world.gravity.y = 1; // Set gravity

  // Create the paddle (a static rectangle at the bottom)
  const paddleWidth = 150;
  const paddleHeight = 20;
  paddle = Bodies.rectangle(
    width / 2, 
    height - paddleHeight / 2 - 10, 
    paddleWidth, 
    paddleHeight, 
    { isStatic: true, label: 'paddle' }
  );
  World.add(world, paddle);

  // Create an invisible ground slightly below the canvas to detect misses
  ground = Bodies.rectangle(
    width / 2, 
    height + 50, 
    width, 
    100, 
    { isStatic: true, label: 'ground' }
  );
  World.add(world, ground);

  // Set up collision events
  Events.on(engine, 'collisionStart', collisionHandler);

  // Initialize game state
  score = 0;
  lives = 3;
  lastStarSpawnTime = millis();
  gameOver = false;
}

function draw() {
  background(40, 42, 54); // Dark background

  if (gameOver) {
    displayGameOver();
    return; // Stop game logic if game over
  }

  // Update Matter.js engine
  Engine.update(engine);

  // Move the paddle with the mouse
  // Constrain paddle to stay within canvas bounds
  const paddleX = constrain(mouseX, paddle.width / 2, width - paddle.width / 2);
  Matter.Body.setPosition(paddle, { x: paddleX, y: paddle.position.y });

  // Spawn stars
  if (millis() - lastStarSpawnTime > starSpawnInterval) {
    createStar();
    lastStarSpawnTime = millis();
    // Gradually increase difficulty by reducing spawn interval
    starSpawnInterval = max(200, starSpawnInterval - 10); 
  }

  // Draw paddle
  drawBody(paddle, color(255, 204, 0)); // Yellow paddle

  // Draw and manage stars
  for (let i = stars.length - 1; i >= 0; i--) {
    let star = stars[i];
    drawBody(star, color(255, 255, 0)); // Yellow stars

    // Remove stars that are way off-screen (missed or caught and fell through)
    if (star.position.y > height + 100) {
      World.remove(world, star);
      stars.splice(i, 1);
    }
  }

  // Display score and lives
  displayGameInfo();
}

function createStar() {
  const starSize = random(15, 30);
  const x = random(starSize, width - starSize);
  const y = -starSize; // Start above the canvas
  const star = Bodies.circle(x, y, starSize / 2, {
    restitution: 0.8, // Make stars bounce slightly
    friction: 0.1,
    label: 'star' // Label for collision detection
  });
  World.add(world, star);
  stars.push(star);
}

function drawBody(body, fillColor) {
  fill(fillColor);
  noStroke();
  const pos = body.position;
  const angle = body.angle;

  push();
  translate(pos.x, pos.y);
  rotate(angle);

  // Draw based on body type (only circles and rectangles for this game)
  if (body.circleRadius) {
    // Circle (star)
    ellipse(0, 0, body.circleRadius * 2);
  } else {
    // Rectangle (paddle, ground)
    rectMode(CENTER);
    rect(0, 0, body.width, body.height);
  }

  pop();
}

function collisionHandler(event) {
  const pairs = event.pairs;

  for (let i = 0; i < pairs.length; i++) {
    const pair = pairs[i];
    const bodyA = pair.bodyA;
    const bodyB = pair.bodyB;

    // Check for star-paddle collision
    if (bodyA.label === 'star' && bodyB.label === 'paddle') {
      score++;
      World.remove(world, bodyA);
      // Remove star from our array
      stars = stars.filter(star => star !== bodyA);
    } else if (bodyB.label === 'star' && bodyA.label === 'paddle') {
      score++;
      World.remove(world, bodyB);
      // Remove star from our array
      stars = stars.filter(star => star !== bodyB);
    }

    // Check for star-ground collision (miss)
    if (bodyA.label === 'star' && bodyB.label === 'ground') {
      lives--;
      World.remove(world, bodyA);
      // Remove star from our array
      stars = stars.filter(star => star !== bodyA);
      if (lives <= 0) {
        gameOver = true;
      }
    } else if (bodyB.label === 'star' && bodyA.label === 'ground') {
      lives--;
      World.remove(world, bodyB);
      // Remove star from our array
      stars = stars.filter(star => star !== bodyB);
      if (lives <= 0) {
        gameOver = true;
      }
    }
  }
}

function displayGameInfo() {
  fill(255);
  textSize(24);
  textAlign(LEFT);
  text(`Score: ${score}`, 20, 40);
  textAlign(RIGHT);
  text(`Lives: ${lives}`, width - 20, 40);
}

function displayGameOver() {
  fill(255);
  textSize(64);
  textAlign(CENTER, CENTER);
  text('GAME OVER', width / 2, height / 2 - 50);
  textSize(32);
  text(`Final Score: ${score}`, width / 2, height / 2 + 10);
  text('Press R to Restart', width / 2, height / 2 + 60);
}

function keyPressed() {
  if (gameOver && key === 'r' || key === 'R') {
    resetGame();
  }
}

function resetGame() {
  // Clear all bodies from the world except ground and paddle
  World.clear(world, false);
  stars = [];
  score = 0;
  lives = 3;
  starSpawnInterval = 1000;
  lastStarSpawnTime = millis();
  gameOver = false;
  
  // Re-add paddle and ground as they were cleared
  World.add(world, [paddle, ground]);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Recreate paddle and ground to match new canvas size
  World.remove(world, paddle);
  World.remove(world, ground);

  const paddleWidth = 150;
  const paddleHeight = 20;
  paddle = Bodies.rectangle(
    width / 2, 
    height - paddleHeight / 2 - 10, 
    paddleWidth, 
    paddleHeight, 
    { isStatic: true, label: 'paddle' }
  );
  World.add(world, paddle);

  ground = Bodies.rectangle(
    width / 2, 
    height + 50, 
    width, 
    100, 
    { isStatic: true, label: 'ground' }
  );
  World.add(world, ground);
}