 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Animação, Animações, Técnicas de Animação |
Como movimentar uma bola na superfície do Canvas do HTML5 em determinados ângulosQuantidade de visualizações: 641 vezes |
|
Em dicas anteriores eu mostrei como podemos movimentar um objeto na superfície de desenho do Canvas do HTML5. Mostrei como animar uma bolinha na horizontal e depois na vertical. Agora veremos como movimentar a bola em um determinado ângulo, ou seja, 30 graus, 45 graus, 90 graus, etc. Comece analisando a imagem a seguir:  Agora vamos ao código. Veja a página HTML completa, incluindo o código JavaScript para a animação:
<!doctype html>
<html>
<head>
<title>Desenvolvimento de Games usando HTML5 e
JavaScript</title>
</head>
<body>
<Canvas id="canvas" width="800" height="600"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// velocidade de deslocamento da bola, ou seja,
// a quantidade de pixels percorridos de cada vez
var velocidade = 5;
// posição y da bola
var pos_y = canvas.height / 2;
// posição x da bola
var pos_x = canvas.width / 2;
// ângulo (em graus) do movimento
// altere para ver o resultado
var angulo = 30;
// atenção: na programação, o ângulo gira no
// sentido horário. Temos que invertê-lo para
// anti-horário
angulo = 360 - angulo;
// convertemos de graus para radianos
var angulo_rad = angulo * (Math.PI / 180);
// função que faz a animação
function animar(){
// usamos a conversão de coordenadas polares para
// coordenadas cartesianas de forma a encontrar
// os valores de x e y
pos_x = pos_x + velocidade * Math.cos(angulo_rad);
pos_y = pos_y + velocidade * Math.sin(angulo_rad);
// limpamos o canvas
contexto.clearRect(0, 0, canvas.width, canvas.height);
// e desenhamos a bola na nova posição
contexto.fillStyle = "red";
contexto.beginPath();
contexto.arc(pos_x, pos_y, 15, 0, Math.PI * 2, true);
contexto.closePath();
contexto.fill();
// e fazemos uma nova chamada à função animar()
window.requestAnimationFrame(animar);
}
// fazemos a primeira chamada à função animar()
window.requestAnimationFrame(animar);
</script>
</body>
</html>
Execute a página e veja que a bolinha sai do centro e segue na direção nordeste com um ângulo de 30 graus. Experimente alterar o ângulo e a velocidade da bolinha para ver os resultados obtidos. Se você quiser a bolinha se movimentando para cima, forneça o ângulo de 90 graus. Para baixo você pode experimentar o ângulo de 270, e assim por diante. A função que converte de graus para radianos já está embutida no exemplo também, assim como a conversão de coordenadas polares para coordenadas cartesianas. Em outras dicas veremos como rebater uma bolinha na superfície do Canvas do HTML5 usando ângulos de reflexão. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
