let y1 = 200; // Y position of the first (white) ball

let x2 = 300; // X position of the second (black) ball

let y2 = 300; // Y position of the second (black) ball

let speed = 2; // Movement speed of both balls

let gameOver = false; // Flag for game over

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

​

  if (gameOver) {

    textSize(32);

    fill(0);

    textAlign(CENTER);

    text("Game Over!", width / 2, height / 2); // Display "Game Over"

    return;

  }

​

  // Draw the first (white) ball

  fill(255);

  ellipse(x1, y1, 30, 30); // Drawing the first ball with a diameter of 30

​

  // Draw the second (black) ball

  fill(0);

  ellipse(x2, y2, 30, 30); // Drawing the second ball with a diameter of 30

​

  // Handling movement for the first ball (controlled by W, A, S, D)

  if (keyIsDown(87)) { // W key to move up

    y1 -= speed;

  }

  if (keyIsDown(83)) { // S key to move down

    y1 += speed;

  }

  if (keyIsDown(65)) { // A key to move left

    x1 -= speed;

  }

  if (keyIsDown(68)) { // D key to move right

    x1 += speed;

  }

​

  // Handling movement for the second ball (controlled by I, J, K, L)

  if (keyIsDown(73)) { // I key to move up

    y2 -= speed;

  }

  if (keyIsDown(75)) { // K key to move down

    y2 += speed;

  }

  if (keyIsDown(74)) { // J key to move left

    x2 -= speed;

  }

  if (keyIsDown(76)) { // L key to move right

    x2 += speed;

  }

​

  // Keep the first ball within the canvas boundaries

  x1 = constrain(x1, 15, width - 15);

  y1 = constrain(y1, 15, height - 15);

​

  // Keep the second ball within the canvas boundaries

  x2 = constrain(x2, 15, width - 15);

  y2 = constrain(y2, 15, height - 15);

​

  // Check for collision (if distance between centers of the balls is less than their diameters)

  let distance = dist(x1, y1, x2, y2);

  if (distance < 30) {

    gameOver = true; // Trigger game over when balls collide

  }

}

​