var screen = 0;

var y = -20;

var x = 200;

var speed = 2;

var score = 0;

var platform;  

var platformWidth = 50;  

var platformHeight = 100;  

​

// image

function preload() {

  platform = loadImage('Flint.png');  

}

​

function setup() {

  createCanvas(600, 400);

}

​

// screens

function draw() {

  if (screen == 0) {

    startScreen();

  } else if (screen == 1) {

    gameOn();

  } else if (screen == 2) {

    endScreen();

  }

}

​

// screen 1

function startScreen() {

  background(0);

  fill(255);

  textAlign(CENTER);

  textSize(30);

  text('Cloudy With a Chance of Meatballs', width / 2, height / 2 - 10);

  textSize(15);

   text('THE GAME', width / 2 + 75, height / 2 + 10);

  textSize(20);

  text('Start', width / 2, height / 2 + 60);

  reset();

}

​

// screen 2

function gameOn() {

  background(0);

  textSize(15);

  text("score = " + score, 40, 30);

  ellipse(x, y, 20, 20);  // The ball

  // display the platform as an image

  imageMode(CENTER);

  image(platform, mouseX, height - platformHeight / 2, platformWidth, platformHeight);

​

  y += speed;

​

   // distance (collicsion)

  var distance = dist(x, y, mouseX, height - platformHeight / 2);

​

  if (distance < 10 + platformHeight / 2) {  // adjust based on platform image size and ball size

    screen = 2;  // end the game when the ball touches the platform

  }

​

  // faster after every score

  if (y > height) {

    y = -20;

    speed += 0.5;

    score += 1;

    pickRandom();

  }

}

​

function pickRandom() {

  x = random(20, width - 20);  // randomize ball (x position)

}

​

// screen 3

function endScreen() {

  background(0);

  textAlign(CENTER);

  text('GAME OVER', width / 2, height / 2);

  text("Score = " + score, width / 2, height / 2 + 20);

  text('Play Again', width / 2, height / 2 + 40);

}

​

function mousePressed() {

  if (screen == 0) {

    screen = 1;

  } else if (screen == 2) {

    screen = 0;

  }

}

​

function reset() {

  score = 0;

  speed = 2;

  y = -20;

}

​