Question

我在使用p5.js为视频游戏增光添彩时遇到了麻烦。我正在使用youtube上的编码训练中演示的代码。我决定为自己的代码添加一个计时器，以便生存。

由于某种原因，生命减去5而不是1。无论我将多少加到我的生活变量中，生命都减去5。

这是我的代码：

@commented_blogs = Blog.left_outer_joins(:comments).select('blogs.*, count(comments.*) as comments_count').group(:id).order(comments_count: :desc).limit(3)

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;
    		}  
    	}
    }

更新：

你好，

我已经添加了一个指向正在使用的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次有关。

如果将console.log("hits");放在lives = lives - 1;的前面，您应该会在控制台上看到hits的x个数字。（顺便说一句，只是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在视频游戏中添加“生命”？

1 个答案: