Question

我为我的一个班级做了一个基于3x3网格的打鼹鼠游戏，但是我很难将鼹鼠（使用p5.js制作的椭圆）转移到点击不同的网格方块。我希望它在7秒之后自动移动，这是我使用函数睡眠（毫秒）实现的，但是如果玩家在7秒之前点击了鼹鼠，那么我希望它在那时切换网格方块。这是我的mousePressed和moveCircle的代码。

    function mousePressed() {
      var distance = int(dist(mouseX, mouseY, moleX, moleY));
      if(distance <= circleDiameter/2 ) {
         moveCircle();
         score += 1;
       } 
      document.getElementById('playerScore').innerHTML=score;
    }

    function moveCircle(){
      var randomX = [110, 260, 410];
      var randomY = [95, 245, 395];
      var moleX = random(randomX);
      var moleY = random(randomY);

   }

Answer 1

您的sleep()函数不您应该如何处理P5.js或JavaScript中的计时。

您的sleep()功能会导致您的程序完全无法响应，这有很多原因。一个问题是你的事件代码不会触发，这就是你所看到的问题。

相反，您需要使用millis()函数或frameCount变量来处理您的计时，而不会阻止整个程序。这是一个小例子：

function setup() {
  createCanvas(200,200);
    background(32);
}

function draw(){
    // 60 frames is 1 second
    if(frameCount % 60 == 0){
      ellipse(random(width), random(height), 25, 25);   
    }
}

此代码使用frameCount变量和%模数运算符来检查是否已经过了1秒。换句话说，这个程序每秒画一个圆圈。

你需要做一些类似移动你的痣的事情，即使在鼹鼠“等待”时你的事件代码也会被解雇。

Answer 2

int(dist(mouseX, mouseY, moleX, moleY))

此int关键字没有意义。如果您希望它是整数，请使用Math.round()函数（或p5js中的round()）。

尝试console.log距离变量。

如何在javascript中点击它时移动圆圈？

2 个答案: