let whitePlayer;

let yellowPlayer;

​

// Class to create Players

class Player {

  constructor(colour, x, y, diam) {

    this.colour = colour;

    this.x = x;

    this.y = y;

    this.diam = diam;

  }

  show() {

    fill(this.colour);

    circle(this.x, this.y, this.diam);

  }

​

  move() {

    this.x = this.x + random(5);

  }

​

  win() {

    if (this.x > 400 - 50) {

      text(this.colour + " wins!", 150, 100);

      noLoop();

    }

  }

}

​

function setup() {

  createCanvas(400, 200);

​

  greenPlayer = new Player('green', 35, 50, 20);

  whitePlayer = new Player('white', 35, 100, 20);

  yellowPlayer = new Player('yellow', 35, 150, 20);

}

​

function draw() {

  background(3, 157, 252);

  noStroke();

​

  // RACING TRACK

  // start rectangle

  fill(252, 123, 3);

  rect(0, 0, 50, 200);

​

  // end rectangle

  fill(252, 3, 148);

  rect(400 - 50, 0, 50, 200);

​

  greenPlayer.show();

  greenPlayer.move();

  greenPlayer.win();

  whitePlayer.show();

  whitePlayer.move();

  whitePlayer.win();

  yellowPlayer.show();

  yellowPlayer.move();

  yellowPlayer.win();

}

​

​

//  // PLAYERS

//   // WHITE

//   fill(255, 255, 255);

//   circle(whitePlayer.x, whitePlayer.y, whitePlayer.diam);

​

//   // move white to the right

//   whitePlayer.x = whitePlayer.x + random(5);

​

//   // when white gets to the end, message and stop

//   if (whitePlayer.x > 400 - 50) {

//     text("white wins!", 150, 100);

//     noLoop();

//   }

​

//   // GREEN

//   fill(0, 220, 0);

//   circle(greenPlayer.x, greenPlayer.y, greenPlayer.diam);

//   greenPlayer.x = greenPlayer.x + random(5);

//   if (greenPlayer.x > 350) {

//     text("green wins!", 150, 100);

//     noLoop();

//   }

​

//   // YELLOW

//   fill(255, 255, 0);

//   circle(yellowPlayer.x, yellowPlayer.y, yellowPlayer.diam);

//   yellowPlayer.x = yellowPlayer.x + random(5);

//   if (yellowPlayer.x > 350) {

//     text("yellow wins!", 150, 100);

//     noLoop();

//   }

​