Vimos até o momento como adicionar elementos na tela e posiciona-los onde são necessários, mas um jogo normalmente exige movimentação dos elementos gráficos. Para adicionar movimentação é preciso adicionar um evento que seja chamado de tempos em tempos e realize o deslocamento dos elementos gráficos.
Dando continuidade ao nosso código anterior, adicionaremos um aumento no valor da coordenada do eixo Y da bola, fazendo ela se deslocar para baixo na cena e esse aumento será aplicado a cada frame do jogo. O código abaixo adiciona essa funcionalidade.
O código iniciar com o cabeçalho de uma função. Essa função recebe como parâmetro um “event” é que passado pois essa função será chamada através de do ouvinte especificado na última linha do código. A função possui três comandos, onde no primeiro é especificado que uma variável chamada “y” receberá o atual valor da coordenada Y da bola (através da instrução ball:getY), no segundo comando o valor da variável “y” é incrementado em uma unidade e por fim é modificado o valor da coordenada Y da bola, fazendo ela aparecer 1 pixel mais abaixo do que anteriormente.
Ao executar a função criada por vezes consecutivas, o que veremos na execução do jogo é a bola ir descendo na tela de maneira constante, até sumir completamente da tela. Complementa-se que se o valor do incremento de “y” for maior do que 1, a bola irá se deslocar mais rapidamente. Para fazer a função ser executada repetidas vezes, a fazemos ser chamada por um ouvinte.
A última linha do código adiciona um ouvinte na cena que realiza a chamada da função a cada frame do jogo. Essa configuração do ouvinte é realizada a partir dos dois parâmetros especificados para o ouvinte, onde no primeiro faz com que a chamada seja realizada a cada frame (Event.ENTER_FRAME) e o segundo parâmetro é qual função deverá ser chamada. Se o leitor possuir algum conhecimento de ActionScript do Flash, notará uma grande similaridade na codificação dos eventos.
No atual código a bola irá sumir da tela, continuando sua descida infinitamente. Para impedir que o elemento saia da cena, faremos uso de um desvio condicional adicionado no código abaixo, onde é testado se a bola chegou no limite inferior da tela. Se a bola não chegou ao limite inferior, o valor da variável “y” aumenta. O código também conta com o uso da instrução print, que irá mostrar na área de saída (output) o valor que a variável “y” vai assumindo no código.
De considerarmos que o interesse era realmente deixar a bola sumir na parte inferior da cena (como no penúltimo código) e não apenas deixar ela parada (o que fizemos no último código), o que observamos é que a bola continuará tendo seu incremento da coordenada Y infinitamente, consumindo o tempo todo processamento, mesmo não existindo mais para o jogo. Nesse sentido é preciso remover essa instância do jogo, o que é feito através no código ilustrado a seguir.
A instrução stage:removeChild(ball) irá remover a instância da bola a partir do momento que ela alcançar o limite inferior da cena. Simplesmente solicitar a remoção como feito não é suficiente e gerará o erro mostrado na figura 13, que é uma janela indicando um erro durante a execução do jogo.
O erro acorreu devido ao fato de que a instância da bola foi removida, mas a função que faz ela mover-se na cena continua tentando movimentá-la, mas sua referencia foi perdida. Para corrigir esse problema precisamos parar de executar nossa função criada e ela é executada a partir de um ouvinte. A remoção do ouvinte é mostrada no acréscimo da instrução removeEventListener mostrada no código a seguir. A chamada da função removeEventListener depende da passagem dos mesmos parâmetros informados no momento de adição do ouvinte.
A partir dos códigos vistos até o momento conseguimos adicionar elementos gráficos na tela, remove-los quando necessário, fazer com que os gráficos se movam na tela e, no item a seguir também faremos com que seja executado algum som trazendo um retorno auditivo. Esses são os princípios elementares para o desenvolvimento, embora não se tem um jogo se ele não aceitar interação do usuário.
Para praticar: faça com que quando a bola chega na parte inferior da cena, ela comece a subir sumindo apenas na parte superior da tela. |
Próximo passo: adicionar som