flipper.htm

<!DOCTYPE HTML>
<html>
<head>


<script type="text/javascript">

var canvas;
var ctx;

var OX = 200;
var OY = 100;
var DX = 400;
var DY = 500;

//
// Ejemplo de colisiones
//

var time = 0;
var elapsed_time = 0.01;

var acel = {x:0,y:150};
var vel = {x:(Math.random()-0.5)*200 , y:-250};
var pos_ini = {x:DX/2,y:100};
var pos = pos_ini;
var pos_ant = pos;
var radio = 10;


var pos_pinza = {x:150,y:430};
var largo_pinza = 70;
var timer_pinza = 0;
var timer_pinza_total = 0.5;
var timer_pinza_delay = 0;
var flag_delay_pinza = false;
var timer_perdio = 0;


var circulos = new Array();
var cant_circulos = 0;
var lineas = new Array();
var cant_lineas = 0;

var game_paused = false;

// imagen 
var img = new Image(); 


// Crea la escena usando circulos y lineas
// -------------------------------------------------------------

function crear_escena()
{
	var dw = 10;
	circulos[0] = { x:100,  y:120 , r:40 , clr:'rgba(0,0,255,255)'};
	circulos[1] = { x:DX-100,  y:120 , r:40 , clr:'rgba(0,0,255,255)'};
	circulos[2] = { x:110, y:200 , r:10 , clr:'rgba(255,100,0,255)'};
	circulos[3] = { x:130, y:250 , r:10 , clr:'rgba(255,100,0,255)'};
	circulos[4] = { x:DX-110, y:200 , r:10 , clr:'rgba(255,100,0,255)'};
	circulos[5] = { x:DX-130, y:250 , r:10 , clr:'rgba(255,100,0,255)'};
	circulos[6] = { x:200, y:300 , r:5 , clr:'rgba(0,0,0,255)'};
	circulos[7] = { x:200, y:350 , r:5 , clr:'rgba(0,0,0,255)'};

	cant_circulos = 6;

	lineas[0] = { x0:10,		y0:300,		x1:100 ,	y1:450};
	lineas[1] = { x0:100,	y0:340,		x1:150 ,	y1:430};
	lineas[2] = { x0:50,	y0:60,		x1:100 ,	y1:20};
	lineas[3] = { x0:130,	y0:30,		x1:150 ,	y1:50};
	cant_lineas = 4;
	var cant_ant = cant_lineas;

	for(i=0;i<cant_ant;++i)
		lineas[cant_lineas++] = {	x0:DX-lineas[i].x0,	y0:lineas[i].y0,	
									x1:DX-lineas[i].x1-dw, y1:lineas[i].y1};


	cant_ant = cant_lineas;
	for(i=0;i<cant_ant;++i)
	{
		var p0 = {	x:lineas[i].x0,	y:lineas[i].y0};
		var p1 = {	x:lineas[i].x1,	y:lineas[i].y1};
		var dir_N = normal(substract(p1,p0));
		normalize(dir_N);
		p0 = add(p0 , mul(dir_N,dw));
		p1 = add(p1 , mul(dir_N,dw));
		lineas[cant_lineas++] = {	x0:p0.x,	y0:p0.y,	x1:p1.x,	y1:p1.y};

		p0 = add(p0 , mul(dir_N,-dw/2));
		p1 = add(p1 , mul(dir_N,-dw/2));


		circulos[cant_circulos++] = { x:p0.x,  y:p0.y, r:dw/2 , clr:'rgba(0,0,0,255)'};
		circulos[cant_circulos++] = { x:p1.x,  y:p1.y, r:dw/2 , clr:'rgba(0,0,0,255)'};
	}

	lineas[cant_lineas++] = { x0:pos_pinza.x,	y0:pos_pinza.y,		
							x1:pos_pinza.x,	y1:pos_pinza.y + largo_pinza};


	return 0;
}

// Algebra de vectores
// -------------------------------------------------------------

function add(u , v)
{
	return {x: u.x + v.x , y:u.y + v.y};	
}


function substract(u , v)
{
	return {x: u.x - v.x , y:u.y - v.y};	
}

function mul(u , k)
{
	return {x: u.x*k , y:u.y*k};	
}

function dot(u , v)
{
	return u.x*v.x+u.y*v.y;	
}

function length(u)
{
	return Math.sqrt(u.x*u.x + u.y*u.y);	
}

function normalize(u)
{
	var len = length(u);
	u.x /= len;	
	u.y /= len;	
}


function normal(u)
{
	return {x: -u.y , y:u.x};
}

function reflect(i,n)
{
	
	// v = i - 2 * dot(i, n) * n
	return add(i , mul(n,-2*dot(i, n)));
}


