保持 noLoop() 一段时间

Question

我正在尝试创建一个非常简单的 "whack-a-mole" 类型的游戏，专为刚接触 p5.js 和一般处理的学生设计。目前，我已经创建了一个数组，并在该数组中进行了随机搜索，随机选择一个正方形并将其变成棕色（目前为 "mole"）。如何使用基本 p5 使其在选择一个正方形后停留几秒钟，然后跳到下一个？我已经设法实现了 noLoop()，它可以停止搜索，但在一定时间后我希望它恢复。

这是我目前的代码：

function setup() {
    createCanvas(610,610)
}

function draw() {
    var grid = []
    for (var x = 0; x < 6; x += 1){
        grid[x]=0;
        for (var y = 0; y < 6; y += 1){
            rand=round(random(360))
            grid[x][y]=0
            if (rand==0){
                grid[x]=1
                grid[y]=1
                noLoop()
            }
            if (grid[x]==0 || grid[y]==0){
                fill(76,153,0)
                rect((x*100+10),(y*100+10),90,90)
            }
            if (grid[x]>0 && grid[y]>0){
                fill(102,51,0)
                rect((x*100+10),(y*100+10),90,90)
            }
        }
    }
}

Answer 1

您可以保持每秒 60 帧的循环，而不是使用 noLoop()，然后使用 millis() 函数来跟踪经过的时间。

下面是一个在用户点击时显示一个圆圈 1 秒的示例：

var clickTime;

function mousePressed(){
  clickTime = millis();
}

function draw() {
  background(0);
  if(millis() < clickTime + 1000){
    ellipse(width/2, height/2, width/4, height/4);
  }
}

编辑： 另一种方法是使用 % 运算符和 frameCount 变量，以便每隔 X 帧执行一些操作。此示例每 60 帧在随机位置绘制一个圆圈：

function draw() {
  if (frameCount % 60 == 0) {
    background(0);
    ellipse(random(width), random(height), width / 4, height / 4);
  }
}

保持 noLoop() 一段时间

Hold noLoop() for certain amount of time

p5.js