Estoy haciendo este juego a partir de este tutorial en línea . He centrado el juego pero añadiendo una etiqueta de estilo que ajusta el lienzo:
#canvas { position:absolute; top:0;bottom:0;right:0;left:0; margin:auto; }Centra correctamente el juego de rompecabezas, sin embargo, ahora ha descentrado la posición de mi mouse, lo que hace que haga clic en el mosaico del rompecabezas que está a un par de píxeles de distancia, traté de obtener el desplazamiento y restarlo donde sea que esté el mouse, pero no parece exacto, no funciona bien.
Las propiedades del evento del ratónlayerX y layerY no son estándar. Las propiedades de evento de mouse de solo offsetX y offsetY ya contienen la posición (x,y) del mouse sobre el lienzo si el mouse está sobre el lienzo.
Por lo tanto, para empezar, intente insertar una función para registrar la posición del mouse, como
function setMousePos(e) { if( e.target.tagName == "CANVAS") { _mouse.x = e.offsetX; _mouse.y = e.offsetY; } }y reemplazar el código en línea
if(e.layerX || e.layerX == 0){ _mouse.x = e.layerX - _canvas.offsetLeft; _mouse.y = e.layerY - _canvas.offsetTop; } else if(e.offsetX || e.offsetX == 0){ _mouse.x = e.offsetX - _canvas.offsetLeft; _mouse.y = e.offsetY - _canvas.offsetTop; } dondequiera que ocurra con setMousePos(e) .