Animaciones

Contactar con el profesor

Simple Animation con setInterval

Mejor rendimiento con requestAnimationFrame

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var posX = 100;

requestAnimationFrame(pintaCuadrado)
function pintaCuadrado(){
	ctx.save();
	ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
	ctx.restore();	
	posX = posX + 5;
	ctx.beginPath();
	ctx.rect(posX,0,200,200);
	ctx.fill();
	ctx.closePath();
	requestAnimationFrame(pintaCuadrado)
}

Estructura correcta del bucle infinito para hacer un videojuego

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var x = 10;
var y = 10;
var w = 20;
var h = 30;
var speed = 2;

var update = function(){
	x +=speed;
}
var draw = function(){
	ctx.clearRect(0,0,300,300);
	ctx.fillStyle = "rgb(200, 0, 100)";
	ctx.fillRect(x, y, w, h);
}
var step = function(){
	update();
	draw();
	window.requestAnimationFrame(step);
};

step();

Ejercicio

Siguiendo la estructura propuesta en el ejemplo anterior, dibujar un rectángulo que cuando llegue al final de la pantalla dé media vuelta.Ver ejemplo resuelto.

Ejercicio

Utilizar el siguiente array de enemigos en lugar de uno solo.

var enemies = [
	{
    	x: 100, //x coordinate
    	y: 100, //y coordinate
    	speedY: 1, //speed in Y
    	w: 40, //width
    	h: 40 //heght
    },
    {
        x: 260,
        y: 100,
        speedY: 2,
        w: 40,
        h: 40
    },
    {
        x: 380,
        y: 100,
        speedY: 3,
        w: 40,
        h: 40
    },
    {
        x: 450,
        y: 100,
        speedY: 7,
        w: 40,
        h: 40
    }
];

Ejercicio

Utilizando el siguiente código, dibujar un jugador en escena, de tal forma que cuando mantengamos pulsado el ratón sobre el canvas, el jugador avance, y si dejamos de pulsar, el jugador se quede quieto

canvas.addEventListener('mousedown', function(){
  player.isMoving = true;
});
canvas.addEventListener('mouseup', function(){
  player.isMoving = false;
});

Ejercicio

Retocar el código anterior utilizando el siguiente código para que responda correctamente a los eventos del móvil

canvas.addEventListener('mousedown', movePlayer);
canvas.addEventListener('mouseup', stopPlayer);

canvas.addEventListener('touchstart', movePlayer);
canvas.addEventListener('touchend', stopPlayer);

Gestionando colisiones

Implementar el siguiente código para gestionar colisiones

var checkCollision = function(rect1, rect2){
	var closeOnWidth = Math.abs(rect1.x -rect2.x)<=Math.max(rect1.w, rect2.w);
	var closeOnHeight = Math.abs(rect1.y - rect2.y)<=Math.max(rect1.h, rect2.h);
	return closeOnHeight && closeOnWidth;
}
...

if(checkCollision(player, enemies[i])){
	gameLive = false;
	alert("Game Over");
}

Ejercicio – llegar al tesoro

Añadir un nuevo objeto: el tesoto. Cuando el juagor colisiones contra él, habrá ganado la partida.

Ejercicio – Añadimos el uso de sprites

Habrá que utilizar el siguiente código:

var sprites = {};
...
var load = function(){
  sprites.player = new Image();
  sprites.player.src = "images/hero.png";

  sprites.background = new Image();
  sprites.background.src = "images/floor.png";

  sprites.enemy = new Image();
  sprites.enemy.src = "images/enemy.png";

  sprites.tesoro = new Image();
  sprites.tesoro.src = "images/chest.png";

}
...
var draw = function(){
	ctx.clearRect(0,0,400,400);
	
    ctx.fillRect(player.x, player.y, player.w, player.h);
    ctx.fillRect(tesoro.x, tesoro.y, tesoro.w, tesoro.h);

    ctx.drawImage(sprites.background, 0, 0);
    ctx.drawImage(sprites.player, player.x, player.y);

    enemies.forEach(function(element, index){
    	ctx.drawImage(sprites.enemy, element.x, element.y);
    });
    ctx.drawImage(sprites.tesoro, tesoro.x, tesoro.y);
}
...
load();
step();
← Convertir un svg a código del canvas de HTML5
Animaciones →

Aviso Legal | Política de privacidad