p5.jsを使用してゲーム画面を変更して文字イメージを変更

Question

私は単純なコンピュータゲームを作成しています。コンセプトは、画面にランダムな鳥があり、マウスを押すと鳥が止まり、死んだ鳥の画像に変わるというものです。ユーザーが30秒以内にすべての鳥をクリックしたときに画面に「あなたが勝つ」と表示するのに助けが必要です。また、ユーザーが鳥をクリックしたときに、鳥の画像を死んだ鳥に変更する方法がわかりません。これは私がこれまで持っているものです。

//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

鳥がクリックされたかどうかを確認するために、あなたはマウスが各鳥の画像内にあるかどうかを確認ifステートメントを使用する必要があるとしています。ここではいくつかの擬似コードです：

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

その後、あなたは鳥のすべてがクリックされたかどう伝えるために、働く、あなたがするのと同じループを通過すると、彼らはすべて死んでいるかどうかを確認することを持っている場合。このような何か：

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

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

最後に、経過した時間を確認するために、あなたはmillis()機能を使用することができます。ゲームが実際に始まったときと、鳥がすべて殺されたときに、それを2回保存することもできます。次に、減算を使用して、どれくらいの時間が経過したかを伝えます。