如何使用 p5.js 在视频游戏中添加“生命”？

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>

更新：

你好，

我添加了一个指向我正在使用的 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;
}