-1

HTML

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="scripts/jogo/personagem.js"></script>
    <script src="scripts/jogo/cenario.js"></script>
    <script src="sketch.js"></script>
  </body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

JavaScript

function setup(){
  createCanvas(windowWidth,windowHeight); 
}

function draw(){
  background(200)
  circle(mouseX,mouseY,200)
}

Como faz para aparece no console.log a posição do "mouseX" e do "mouseY" da bolinha branca ?

1

2 Respostas 2

0

tudo bem?

Você tentou colocar essas variáveis dentro do console direto?

Dentro da função draw() tente colocar:

console.log(mouseX, mouseY);

E veja se vai aparecer no console diretamente, caso não, é preciso encontrar uma função que faça a conversão dessas variáveis, "mouseX" e "mouseY", para algum tipo de dado a ser exibido dentro console.

Veja se resolve seu problema.

0

Um exemplo de utilização.

Aqui você tem o elemento onde vai capturar o mouse.

const el = document.querySelector('.canvas);

Aqui o evento que captura a posição dentro do elemento.

el.addEventListener('mousemove', (e) => {
    console.log(`X: ${e.clientX} - Y: ${e.clientY}`)
})

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .