Segue a animação Pong.
<!DOCTYPE html>
<html>
<head>
<title>Seu Primeiro Jogo Pong - HTML5</title>
<meta name="author" content="rodrigo braga"></meta>
<style type="text/css">
canvas {
border: 1px solid #000000;
}
</style>
</head>
<body onload="inicializar()">
<canvas id="canvas" width="600" height="480">
Navegador não suporta HTML5
</canvas>
<script type="text/javascript">
var barraAltura, barraLargura, jogadorPosicaoX,
velocidadeJogador, bolaDiametro, bolaPosX,
bolaPosY, velocidadeBola, pontosJogador, colisao;
function inicializar()
{
barraAltura = 15;
barraLargura = 90;
pontosJogador = 0;
jogadorPosicaoX = (canvas.width - barraLargura) / 2;
velocidadeJogador = 20;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
bolaDiametro = 10;
bolaPosX = canvas.width / 2;
bolaPosY = -10;
velocidadeBola = 10;
colisao = false;
document.addEventListener('keydown', keyDown);
setInterval(gameLoop, 30);
}
function keyDown(e)
{
if(e.keyCode == 37)
{
if(jogadorPosicaoX > 0)
{
jogadorPosicaoX -= velocidadeJogador;
}
}
if(e.keyCode == 39)
{
if(jogadorPosicaoX < (canvas.width - barraLargura))
{
jogadorPosicaoX += velocidadeJogador;
}
}
}
function gameLoop()
{
//Limpa Tela
context.clearRect(0, 0, canvas.width, canvas.height);
// Bola
context.beginPath();
context.arc(bolaPosX, bolaPosY, bolaDiametro, 0,
Math.PI * 2, true);
context.fill();
context.fillStyle ='red';
if(bolaPosY <= canvas.height)
{
bolaPosY += velocidadeBola;
}
else
{
bolaPosX = Math.random() * 600;
bolaPosY = -10;
colisao = false;
}
// Checar Colisão
/*Em seguida vamos pensar na matemática da colisão */
if((bolaPosX > jogadorPosicaoX &&
bolaPosX < jogadorPosicaoX + barraLargura) &&
bolaPosY >= canvas.height - barraAltura &&
colisao == false)
{
pontosJogador++;
colisao = true;
}
// Escreve placar
context.font = "32pt Tahoma";
context.fillText(pontosJogador, canvas.width - 70, 50);
context.fillText("Liceu", canvas.width - 200, 50);
// Jogador
context.fillRect(jogadorPosicaoX, canvas.height -
barraAltura, barraLargura, barraAltura);
}
</script>
</body>
</html>
Nenhum comentário:
Postar um comentário