How To Get A Circle To Move When You Click On It In Javascript?

I'm making a whack-a-mole game based on a 3x3 grid for one of my classes but i'm having trouble getting the mole(an ellipse made using p5.js) to move to a different grid square on

Solution 1:

Your sleep() function is not how you should handle timing in P5.js, or in JavaScript in general.

Your sleep() function causes your program to become completely unresponsive, which is bad for a lot of reasons. One problem is that your event code will not trigger, which is the problem you're seeing.

Instead, you need to use the millis() function or the frameCount variable to handle your timing without blocking your whole program. Here's a small example:

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);   
    }
}

This code uses the frameCount variable along with the % modulus operator to check whether 1 second has elapsed. In other words, this program draws a circle every second.

You need to do something similar to move your mole, which will allow your event code to be fired even while the mole is "waiting".

Solution 2:

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

This int keyword does not make sense. If you want it to be a whole number, use the Math.round() function (or just round() in p5js).

Try console.loging the distance variable.