// r = p0 +kD
function ray_circle(p0,Dir,centro,radio)
{
    // necesito que Dir este normalizado, si no esta puedo hacer esta transformacion
    // r = p0 + (t*ld) * (Dir * (1/ld))
    // r = p0 + k D
    // donde k = t*ld
    // D = Dir * (1/ld)


    var ld = length(Dir);
    var D = mul(Dir, 1 / ld);

    // Ahora si r = p0 + k D

	var rta = -1;
	// verifico si interseta con la esfera
	var aux = add(p0 , mul(centro,-1));
	var c = dot(aux,aux) - radio*radio;
	var B = 2*dot(D,aux);
	var disc = B*B - 4*c;
	if(disc>=0)
	{
		var t0 = (-B-Math.sqrt(disc))/2;
		var t1 = (-B+Math.sqrt(disc))/2;

		if(t0>t1)
		{
			var aux_t = t1;
			t1 = t0;
			t0 = aux_t;
		}

        // entra en la esfera por t0 y sale por t1. 
        // se supone que el punto p0 NO esta dentro de la esfera, asi que t0, t1 son ambos positivos o ambos negativos
        // devuelve en base al D original, es decir hay que escalar segun ld
        rta = t0 / ld;
	}
	return rta;
}



function matriz_det(M)
{
	return M.a11*M.a22 - M.a12*M.a21;
}


function matriz_X(M,B)
{
	return M.a22*B.x-M.a12*B.y;
}


function matriz_Y(M,B)
{
	return M.a11*B.y-M.a21*B.x;
}



function ray_segment(p0,dir_0,p1,dir_1)
{
	var rta = -1;
	var M = {	a11: dir_0.x , a12:-dir_1.x ,
				a21: dir_0.y , a22:-dir_1.y
			}

	var det = matriz_det(M);
	if(Math.abs(det)>0.0001)
	{
		var B = {x:p1.x-p0.x , y:p1.y-p0.y};
		var t = matriz_X(M,B) / det;
		var k = matriz_Y(M,B) / det;
		if(k>=0 && k<=1 && t>=0 && t<=1)
			rta = t;
	}
	return rta;
}



// -------------------------------------------------------------
// dibuja los objetos 

function draw_obj() 
{
	for(i=0; i<cant_circulos; ++i)
	{

		ctx.fillStyle = circulos[i].clr;
		ctx.beginPath();
		ctx.arc(OX + circulos[i].x, OY + circulos[i].y, circulos[i].r, 0, Math.PI*2,true); 
		ctx.closePath();
		ctx.fill();		
	}

	//ctx.lineWidth = 5;
	for(i=0; i<cant_lineas; ++i)
	{

		ctx.beginPath();
		ctx.moveTo(OX + lineas[i].x0, OY + lineas[i].y0); 
		ctx.lineTo(OX + lineas[i].x1, OY + lineas[i].y1); 
		ctx.closePath();
		ctx.stroke();		
	}
	ctx.lineWidth = 1;

}



