javascript - 我试图找到一种方法，所以当它低于某个 y 时，文本将变为红色（p5.js）

Question

// Background

var backgroundt = createSprite(200,200,200,200);
backgroundt.setAnimation("pine_trees_1");

// Bee
var bee1 = createSprite(200,200,200,200);
bee1.setAnimation("bee_1");
bee1.x = 200;
bee1.y = 200;

// Draw Function

function draw() {
  bee1.x = bee1.x - 2;
  bee1.y = bee1.y + 4;
  
  drawSprites();
  
  
  fill("yellow");
  textFont("Times New Roman");
  textSize(50);
  text("Honey!", 138,196);
}

// Drawing the sprites
drawSprites();

var y2 = 398;

while(bee1.y < y2) {
  fill("red");
  textFont("Times New Roman");
  textSize(50);
  text("Honey!", 138,196);
}

我试图获得蜜蜂的 Y 值，但我不知道它是否可能，如果不是还有其他方法吗？我在想这是否行不通，也许是为什么要让文本在屏幕上传送？这是 p5.js 顺便说一句。

标签： javascriptprocessingp5.js

Answer 1

此任务不需要循环。该draw()功能连续执行。fill()满足条件时只需使用不同的颜色：

var y2 = 398;

function draw() {
    bee1.x = bee1.x - 2;
    bee1.y = bee1.y + 4;
  
    drawSprites();
  
    if (bee1.y < y2) {
        fill("red");
    } else {
        fill("yellow"); 
    }
    textFont("Times New Roman");
    textSize(50);
    text("Honey!", 138,196);
}