Pong

Uma bola que sai do canto superior esquerdo com um determinado ângulo e velocidade e, ao batar numa tabela, reflete o movimento com o mesmo ângulo, no sentido oposto.

É um exemplo simples de uma animação criada com a função setInterval. Mais à frente usaremos outra forma de criar animações.

A direção inicial é dada pelos valores de incx e incy. O ecrã é atualizado a cada 40ms. Em cada atualização do ecrã, a posição da bola é atualizada com os incrementos incx e incy. Estes incrementos são atualizados sempre que a bola bate nas extremidades do canvas.

Note-se que o canvas tem que ser totalmente rescrito em cada frame.

Visualização:

<!DOCTYPE html>
<html>
<head>
<title>Gráfico</title>
<meta charset="iso-8859-1">
<script type="text/javascript">

var incx = 3 + 6 * Math.random();	// direção- coordenada x
var incy = 3 + 6 * Math.random();	// direção- coordenada y

// Garante velocidade mínima
var vMin = 8;
var vel = Math.sqrt(incx*incx+incy*incy);
if(vel<vMin) {
	incx *= vMin/vel;	
	incy *= vMin/vel;
}
// Nota: Para garantir velocidade mínima exata de vMin, era necessário corrigir as fórmulas anteriores com base na direção da velocidade.
// É preferível não tornar isto muito mais complexo, para não dificultar a compreensão.

incx = Math.floor(incx);
incy = Math.floor(incy);

var raio=5;	// raio do ponto cintilante
var x=raio, y=raio; 	// coordenadas do ponto cintilante

var ctx;

var larg, alt;

function init() {
	var c = document.getElementById("cvs");
	ctx = c.getContext("2d");
	larg = c.getAttribute("width");
	alt = c.getAttribute("height");
	var periodoRelogio = 40;
	setInterval("anima()", periodoRelogio);
}

function anima() {
	// Desenhar
	ctx.fillStyle = "black";
	ctx.beginPath();
	ctx.rect(0,0,larg,alt);
	ctx.fill();

	x += incx;
	y += incy;

	//window.alert(x+','+y);

	ctx.fillStyle = "#FFFF20";
	ctx.beginPath();
	ctx.arc(x,y,raio,0,2*Math.PI);
	ctx.fill();

	if(x+2*raio>larg) incx = -incx;
	if(x-raio<0) incx = -incx;
	if(y+2*raio>alt) incy = -incy;
	if(y-raio<0) incy = -incy;
}

</script>


</head>
<body onload="init();">
<canvas width="600" height="400" id="cvs"></canvas>
</body>
</html>

Deixe um comentário Cancelar resposta