Entonces, lo que estoy tratando de hacer es hacer un juego de clicker, pero cuando uso el estándar:
let Coins = 0; function setup() { createCanvas(400, 400) } //draws the circle function draw() { background(100) circle(200, 200, 50) //creates the text to show the amount of coins text(Coins, 200 - (textWidth(Coins) / 2), 150) } //detects when the mouse is pressed function mouseClicked() { //changes the number of coins Coins = Coins + 1 } <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>Puedo hacer clic en cualquier lugar y contará las monedas, pero quiero que si el mouse está en la forma/elemento, luego cuente. No quiero usar "If (mouseX => width / 2)", pero solo sé cuándo el mouse está sobre el elemento.
En p5js, debe implementar la "prueba de éxito" usted mismo. En este caso puedes hacerlo comprobando si la distancia entre el ratón y el centro de la moneda es menor que el radio de la moneda.
let Coins = 0; function setup() { createCanvas(400, 400) } let coinPosition = new p5.Vector(200, 200); let coinRadius = 25; //draws the circle function draw() { background(100) push() if (dist(mouseX, mouseY, coinPosition.x, coinPosition.y) <= coinRadius) { fill('gold') } circle(coinPosition.x, coinPosition.y, coinRadius * 2) // restore the previous fill value pop() //creates the text to show the amount of coins text(Coins, 200 - (textWidth(Coins) / 2), 150) } //detects when the mouse is pressed function mouseClicked() { if (dist(mouseX, mouseY, coinPosition.x, coinPosition.y) <= coinRadius) { //changes the number of coins Coins = Coins + 1 } } <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>