Con la llegada del HTML5 se han introducido varios tag nuevos. Uno que me interesó bastante es el tag canvas ya que permite que dibujemos sobre la superficie de este. Y con un poco de habilidad se pueden hacer animaciones.El código es el siguiente:
Codigo
<!--DOCTYPE HTML--> <html> <body> <canvas id="miCanvas"> Tu navegador no soporta el tag CANVAS </canvas> <script type="text/javascript"> function animacion(){ this.caja = { posX: 0, posY: 0, velX: 2, velY: 2, tamano: 15 }; this.pantalla = { alto: 150, ancho: 250 }; this.canvas = document.getElementById('miCanvas'); this.ctx = this.canvas.getContext('2d'); this.limpiarPantalla = function(){ this.ctx.fillStyle = 'black'; this.ctx.fillRect(0, 0, this.pantalla.ancho, this.pantalla.alto); } this.dibujar = function(){ this.ctx.fillStyle = 'white'; this.ctx.fillRect(this.caja.posX, this.caja.posY, this.caja.tamano, this.caja.tamano); } this.actualizar = function(){ if( this.caja.posX+this.caja.tamano+this.caja.velX > this.pantalla.ancho ) this.caja.velX *= -1; if( this.caja.posY+this.caja.tamano+this.caja.velY > this.pantalla.alto ) this.caja.velY *= -1; if( this.caja.posX+this.caja.velX < 0 ) this.caja.velX *= -1; if( this.caja.posY+this.caja.velY < 0 ) this.caja.velY *= -1; this.caja.posX += this.caja.velX; this.caja.posY += this.caja.velY; } this.animar = function(){ this.limpiarPantalla(); this.actualizar(); this.dibujar(); } } miAnimacion = new animacion(); window.onload=function(){ setInterval(function(){ miAnimacion.animar() }, 32); }; </script> </body> </html>
Bien lo que hacemos acá en primer lugar es crear nuestra clase animación. Dentro de este definimos las propiedades de la caja: posición, velocidad y tamaño. Y de la pantalla: alto y ancho. También llamamos al tag canvas por su id y usamos el método getContext( "2d" ) para traer los métodos y propiedades para dibujar sobre este.
Luego tenemos cuatro métodos:
- limpiarPantalla(): Dibuja un rectángulo negro sobre todo el canvas con el metodo fillRect()
- dibujar(): Dibuja la caja en la posición actual.
- actualizar(): Este método se encarga de evitar que la caja se salga del canvas. Lo que hace es verificar la próxima posición de la caja, si está fuera del cuadro invierte la velocidad de la misma para que se dirija a la dirección contraria. Al final lo que hace es sumar la posición con la velocidad, de forma que si la velocidad en x es positiva la caja se moverá hacia la derecha y viceversa. Y si la velocidad en y es positiva se moverá hacia a abajo y viceversa.
- animar(): Por ultimo este método llama a los métodos anteriores en orden para que se produzca la animación, osea, se limpia la pantalla, se actualiza la posición de la caja y se dibuja la misma.
Al final lo que hacemos es crear el objeto miAnimacion de la clase animacion que acabamos de crear. Luego usamos el método setInterval() para hacer que nuestro método animar se repita cada 32 milisegundos.
El resultado es el siguiente:
