Блог

Главная - Вопросы по программированию - Есть ли способ проверить, нажата ли мышь на определенный элемент в p5.js

Есть ли способ проверить, нажата ли мышь на определенный элемент в p5.js

#javascript #click #p5.js

#javascript #нажмите #p5.js

Вопрос:

Итак, что я пытаюсь сделать, это создать игру с кликером, но когда я использую стандартный:

 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>

Я могу щелкнуть в любом месте, и он подсчитает монеты, но я хочу, чтобы, если мышь находится на фигуре / элементе, она тогда будет учитываться.
Я не хочу использовать «If (mouseX => width / 2)», но просто знаю, когда мышь наведена / наведена на элемент.

Ответ №1:

В p5js вам необходимо самостоятельно реализовать «тестирование попадания». В этом случае вы можете сделать это, проверив, меньше ли расстояние между мышью и центром монеты, чем радиус монеты.

 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>

Комментарии:

1. Есть ли способ придать ему универсальную форму, например, пользовательский полигон или 3D-фигуру?

2. Для более сложных фигур вам нужно будет реализовать алгоритм point in polygon . Вот пример, который я написал с использованием p5js. Чтобы заставить это работать со сплайнами (кривыми, кривыми Безье и т. Д.), Было бы аналогично, Но требовало больше математики. Для тестирования попадания с помощью 3D-фигур вам необходимо реализовать лучевое литье .

Метки: ,