change game screen & changing character image using p5.js

Question

I am creating a simple computer game. The concept is that there are random birds on the screen, and when the mouse is pressed, the birds stop and change to a dead bird image. I need help with displaying "you win" on the screen when the user has clicked all the birds within 30 seconds. Also, I am not sure how to change my bird image to a dead bird when the user clicks on a bird. This is what I have so far:

//birds declared
var blue = [];
var red = [];
var yellow = [];
var count = 10;
//deadbirds declared
var deadBird;
var hasClicked = false;
//counter declared
var countDeadBirds = 0;
//timer declared
var startTime = 100;
var countDown;
//background declared
var backgroundImage;

function preload() {
  for(var i = 0; i <count; i++){
      blue[i] = new Flyer('blue.png',random(40,600),random(480),random([-1,1]));
      red[i] = new Flyer('red.png',random(40,600),random(480),random([-1,1]));
      yellow[i] = new Flyer('yellow.png',random(40,600),random(480),random([-1,1]));
  }
}

function setup() {
    backgroundImage = loadImage('background.png');
    createCanvas(640, 480);
}

function draw(){
  background(backgroundImage);
// draw birds
  for(var i = 0; i <count; i++){
    blue[i].draw();
    red[i].draw();
    yellow[i].draw();
  }
//draw counter/SCORE
  textSize(20);
  text("SCORE: " +countDeadBirds,5,40);
//draw countdown
  var countDown = startTime - (millis() / 1000); //countdown from 30 seconds
  var trimCountDown = nf(countDown, 2,2); //trim countdown to 2 decimal places
  text("COUNTDOWN: " +trimCountDown, 5, 60);
//draw GAME PHASES: WIN & GAME OVER
  if(trimCountDown < 0.00){
    if(blue == 0 && red == 0 && yellow == 0){ //help with changing screen to you win
      text("YOU WIN!",250,250);
      trimCountDown.stop();
    }
      text("GAME OVER", 250, 250);
      trimCountDown.stop();
  }
}

//kill birds when mouse is pressed
function mousePressed(){
  hasClicked = true;
  for(var i = 0; i <count; i++){
    blue[i].dead(mouseX,mouseY);
    red[i].dead(mouseX,mouseY);
    yellow[i].dead(mouseX,mouseY);
  }
}

//allow birds to move/fly
function Flyer(imageName,x,y,moving){
  this.spritesheet = loadImage(imageName);
  this.frame = 0;
  this.x = x;
  this.y = y;
  this.moving = moving;
  this.facing = moving;

  this.draw = function() {
    push();
      translate(this.x,this.y); //allow birds to change facing directions
      if (this.facing < 0) {
        scale(-1.0, 1.0);
      }
      if (this.moving == 0) {
        image(this.spritesheet, 0, 0, 80, 80, 0, 0, 80, 80);
      }
      else {
      if(this.frame == 0)
        image(this.spritesheet, 0, 0, 80, 80, 0, 0, 80, 80);
      if(this.frame == 1)
        image(this.spritesheet, 0, 0, 80, 80, 80, 0, 80, 80);
      if(this.frame == 2)
        image(this.spritesheet, 0, 0, 80, 80, 160, 0, 80, 80);
      if(this.frame == 3)
        image(this.spritesheet, 0, 0, 80, 80, 240, 0, 80, 80);
      if(this.frame == 4)
          image(this.spritesheet, 0, 0, 80, 80, 320, 0, 80, 80);
      if(this.frame == 5)
          image(this.spritesheet, 0, 0, 80, 80, 400, 0, 80, 80);
      if(this.frame == 6)
         image(this.spritesheet, 0, 0, 80, 80, 480, 0, 80, 80);
      if (frameCount % 4 == 0) {
        this.frame = (this.frame + 1) % 8;
        this.x = this.x + 6 * this.moving;
        if(this.x < 40 || this.x > width - 40){
          this.moving = -this.moving;
          this.facing = -this.facing;
        }
      }
    }
    pop();
  }
  //kills bird
  this.dead = function(x,y){
    if(this.x - 40 < x && x < this.x + 40 && this.y - 40 < y && y < this.y + 40){
      this.stop();
      this.mouseX = x;
      this.mouseY = y;
      this.initialX = this.x;
      this.initialY = this.y;
    }
    //levels
          if(countDeadBirds == 5){
            this.moving = random([-1.5,1.5]);
          }
          if(countDeadBirds == 10){
           this.moving = random([-2,2]);
          }
          if(countDeadBirds == 15){
           this.moving = random([-2.5,2.5]);
         }
  }
  //stops bird
  this.stop = function(){
    this.moving = 0;
    this.frame = 3;
    //change picture to dead bird
    deadBird = image(this.spritesheet, mouseX, mouseY, 80, 80, 560, 0, 80, 80);
    image(hasClicked? deadBird : this.spritesheet, mouseX,mouseY); //help with changing to deadbird
    countDeadBirds = countDeadBirds + 1; //count number of dead birds
  }
}

Answer 1

For checking whether the bird has been clicked, you're going to have to use if statements that check whether the mouse is inside each bird image. Here's some pseudocode:

function mousePressed(){
   for(var b in birds){
      if(mouse inside b){
         b.dead = true;
      }
   }
}

Then when you have that working, to tell if all of the birds have been clicked, you would just loop through and check whether they're all dead. Something like this:

var allDead = true;
for(var b in birds){
   if(!b.dead){
      allDead = false;
      break;
   }
}

if(allDead){
   //they're dead, Jim
}

Finally, for checking how much time has passed, you can use the millis() function. You might want to store it twice: once when the game actually starts, and again when the birds have all been killed. Then just use subtraction to tell how much time has passed.