En el juego web, quería simular clics con coordenadas. Interfaz de juego usando lienzo
Intenté varias cosas, pero nada ayudó.
Traté de hacer un nuevo MouseEvent pero me devuelve "verdadero" y no pasó nada.
const e1 = new MouseEvent("click", { clientX: 1673, clientY: 866 }); canvas.dispatchEvent(e1)Y esto me devuelve un error: canvas.elementFromPoint no es una función
canvas.elementFromPoint(1673,866);
¿Qué estoy haciendo mal o el lienzo puede tener otros métodos para simular clics?
El propósito del método .elementFromPoint() es devolver un elemento HTML, por ejemplo, un <div> . Como tal, este método está encadenado al objeto Documento . Eso significa que no puede llamarlo en una instancia de un elemento de lienzo, ya que simplemente no está disponible allí; por lo tanto, el mensaje de error: canvas.elementFromPoint no es una función
Aquí hay un ejemplo:
const e1 = new MouseEvent("click", { clientX: 50, clientY: 50 }); const canvas = document.getElementById("canvas"); canvas.addEventListener("click", (e) => { console.log(document.elementFromPoint(e.clientX, e.clientY)); }); canvas.dispatchEvent(e1); <canvas id="canvas"></canvas>El lienzo principal del juego debe estar dentro de un div html en el que se pueda hacer clic. Ese div principal que contiene sería lo que se redimensiona y, por lo tanto, podría agregarle divs específicos con appendChild y colocarlos de forma absoluta para botones específicos en la parte superior del lienzo. O obtenga los cordones específicos de clics del contenedor div.