<html>
  <head></head>
  <body>
  </body>
</html>
// variables for the bird position and speed
var birdHeight;
var gravity=0.5;
var birdSpeed=0;
var jumpSpeed=-10;

// Code in the setup() runs just once
// the first time the page is loaded
function setup(){
  createCanvas(300, 400);
  birdHeight = height/2;
}  

// Code in the draw starts running after setup is finished
// and runs over and over 60 times a second
function draw(){
  // Step 1: draw sky 
  background("blue");
  
  // Step 2: draw ground
  fill("green");
  rect(0, height-50, width, height);
  
  // Step 3: draw bird
  fill("yellow");
  ellipse(50, birdHeight, 20, 20);

  // Step 4/5: make bird fall
  if(birdHeight < height-50 || birdSpeed == jumpSpeed) {
      // increase birdspeed by gravity
      birdSpeed = birdSpeed + gravity;
      // move the bird by the birdspeed
      birdHeight = birdHeight + birdSpeed;     
  }  
}

// react to the mouse click
function mouseClicked(){
  // Step 6: make the bird jump
  birdSpeed = jumpSpeed;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.js
  2. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.js
  3. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.sound.js