 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Animação, Animações, Técnicas de Animação |
Como mover uma bola na superfície do Canvas do HTML5 na vertical - Para cima, para baixo e rebatendoQuantidade de visualizações: 677 vezes |
|
Muitos visitantes do site me perguntam quais são os passos básicos para se iniciar na programação em jogos. Minha resposta é sempre a mesma: começar pelas técnicas básicas. E entre essas técnicas básicas está o movimento de objetos na tela da aplicação, tanto na horizontal quanto na vertical. Uma vez que estas tarefas sejam entendidas completamente, os próximos passos serão menos difíceis. Nesta dica veremos como animar uma bolinha verticalmente na superfície do elemento Canvas do HTML5. Primeiro vamos movimentá-la de cima para baixo, depois de baixo para cima e, finalmente, ela vai ficar rebatendo do lado superior da tela para o lado inferior e vice-versa. 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="500"></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");
// taxa de deslocamento da bola
var taxa_deslocamento = 5;
// posição y da bola
var pos_y = 0;
// posição x da bola
var pos_x = 300;
// função que faz a animação
function animar(){
// a bola já está no limite da margem inferior
// do canvas?
if(pos_y < canvas.height){
// incrementa a posição y da bola
pos_y = pos_y + taxa_deslocamento;
// 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>
Veja que criamos uma variável chamada taxa_deslocamento que define a quantidade de pixel que o objeto será movido para a direita à cada vez que a função window.requestAnimationFrame() for chamada. Lembre-se de que, em geral, esta função é chamada 60 vezes por segundo (60 frames por segundo). Quanto maior o valor da variável taxa_deslocamento, mais rápido a bolinha se moverá pelo Canvas. Se você quiser, pode trocar o nome dessa variável por velocidade, pois é a quantidade de pixels percorridos por atualização da tela. A posição pos_x da bola é definida como 300 pixels e não sofrerá alteração, pois estamos movimento o objeto apenas na vertical. A variável pos_y começa em 0 e é incrementada com o valor da variável taxa_deslocamento. Como estamos aumentando o valor da variável pos_y de forma positiva, a bola se movimentará do topo da janela para a sua perte inferior. Note também o uso da função clearRect() do Canvas para limpar a superfície do elemento antes de desenharmos a bolinha novamente. Veja agora como podemos movimentar a bolinha de baixo para cima:
<!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");
// taxa de deslocamento da bola
var taxa_deslocamento = 5;
// posição y da bola começando da parte inferior
var pos_y = canvas.height;
// posição x da bola
var pos_x = 300;
// função que faz a animação
function animar(){
// a bola já está no limite da margem superior
// do canvas?
if(pos_y > 0){
// decrementa a posição y da bola
pos_y = pos_y - taxa_deslocamento;
// 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>
Veja que agora o valor da variável pos_y é ajustada inicialmente para a altura do Canvas. Então, dentro da chamada à função window.requestAnimationFrame() nós decrementamos o seu valor de acordo com o valor da variável taxa_deslocamento, que controla a velocidade do objeto. Para finalizar, veja o código HTML5 completo que aplica o efeito de rebater na bolinha, na vertical, é claro:
<!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");
// taxa de deslocamento da bola
var taxa_deslocamento = 5;
// posição y da bola
var pos_y = 0;
// posição x da bola
var pos_x = 300;
// função que faz a animação
function animar(){
// a bolinha alcançou os limites das margens
// superior ou inferior?
if((pos_y > canvas.height) || (pos_y < 0)){
// muda o sinal da taxa_deslocamento
taxa_deslocamento = taxa_deslocamento * -1;
}
// movimentamos a bolinha
pos_y = pos_y + taxa_deslocamento;
// 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 este exemplo e veja como a bolinha rebate ao chegar à margem superior ou inferior do Canvas. O truque aqui foi multiplicar o valor da variável taxa_deslocamento por -1. Em outra dica veremos como movimentar a bola na horizontal, ou seja, manipulando a variável x. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
|
C# - C# Windows Forms para iniciantes - Como limpar todo o conteúdo de um controle TextBox via código GoLang - Como retornar o tamanho de uma string em Golang usando os métodos len() e RuneCountInString() |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
