Удерживайте noLoop() на определенное время

Question

Я пытаюсь создать очень простую игру типа «бит-моль», предназначенную для студентов, новых для p5.js, и для обработки в целом. В настоящее время я создал массив и случайный поиск внутри этого массива, который случайно выбирает квадрат и делает его коричневым («моль», пока). Как сделать так, чтобы после выбора квадрата он оставался там на пару секунд, а затем переходил к следующему, используя базовый 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); 
    } 
} 

Edit: Другой подход заключается в использовании оператора % вместе с переменной frameCount для того, чтобы сделать что-то каждый X кадры. Эти примеры рисуют круг в произвольной позиции каждые 60 кадров:

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