let speed = 3;

let gameOver = false;

let loser = "";

​

function setup() {

  createCanvas(400, 400);

​

  //instantiated two new object in class Ball

  blueBall = new Ball(200, 200, color(0, 0, 255), "Blue Ball");

  yellowBall = new Ball(300, 300, color(255, 255, 0), "Yellow Ball");

}

​

function draw() {

  background(220);

​

  //Calling all functions I need

  if (!gameOver) {

    blueBall.draw();

    yellowBall.draw();

​

    blueBall.move(87, 83, 65, 68, speed);

    yellowBall.move(73, 75, 74, 76, speed);

​

    blueBall.checkDotCollision(yellowBall.dots);

    yellowBall.checkDotCollision(blueBall.dots);

  } else {

    fill(0);

    textSize(32);

    text(`${loser} lost the game!`, 50, height / 2);

  }

}

​

//defining the class, two objects are in this "Ball" class: blue ball and yellow ball

class Ball {

  constructor(x, y, color, name) {

    //defining variables that stores the parameters of the objects in the class, assigning them initial values

    this.x = x;

    this.y = y;

    this.color = color;

    this.diameter = 30;

    this.dotDiameter = 10;

    this.dotInterval = 2000;

    this.lastDotTime = millis();

    this.dots = [];

    this.name = name;

  }

​

  //functions that I would use on the objects in the class

  //all the things I can do to my balls

​

  draw() {

    fill(this.color);

    ellipse(this.x, this.y, this.diameter, this.diameter);

    this.leaveDot();

    this.drawDots();

  }

​

  //fuction that makes my ball move, with constrains within the canvas

  move(keyUp, keyDown, keyLeft, keyRight, speed) {

    if (keyIsDown(keyUp)) {

      this.y -= speed;

    }

    if (keyIsDown(keyDown)) {

      this.y += speed;

    }

    if (keyIsDown(keyLeft)) {

      this.x -= speed;

    }

    if (keyIsDown(keyRight)) {

      this.x += speed;

    }

    this.x = constrain(this.x, this.diameter / 2, width - this.diameter / 2);

    this.y = constrain(this.y, this.diameter / 2, height - this.diameter / 2);

  }

​

  //function that leaves a dot every 2 seconds

​

  leaveDot() {

    if (millis() - this.lastDotTime >= this.dotInterval) {

      //if its time to leave a dot

      //push a new dot in the array of dots

      //using the variables in the ball class, because the dots are left by the balls

      //default is to grow, unless I tell it to stop growing

      this.dots.push({

        x: this.x,

        y: this.y,

        size: this.dotDiameter,

        color: color(this.color),

        time: millis(),

        growing: true,

      });

​

      //update the last dot time after pushing a new dot

      this.lastDotTime = millis();

    }

  }

​

  //draw the dots in my array of dots

​

  drawDots() {

    for (let dot of this.dots) {

      if (dot.growing) {

        let timeElapsed = millis() - dot.time;

        dot.size += 0.05; // Increase size over time

        let blackness = min(255, timeElapsed / 10); // Gradually turn black

        dot.color = lerpColor(

          color(this.color),

          color(0, 0, 0),

          blackness / 255

        );

        if (dot.size >= this.diameter) {

          dot.size = this.diameter;

          dot.color = color(255, 0, 0); // Turn red and stop growing

          dot.growing = false;

        }

      }

      fill(dot.color);

      ellipse(dot.x, dot.y, dot.size, dot.size);

    }

  }

​

  checkDotCollision(otherDots) {

    // Iterating backwards through the dots array to avoid skipping elements after removing a dot

    for (let i = otherDots.length - 1; i >= 0; i--) {

      let d = otherDots[i];

​

      // Calculate the distance between the current ball and the dot

      let distance = dist(this.x, this.y, d.x, d.y);

​

      // Extract RGB components of the dot's color to determine if it is red

      //Directly comparing colors using === or even == won't work because color() returns an object, and comparing these objects doesn't necessarily compare their color values directly. Instead, I need to compare the RGBA values of these colors.

      let dRed = red(d.color);

      let dGreen = green(d.color);

      let dBlue = blue(d.color);

​

      // Check if the dot's color is not red (if not red, proceed with possible removal)

      if (!(dRed === 255 && dGreen === 0 && dBlue === 0)) {

        // Check if the ball and the dot are overlapping or touching

        if (distance < this.diameter / 2 + d.size / 2) {

          // Remove the dot from the array if it's not red and colliding with the ball

          otherDots.splice(i, 1);

        }

      }

    }

  }

}

​