3

Según en su experiencia, pueden sugerirme algún método de poder mantener un loop de ejecución para mantener la lógica de una aplicación de un videojuego en javascript, estoy haciendo la parte del render con canvas para dibujar.

Actualmente estoy utilizando algo similar a esto:

function init() {
    game = new Game();

    setInterval(function() {
       game.loop();
    },50);
}

function Game(){
    this.loop = function(){
      //Lógica del juego 
    }
}

Considero que no es una manera práctica para mantener la ejecución ya que al parecer es costoso hacerlo de esta manera.

2 respuestas 2

4

Para un motor de juegos te recomiendo utilizar el requestAnimationFrame (en lugar de setTimeout).

El requestAnimationFrame es parte del API de HTML5 y los navegadores le dan un trato distinto que al setTimeout, por ejemplo: optimiza para que la ejecución de tu juego sea en 60fps (frames per second).

Aquí te dejo un ejemplo pequeño, verás que se llama al requestAnimationFrame enviandole la funcion repeatOften, luego al terminar de ejecutar la función se vuelve a hacer un requestAnimationFrame (creando así el loop).

function repeatOften() {
  // Do whatever
  requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);

Puedes darle un vistazo a esta página para más información: https://css-tricks.com/using-requestanimationframe/

2

Más que costoso el problema es que setInterval va a lanzar una ejecución del método loop cada 50 milisegundos. Es decir si el método loop tarda más de 50 milisegundos empezaría una nueva ejecución nada más acabar por lo que se convertiría prácticamente en un bucle.

Yo establecería el tiempo de refresco una vez ejecutado el loop:

function init() {
    game = new Game();

    game.loop();
}

function Game(){
    this.loop = function(){
      //Lógica del juego 
      
      setTimeout(this.loop, 50);
    }
}

2
  • 1
    En lugar de setTimeout(this.loop(), 50); debería ser setTimeout(this.loop, 50);
    – devconcept
    Commented el 6 jun. 2016 a las 20:34
  • Cierto. Edito la respuesta. Commented el 6 jun. 2016 a las 21:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.