Estoy creando un juego de lienzo de JavaScript. Mi lógica incluye si un sprite ha ido a la parte inferior de la ventana del navegador (ya que el lienzo tiene 100% de ancho y 100% de alto).

Por lo tanto, puede ser bastante confuso si la altura de los navegadores sigue cambiando, ya que no estoy seguro de cuál es el comportamiento previsto si un sprite que ya se ha ido al fondo queda expuesto al cambiar el tamaño de la ventana a una altura mayor.

Creo que mis opciones son:

1. consulte el ancho y la altura del navegador sin cambiar el tamaño, O
2. Cuando el cliente cambia el tamaño del navegador a mitad del juego, debe haber un "Cambie el tamaño del navegador al tamaño inicial" y un botón para hacerlo (ya que cambiar el tamaño a un tamaño específico puede ser bastante difícil)

Creo que la opción 2 no es factible ya que no es compatible con Chrome y Opera, ya que es fácil abusar de la función de cambio de tamaño.

Para el número 1, no he encontrado si hay alguna propiedad que respalde esto. Lo intenté:

 console.log("width ", document.documentElement.clientWidth); console.log("height ", document.documentElement.clientHeight); window.onresize = function() { console.log("width ", document.documentElement.clientWidth); console.log("height ", document.documentElement.clientHeight); }

También probé document.innerWidth & innerHeight pero todavía no es el ancho y alto del navegador real. Es el ancho y la altura después de cambiar el tamaño O el ancho y la altura después de reducirlos con el ancho y la altura de la herramienta de desarrollo de Chrome. ¿Hay alguna manera de que pueda lograr esto?

Gracias