 |
|
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: 649 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:
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:
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:
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 |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
