How do you use the console to display the X and Y position values of the mouse?

Asked

Viewed 51 times

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

How does it appear on the console.log the position of the "mouseX" and "Mousey" white ball ?

javascript function

2 answers

0

all right?

You tried to put these variables inside the direct console?

Within the function draw() try to put:

console.log(mouseX, mouseY);

And see if it will appear on the console directly, if not, you need to find a function that does the conversion of these variables, "mouseX" and "Mousey", to some kind of data to be displayed inside console.

See if it solves your problem.

0

An example of use.

Here you have the element where you will capture the mouse.

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

Here the event that captures the position within the element.

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

Browser other questions tagged javascript function

You are not signed in. Login or sign up in order to post.