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

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

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

这个int关键字没有意义。如果你希望它是一个整数，使用 Math.round() 函数（或者在 p5js 中只是 round()）。

尝试console.log输入距离变量。

Answer 2

您的 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 秒。也就是说，这个程序每秒画一个圆。

你需要做一些类似的事情来移动你的地鼠，这将允许你的事件代码被触发，即使当地鼠是 "waiting"。

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

How to get a circle to move when you click on it in javascript?

javascript

arrays

onclick

mouseclick-event

p5.js