Te damos la bienvenida a la comunidad de T!Estás a un paso de acceder al mejor contenido, creado por personas como vos.

O iniciá sesión con
¿No tenés una cuenta?


En esta segunda parte, vamos a lograr que nuestro circulo no desaparezca de la pantalla y rebote en los limites de nuestro canvas

Primera parte
http://webfocus.com.ar/animacion-con-canvas-html5/


DEMO

http://webfocus.com.ar/demos/html5/limitAnimation.html

hasta el momento tenemos esto

[color=#000000]

<canvas id="canvas" width="400" height="400"></canvas>

<script type="text/javascript">// <![CDATA[
function Ball (radius, color) {

this.x = 0;
this.y = 0;
this.radius = 40;

}

Ball.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);

context.lineWidth = this.lineWidth;

context.beginPath();

context.arc(this.x, this.y, this.radius, 0, (Math.PI * 2), true);
context.closePath();
context.fill();

context.restore();
};

if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 17);
});
}

if(!!document.createElement("canvas").getContext){
var canvas  = document.getElementById("canvas"),
context = canvas.getContext("2d"),
speed = 1,
ball = new Ball();

}else{
alert("tu navegador no soporta canvas :(")
}

function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);

ball.x  += speed;
ball.y  += speed;
ball.draw(context);
}

drawFrame();
// ]]></script>

[/color]


lo primero que vamos a modificar es la posición inicial de la clase circulo

[color=#000000]

ball.x = 20;

ball.y = canvas.height / 2;

[/color]


la posicion x la cambiamos a 20 que es valor del el radius que definido en la clase ball,

en la coordenada Y usamos canvas.height / 2 que sitúa el circulo a mitad del canvas

necesitamos saber cuando nuestro circulo pasa el ancho y alto de nuestro canvas , declaramos estas variables

[color=#000000]

var canvas = document.getElementById("canvas"),

context = canvas.getContext("2d"),

vy = 2,

vx = 2,

ball = new Ball(),

limitRight = canvas.width,

limitBottom = canvas.height,

limitLeft = 0,

limitTop = 0

[/color]


usamos canvas.width y canvas.height guardando su valor  para tener una referencia , ademas de cambiar la variable speed del ejemplo anterior por vx ,vy que vamos a usar en nuestro loop para modificar la posicion del circulo

el la funcion draw agregamos este codigo

[color=#000000]

if(ball.x + ball.radius > limitRight){

vx -= 2;

}

[/color]


verificamos si ball.x pasa el ancho del canvas en cada frame,

a la posición x le sumamos el radius del circulo, para lograr el efecto deseado

si la condición nos da verdadero , usamos cambiamos la variable speed mediante -= 2

por ejemplo si speed supera los 400 ( que el el ancho del canvas ) esta definición logra que por cada frame vx cambie a 398, 396, 394... etc,

ok , ya logramos que nuestro circulo no desaparezca al pasar el ancho del canvas y rebote en la dirección contraria , ahora debemos agregar un limite en posición 0 de la coordenada x

en lop agregamos esto

[color=#000000]

if(ball.x - ball.radius < limitLeft){ vx = +2; } [/color]


el metodo usado es similar al anterior , cambiado la variable que determina la conidicion ( limitLeft ) y usando el signo + para cambiar el valor de vx ;   ahora vamos a ver como lograr el mismo efecto anterior pero en la coordena y de nuestro canvas

[color=#000000] ball.x += vx; ball.y += vy; if(ball.y + ball.radius > limitBottom){

vy -= 2;

}

if(ball.y - ball.radius < limitTop){

vy = +2;

}

[/color]


la diferencia esencial con respecto a los anteriores ejemplos es que usamos la propiedad ball.y , determinamos si es mayor que la variable limitBottom , que guarda el alto de nuestro canvas,

si da correcto cambiamos la dirección de nuestra velocidad

hacemos lo mismo si nuestro circulo llega al tope de nuestro canvas usando la variable limitTop creada anteriormente

para que nuestro circulo empieze en un lugar diferente cada vez que acutlizamos la pagina cambiamos esto

[color=#000000]

ball.x = 20;

ball.y = canvas.height / 2;

[/color]


por esto

[color=#000000]

ball.x = Math.random() * canvas.width;

ball.y = Math.random() * canvas.height;

[/color]


mediante la función Math.random obtenemos un numero pseudo-aleatorio entre 0 y 1

por ejemplo



para nuestro ejemplo a este resultado lo multiplicamos tanto por el ancho y alto de nuestro canvas , lo que nos permite lograr que nuestro circulo tenga un nueva posición



CODIGO COMPLETO
http://webfocus.com.ar/animacion-con-canvas-html5-parte2/