Estoy tratando de hacer un bucle de juego para un juego de navegador HTML/Javascript en el que estoy trabajando. Actualmente estoy usando este código aquí como un bucle:
while(true) { (game code here) }El código está en un archivo Javascript vinculado externamente y debe tener un bucle de juego que no interrumpa el juego.
Después de leer un poco, descubrí que el bucle hace que la página no responda. ¿Cuál es la forma correcta de incluir un bucle de juego en HTML/Javascript sin romper la página?
Nunca debe usar un ciclo while (true) (o cualquier cosa que siempre resulte en true ).
while (true) { console.log("Most likely will crash the browser!"); }No lo convertí en un fragmento de código porque lo más probable es que bloquee su navegador.
Lo que hará (en este caso) es generar la string un número infinito de veces (hasta que el navegador se bloquee).
Most likely will crash the browser! Most likely will crash the browser! Most likely will crash the browser! ...Stops responding... Una buena alternativa para un bucle de juego es usar requestAnimationFrame() .
Las grandes cosas acerca de esto son:
Según MDN Web Docs , establece que:
El método
window.requestAnimationFrame()le dice al navegador que desea realizar una animación y solicita que el navegador llame a una función específica para actualizar una animación antes del siguiente repintado.
Devuelve un valor entero long , que se puede usar para llamar a window.cancelAnimationFrame() para cancelarlo.
A continuación se muestra un ejemplo sencillo.
function loop() { // You don't need 'window', because by default it's global. requestAnimationFrame(loop); // Example... GameClass.updateGame(); } La razón por la que pasa la función loop() en requestAnimationFrame() es porque llamará a esa función para actualizar en el próximo repintado, razón por la cual la función de ejemplo GameClass.updateGame() se llama como marcador de posición.
Para obtener más ejemplos, consulte los ejemplos en MDN Web Docs . Son más avanzados y llevará demasiado tiempo explicarlos en esta respuesta.
En resumen, debe usar la función requestAnimationFrame() en lugar del bucle while (true) para evitar que el navegador no responda.
^ Solo compatible con IE 10 y 11.
Javascript dentro del navegador está bloqueando cualquier entrada del usuario. También es de un solo hilo. No se permite cambiar nada mientras se ejecuta una función. Por lo tanto, el navegador no responde hasta que se detiene el script. Es así como debe diseñarse para que no tenga que preocuparse si los datos que recibió en el mouse o sobre la página cambiaron ... imagine si su programa estaba leyendo la información de la página, cambió, entonces necesita actualizarlo usando la información que leíste antes de que cambiara... hilo único significa que no tienes que preocuparte por eso. No cambió, el navegador no respondía.
Tenga en cuenta que los trabajadores web se ejecutan en un subproceso diferente y pueden enviar señales o eventos a las funciones que actualizan la página. Los trabajadores web no bloquean el navegador. Y los trabajadores web no pueden actualizar el HTML directamente, a menos que la página cambie antes de que finalice la función.
Por lo tanto, debe ejecutar el ciclo y luego permitir que el navegador interactúe y ejecutar el ciclo nuevamente.
setTimeout() ha sido el método de la vieja escuela, tenga en cuenta que la demora es opcional (si no se usa ninguna demora, comenzará tan pronto como se complete todo lo demás que el navegador debe hacer ... IE obtener la entrada del usuario)
function gameloop() { (game code here) setTimeout(gameloop); // technically the script stopped until the timeout event. } setTimeout(gameloop); // fire event with no delay. IE start loop.La nueva escuela es requestAnimationFrame() según la respuesta de Arnav . requestAnimationFrame() es más rápido, por lo tanto, mejor.