Question

我正在尝试创建一个非常简单的“whack-a-mole”类型的游戏，专为刚接触p5.js的学生和一般的Processing。目前，我已经创建了一个数组，并在该数组中随机搜索，随机选择一个正方形并使其变为棕色（现在为“鼹鼠”）。如何制作它以便选择一个正方形后，它会在那里停留几秒钟，然后使用基本的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

不是使用noLoop()，而是可以保持每秒60帧的循环，但是然后使用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（）一段时间

1 个答案: