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
}
}
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.