如何在 p5.js 的视频游戏中添加 "lives"？

Question

我在使用 p5.js 为视频游戏添加生命时遇到了问题。我正在使用 youtube 上编码训练中演示的代码。我决定为我的代码添加一个计时器和生命。

出于某种原因，生命减去 5 而不是 1。无论我将什么数字添加到我的生命变量中，它都会减去 5。

这是我的代码：

let bird;
    let pipes = []; 
    let score = 0;
    let lives = 10;
    let timer = 20; 
    let hits = false;
    
    
    function setup() {
      createCanvas(400, 600);
     bird = new Bird();
     pipes.push(new Pipe());
      score = new Score();
    }
    
    function draw() {
      background(0);
      // score = score+velocity;
     
      line(800, 150, 800, 650);
      textSize(20);
      text("LIVES:", 10, 20);
      textSize(20);
      text(lives, 80, 20)
      
     for (let i = pipes.length-1; i >= 0; i--){
      pipes[i].show();
       pipes[i].update();
        
        if (pipes[i].hits(bird)) {
          print("HIT");
        }
        
      if (pipes[i].offscreen()) {
       pipes.splice(i, 1);
      }
     }
      
      bird.update();
     bird.show();
     
     if (frameCount % 100 == 0) {
      pipes.push(new Pipe());
     }
      
     if (frameCount % 60 == 0 && timer > 0) { // if the frameCount is divisible by 60, then a second has passed. it will stop at 0
        timer --;
      }
      
      if (timer == 0) {
        text("You Win", width/2, height*0.7);
      noLoop();
      }
       if (lives <= 0){
        noLoop();
      }
    
    
    }
     
    function keyPressed() {
     if (key == ' ') {
      bird.up();
     }
    }
     
    function Bird() {
     this.y = height/2;
     this.x = 64;
     
     this.gravity = 0.5;
     this.velocity = 0;
     this.lift = -19; 
     
     this.show = function() {
      fill(255);
      ellipse(this.x, this.y, 32, 32);
     } 
     
     this.up = function() { 
      this.velocity += this.lift;
     }
     
     this.update = function () {
      this.velocity += this.gravity;
      this.velocity += 0.9;
      this.y += this.velocity;
      
      if (this.y > height) {
       this.y = height;
       this.velocity = 0;
      }
      
      if (this.y < 0) {
       this.y = height;
       this.velocity = 0;
      }
     }
     
    }
    
    function Pipe () {
     this.top = random(height/2);
     this.bottom = random(height/2);
     this.x = width;
     this.w = 17;
     this.speed = 3;
      
      this.hits = function(bird){
        if(bird.y < this.top || bird.y > height - this.bottom){
          if (bird.x > this.x && bird.x < this.x + this.w){
          this.highlight = true;
            lives = lives - 1; 
            return true;
         }
        }
        this.highlight = false;
        return false;
      }
     
     this.show = function() {
      fill(255);
        if (this.highlight) {
          fill (255, 0, 0);
        }
      rect(this.x, 0, this.w, this.top);
      rect(this.x, height-this.bottom, this.w, this.bottom);
     }
     this.update = function () {
      this.x -= this.speed;
     }
     this.offscreen = function() {
      if (this.x < -this.w) {
       return true;
      }else {
       return false;
      }  
     }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>

更新：

你好，

我已将 link 添加到我正在使用的 p5js 编辑器中。

https://editor.p5js.org/retroauriel/sketches/HyvA4bH1V

Answer 1

问题就在这里（但我猜你已经知道了）：

this.hits = function(bird){
    if(bird.y < this.top || bird.y > height - this.bottom){
        if (bird.x > this.x && bird.x < this.x + this.w){
            this.highlight = true;
            lives = lives - 1; 
            return true;
        }
    }
    this.highlight = false;
    return false;
}

此问题与此函数在被清除之前被调用 x 次有关。

如果您在 lives = lives - 1; 之前放置一个 console.log("hits");，您应该会在控制台上看到 x 个 hits。（顺便说一句，只有 lives--; 会做同样的事情）。

在速度较慢的设备上，点击次数可能较低，在速度较快的设备上，点击次数可能较高。

你需要在 this.hits 被调用后有某种宽限期，并在第二次（或更多）次删除生命之前检测它。

编辑： 宽限期代码类似于播放器图标闪烁、改变颜色或其他东西一段时间，然后允许另一条生命在该时间后丢失通过。也许是这样的：

// add a new variable to track the status
var graceModeActive = false;


// modify the hits function
this.hits = function(bird){
    if (graceModeActive) {
        return;
    }
    if(bird.y < this.top || bird.y > height - this.bottom){
        if (bird.x > this.x && bird.x < this.x + this.w){
            this.highlight = true;
            lives--;
            graceModeActive = true;
            // change icon code here maybe?
            setTimeout(function(){
                graceModeActive = false;
                // change icon back code here maybe?
                },2000);
            return true;
        }
    }
    this.highlight = false;
    return false;
}

如何在 p5.js 的视频游戏中添加 "lives"？

How to add "lives" in video game with p5.js?

javascript

processing

p5.js