⇪

Animación de ida y vuelta

facebook-svg gplus-svg twitter-svg

Esta es una continuación de animación sencilla

Crear una animación de ida y vuelta es muy fácil. Si la pelota toca el borde izquierdo ( pelota.x <= pelota.r ) o el borde derecho del canvas ( pelota.x >= cw - pelota.r ) la velocidad de la pelota.vx *= -1 y el movimiento cambia de sentido.

if (pelota.x >= cw - pelota.r || pelota.x <= pelota.r) {
        pelota.vx *= -1;
   }
   pelota.x += pelota.vx;
Su navegador no soporta canvas :( 

var canvas = document.querySelector(".canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = 300;
var ch = canvas.height = 300;

var r = 25;
function Pelota(r){
	this.r = r;
	this.x = cw/3
	this.y = ch/2;
	this.vx = 3;
	this.vy = 1;
	this.color = "#6ab150";
}

Pelota.prototype.dibujar = function(ctx){
  ctx.save();
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
  ctx.fill();
  ctx.restore();
}
var pelota = new Pelota(r);


function Animacion() {
  elId = window.requestAnimationFrame(Animacion);
  ctx.clearRect(0, 0, cw, ch);
  
   if (pelota.x >= cw - pelota.r || pelota.x <= pelota.r) {
        pelota.vx *= -1;
   }
   pelota.x += pelota.vx;
   pelota.dibujar(ctx);
}
elId = window.requestAnimationFrame(Animacion);
Su navegador no soporta canvas :(

Vea esta demonstración en codepen.io

Rebotar paredes

Si ha mirado con atención el códigodel ejemplo anterior, seguramente ha visto un pequeño cambio: utilizamos ctx como parámetro del método dibujar().

Pelota.prototype.dibujar = function(ctx){...

Esto nos permite utilizar este método también en otros contextos.
A continuación dibujamos un nuevo canvas (.canvas1), y almacenamos su contexto en una variable ctx1. También creamos una nueva pelota. 

var pelota1 = new Pelota(r);

Aunque situada en otro contexto podemos dibujar esta nueva pelota utilizando el mismo método de antes:

pelota1.dibujar(ctx1);

Esta vez en lugar de desplazarse horizontalmente, la pelota cambia su posición tanto en x como en y. El resultado: una pelota que rebota en las paredes del canvas.

if (pelota1.x >= cw - pelota1.r || pelota1.x <= pelota1.r) {
        pelota.vx *= -1;
   }
if (pelota1.y >= ch - pelota1.r || pelota1.y <= pelota1.r) {
        pelota1.vy *= -1;
    }
pelota1.x += pelota1.vx;
pelota1.y += pelota1.vy;

No esta nada mal, pero lo podemos hacer mejor. Podemos coger estas líneas de código y transformarlas en un método que comprueba si la pelota toca las paredes, y actualiza el valor de la velocidad en x e y

Pelota.prototype.testColisionParedes = function(){
  if (this.x >= cw - this.r || this.x <= this.r) {
        this.vx *= -1;
      }
   if (this.y >= ch - this.r || this.y <= this.r) {
        this.vy *= -1;
      }
  this.x += this.vx;
  this.y += this.vy;  
}

Su navegador no soporta canvas :( 

var canvas1 = document.querySelector(".canvas1");
var ctx1 = canvas1.getContext("2d");
var cw = canvas1.width = 300;
var ch = canvas1.height = 300;

Pelota.prototype.testColisionParedes = function(){
  if (this.x >= cw - this.r || this.x <= this.r) {
        this.vx *= -1;
      }
   if (this.y >= ch - this.r || this.y <= this.r) {
        this.vy *= -1;
      }
  this.x += this.vx;
  this.y += this.vy;  
}

var pelota1 = new Pelota(r);

function Rebotar() {
  el_Id = window.requestAnimationFrame(Rebotar);
  ctx1.clearRect(0, 0, cw, ch);
  
  pelota1.testColisionParedes();// comprueba si la pelota toca las paredes
  pelota1.dibujar(ctx1);
  
}
el_Id = window.requestAnimationFrame(Rebotar);
Su navegador no soporta canvas :(

Vea esta demonstración en codepen.io