使用 p5.js 更改游戏画面和更改角色图像

Question

我正在制作一个简单的电脑游戏。这个概念是屏幕上有随机的小鸟，当按下鼠标时，小鸟停止并变为死鸟图像。当用户在 30 秒内单击所有鸟时，我需要帮助在屏幕上显示 "you win"。此外，我不确定如何在用户单击鸟时将我的鸟图像更改为死鸟。这是我目前所拥有的：

//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() 功能来检查已经过了多少时间。您可能希望将其存储两次：一次是在游戏实际开始时，另一次是在所有小鸟都被杀死时。然后用减法来判断时间过去了多少。

使用 p5.js 更改游戏画面和更改角色图像

change game screen & changing character image using p5.js

javascript

image

p5.js

fullscreenchange