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

我在使用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

最佳答案

问题在这里（但我想您已经知道了）：

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次有关。

如果在console.log("hits");之前放置了lives = lives - 1;，则应该在控制台上看到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;
}

关于javascript - 如何使用p5.js在视频游戏中添加“生命”？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53677312/