Javascript
Viendo artículo
Desarrollador: No estás conectado
Fecha: 19/03/2020 22:15:18
Canvas - Motor de juegos
Crear el motor principal del juego
En este artículo os dejo una pequeña pero muy potente función que será el motor principal de nuestro juego.
Con esta función no sólo controlamos el bucle infinito de nuestro juego, sino que también podemos ver cuantas veces por segundo refresca nuestro navegador el Canvas.

Detallar que Chrome refresa el navegado 60 veces por segundo, aunque un juego con 24 ya tendríamos una experiencia profesional.

Con loop.fps leemos los Fotogramas Por Segundo de nuestro juego. Lógicamente cuanto más carga de acciones tengamos, menos fps marcará, lo que nos puede venir muy bien a la hora de priorizar o de optimizar nuestras funciones.
var loop = {
  idEjecucion: null,
  ultimoRegistro: 0,
  aps: 0,
  fps: 0,
  iterar: function(registroTemporal){
    loop.idEjecucion = window.requestAnimationFrame(loop.iterar);
    loop.update(registroTemporal);
    loop.play();
    if(registroTemporal - loop.ultimoRegistro > 999){
      loop.ultimoRegistro = registroTemporal;
      /*console.log("APS: " + loop.aps + " 1 FPS: " + loop.fps); */
      loop.aps=0;
      loop.fps=0;
    };
  },
  stop: function() {

  },
  update: function (){
    loop.aps++;
  },

  play: function(){
    loop.fps++;
    borraCanvas();

    /* Aquí está el bucle infinito que contrala todo el juego  */
  }

};
Para insertar el objeto Canvas en nuestro HTML, podríamos hacer algo tan simple como esto.

index.html
<!DOCTYPE html>
<html5>
  <head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width">
    <title>My Game</title>
  </head>
  <body">

    <div id="divCanvas"><canvas id="canvas"></canvas></div>
    <script src="motor.js"></script>

  </body>
</html5>
Observar que he incluido el script con el enlace al archivo motor,js que sería donde implementaríamos nuestro objeto loop.

Para poner en marcha nuestro motor, simplemente llamamos a la función iterar y comenzará nuestro bucle infinito.
loop.iterar();
Cargar y refrescar Canvas
Antes de ejecutar nuestro motor, necesitamos referenciar el objeto html Canvas en javascript, porque es el lenguaje que vamos a utilizar en este caso para hacer nuestro juego.

Y para poder crear animaciones o mostrar diferentes acciones en el canvas, necesitamos que en cada repetición del bucle, se borre todo para volver a dibujarlo.

Esto lo haremos con el siguiente código que también podría ir implementado en nuestro motor.js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
var canvasWidth = 600;
var canvasHeight = 450;

function borraCanvas(){
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
};