3 - Juegos Multimedia HTML5 - Game Loop e inicio de un sistema de partículas

En la tercera entrega del curso de Juegos y Multimedia en HTML5 os vamos a presentar la primera animación que vamos a realizar, unos fuegos artificiales. Debido a que se trata de un proyecto complejo para empezar lo realizaremos en varios videotutoriales. El videotutorial anterior lo puedes encontrar aquí.
Conoceréis hoy al Game Loop y cuál es la manera más correcta de crear una clase en JavaScript. La clase que crearemos se llamará Particle y contendrá las coordenadas de una partícula y su vector velocidad. El conocido como Game Loop es un bucle que se encarga de pintar y actualizar el estado de un juego de una forma muy rápida, dando la sensación de movimiento. Puesto que el vídeo se explica por sí sólo no creo que sea necesario decir nada más. Los recursos utilizados en el videotutorial se encuentran al final de este artículo.



Aquí tienes el código del archivo particulas.html tal y como se encuentra al final de videotutorial. Podéis verla funcionando aquí.
<!DOCTYPE html>
<html>
  <head>
    <title>Part&iacute;culas</title>
    <meta charset="UTF-8">
    <meta name="author" content="http://programmingheroes.blogspot.com.es">
    <style>
        body {
            background-color: #80F;
        }
        div {
            text-align: center;
        }
        canvas {
            position: relative;
            top: 50px;
            box-shadow: 0px 0px 50px black;
        }
    </style>
    <script>
        var canvas, context, w, h, particles = [];
        
        var img = document.createElement("img");
        img.addEventListener("load", start, false);
        img.src = "img/fire.png";
        
        function start() {
            canvas = document.getElementById("c");
            context = canvas.getContext("2d");
            w = canvas.width = 1000;
            h = canvas.height = 800;
            setInterval(update, 1000/30);
        } // fin de start();
        
        /*
         * Game Loop, se repite hasta que el usuario decide
         *  salir de la página.
         */
        function update() {
            if (Math.random() < 0.05) {
                particles.push(new Particle());
            }
            moveParticles();
            paint();
        } // fin de update();

        function moveParticles() {
            for (var i=0; i<particles.length; i++) {
                particles[i].move();
            }
        } // fin de moveParticles();
        
        function paint() {
            context.fillStyle = "rgba(0, 0, 0, 1)";
            context.fillRect(0, 0, w, h);
            for (var i=0; i<particles.length; i++) {
                context.drawImage(img, particles[i].x, particles[i].y);
            }
        } // fin de paint();
        
        function Particle() {
            this.x = 0;
            this.y = 0;
            this.vx = Math.random()*5;
            this.vy = Math.random()*5;
        } // fin de Particle();
        
        Particle.prototype = {
            move: function() {
                this.x += this.vx;
                this.y += this.vy;
            },
        } // fin de Particle.prototype;
        
    </script>
  </head>
  <body>
      <noscript>
        No tiene habilitado JavaScript. Debería habilitarlo para poder
        disfrutar al completo de los contenidos de esta página.
      </noscript>
      <div>
          <canvas id="c">
              Tu navegador no soporta canvas.
          </canvas>
      </div>
  </body>
</html>

La imagen utilizada en el vídeo es simplemente un gradiente circular realizado con Gimp 2. De todas formas esta imagen no la vamos a utilizar en el siguiente videotutorial, es simplemente una demostración de cómo cargar una imagen y pintarla en el canvas.




1 comentario :

  1. Como se llama ese juego que estabas jugando

    ResponderEliminar