Objectives:

- Use all the concepts learned in the previous lessons, to create a racing game between two or more shapes.

*/

​

let whiteX = 35;

let greenX = 35;

let yellowX = 35;

​

function setup() {

  createCanvas(400, 200);

}

​

function draw() {

  background(3, 157, 252);

  noStroke();

​

  // start rectangle

  fill(252, 123, 3);

  rect(0, 0, 50, 200);

​

  // end rectangle

  fill(252, 3, 148);

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

​

  // WHITE

  fill(255, 255, 255);

  circle(whiteX, 100, 20);

​

  // move white to the right

  whiteX = whiteX + random(5);

​

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

  if (whiteX > 400 - 50) {

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

    noLoop();

  }

  // GREEN

  fill(0,220,0);

  circle(greenX, 50, 20);

  greenX = greenX + random(5);

  if(greenX > 350){

    text('green wins!', 150, 100);

    noLoop();

  }

  // YELLOW

    fill(255,255,0);

  circle(yellowX, 150, 20);

  yellowX = yellowX + random(5);

  if(yellowX > 350){

    text('yellow wins!', 150, 100);

    noLoop();

  }

}

​

/*

CHALLENGES

1.  Add a thrid shape to the race.

2.  Replace the shapes with emojis.  Hint: emojis are text.

3.  Make the player control the speed of one competitor by pressing a key or keys.

4.  Change the layout from protrait to landscape.

5.  Add obstacles and powerups.

​

Extra Challenges

6.  Capture user input to get the names of the players.

7.  Store the scores in the browser (localstorage)

​

*/

​