function draw() 
{
	if (canvas.getContext)
	{
		ctx.fillStyle = timer_perdio>0 ? 'rgba(0,0,0,255)' : 'rgba(255,255,255,255)';
		ctx.fillRect(0,0,1000,700);
		ctx.fillStyle = 'rgba(192,255,192,255)';
		ctx.fillRect(OX ,OY ,DX,DY);
		time+=elapsed_time;

		// dibujo el fondo
		draw_obj();

		if(game_paused)
		{
			// dibujo la bolita
			ctx.drawImage(img,OX + pos.x - radio, OY + pos.y - radio, 2*radio,2*radio);

			ctx.beginPath();
			ctx.moveTo(OX + pos_ant.x, OY + pos_ant.y); 
			ctx.lineTo(OX + pos.x, OY + pos.y); 
			ctx.closePath();
			ctx.stroke();		

			return;
		}

		if(timer_perdio>0)
		{
			timer_perdio -= elapsed_time;
			if(timer_perdio<0)
			{
				timer_perdio = 0;
				// re-inicio el juego
				pos = pos_ini;
				vel = {x:(Math.random()-0.5)*200 , y:-350};
			}


			// dibujo la bolita
			ctx.drawImage(img,OX + pos.x - radio, OY + pos.y - radio, 2*radio,2*radio);

			return;
		}

		// integro la velocidad
		pos_ant = pos;
		vel = add(vel , mul(acel,elapsed_time));
		var D = mul(vel,elapsed_time);
		pos = add(pos , D);


		if(timer_pinza_delay)
		{
			timer_pinza_delay-= elapsed_time;
			if(timer_pinza_delay<0)
				timer_pinza_delay = 0;
		}
		else
		if(timer_pinza>0)
		{
			timer_pinza -= elapsed_time;
			if(timer_pinza<0)
				timer_pinza = 0;

			
			var ang_pinza = Math.PI * (1 - timer_pinza /timer_pinza_total);
			if(ang_pinza > Math.PI/2)
			{
				if(!flag_delay_pinza)
				{
					// solo la primera vez que llega a 90 grados genera el delay
					timer_pinza_delay = 1;
					flag_delay_pinza = true;
					ang_pinza = Math.PI / 2;
				}
				else
					// esta volviendo
					ang_pinza = Math.PI - ang_pinza;
			}

			
			var d_pinza = {x:Math.sin(ang_pinza)*largo_pinza , y:Math.cos(ang_pinza)*largo_pinza};
			lineas[cant_lineas-1].x1  = pos_pinza.x + d_pinza.x;
			lineas[cant_lineas-1].y1  = pos_pinza.y + d_pinza.y;

			// caso particular, verifico si la pinza colisiona con la bolita
			var golpeo_bolita = false;
			if(pos_ant.y>=pos_pinza.y && pos_ant.x>=pos_pinza.x && pos_ant.x<=pos_pinza.x+d_pinza.x && 
				length(substract(pos_ant,pos_pinza))<=largo_pinza)
			{
				golpeo_bolita = true;
			}
			else
			if(pos.y>=pos_pinza.y && pos.x>=pos_pinza.x && pos.x<=pos_pinza.x+d_pinza.x && 
				length(substract(pos,pos_pinza))<=largo_pinza)
			{
				golpeo_bolita = true;
			}

			if(golpeo_bolita)
			{
				// la pinza le pego a la bolita, 
				// la pongo en pos y segura y que se mueva para arriba
				pos.y = pos_pinza.y - radio - 10;
				vel.y = -250;
			}


		}


		// verifico los limites
		if(pos.x<radio)
		{
			// rebote izquierdo
			pos.x = 2*radio - pos.x;
			vel.x *= -1;
		}
		else
		if(pos.x>DX-radio)
		{
			// rebote derecho
			pos.x = (DX-radio)*2 - pos.x;
			vel.x *= -1;
		}

		if(pos.y<radio)
		{
			// rebote abajo
			pos.y = 2*radio-pos.y;
			vel.y *= -1;
		}
		else
		if(pos.y>DY-radio)
		{
			// Perdio, espero un segundo y empieza de nuevo
			timer_perdio = 1;
		}

		// quiero ir de la pos_ant a la pos nueva
		// Verifico las intersecciones contra todos los objetos
		for(i=0;i<cant_circulos;++i)
		{
			// verifico la interseccion con el circulo i
			var c = {x:circulos[i].x , y:circulos[i].y};		// centro de la esfera
			var t = ray_circle(pos_ant,D,c,circulos[i].r+radio);
			if(t>0 && t<1)
			{
				D = mul(D,t);
				// Calculo el punto de interseccion
				var Ip= add(pos_ant , D);
				// calculo la normal en el pto de interseccion
				var N = substract(Ip,c);
				normalize(N);
				// Calculo la direccion de rebote
				D = reflect(D,N);
				// Actualizo la nueva posicion, utilizando el tiempo en restante, para aplicarlo
				// a la direccion de rebote
				var rtime = elapsed_time*(1-t);		// tiempo restante
				pos = add(Ip , mul(D,rtime));
				// actualizo la velocidad
				normalize(D);
				vel = mul(D,length(vel)*0.75);
				// no soporta mas colisiones en el mismo frame
				i = cant_circulos;
			}
		}



		for(i=0;i<cant_lineas;++i)
		{

			var p1 = {x:lineas[i].x0 , y:lineas[i].y0};
			var dir_1 = {x:lineas[i].x1-p1.x , y:lineas[i].y1-p1.y};
			// dezplazo la recta para tener en cuenta el radio de la bolita
			var dir_N = normal(dir_1);
			normalize(dir_N);
			// puedo desplazar en sentido positivo o negativo, pero solo interesa el sentido
			// que se acerca a la pelotita, para ello uso el hecho que angulo entre la normal y la direccion
			// de la pelotita tiene que ser >180 grados si estan en la conf. correcta
			var desf;
			if(dot(dir_N,D)<0)
				desf = mul(dir_N,radio);
			else
				desf = mul(dir_N,-radio);
			p1 = add(p1 , desf);

			var t = ray_segment(pos_ant,D,p1,dir_1);
			if(t>0 && t<1)
			{
				D = mul(D,t);
				// Calculo el punto de interseccion
				var Ip= add(pos_ant , D);
				// calculo la normal en el pto de interseccion
				var N = normal(dir_1);
				normalize(N);
				// Calculo la direccion de rebote
				D = reflect(D,N);
				// Actualizo la nueva posicion, utilizando el tiempo en restante, para aplicarlo
				// a la direccion de rebote
				var rtime = elapsed_time*(1-t);		// tiempo restante
				pos = add(Ip , mul(D,rtime));
				// actualizo la velocidad
				normalize(D);
				vel = mul(D,length(vel));
				// no soporta mas colisiones en el mismo frame
				i = cant_lineas;
			}
		}

		// dibujo la bolita
		ctx.drawImage(img,OX + pos.x - radio, OY + pos.y - radio, 2*radio,2*radio);


	}
}

function doKeyDown(e) 
{
	if(e.keyCode==80)
	{
		game_paused = !game_paused;
	}
	else
	{
		timer_pinza = timer_pinza_total;
		flag_delay_pinza = false;
		timer_pinza_delay = 0;
	}
}


function animate()
{   
	canvas = document.getElementById('mycanvas');
	document.addEventListener( "keydown", doKeyDown, true);
	ctx = canvas.getContext('2d');
	img.src = 'ball.png';
	crear_escena();
	setInterval(draw, 1);
} 




</script>
</head>
<body onload="animate();">
	<canvas id="mycanvas" width="1000" height="700"></canvas>
</body>
</html>
 