Códigos do jogo - Mini jogo HemociAtaque

O jogo HemociAttack criado no estilo Angry birds, foi desenvolvido utilizando uma nova framework de javascript criada em 2013.Ela possui um sistema de física baseado no box2d e um editor visual online.

Informações: http://clockworkchilli.com/wade_info.html

Documentação da API: http://clockworkchilli.com/docs

Licença: http://clockworkchilli.com/eula.html

Tutoriais: http://clockworkchilli.com/tutorials

O editor:

A plataforma pode gerar a exportação para inúmeros formatos, ela possui um arquivo .wsc(Windows Script Components) que guarda os atributos dos elementos posicionados no editor, propriedades, funções, ids,etc.

Todas as informações da cena, estão presentes nesse arquivo que se assemelha a um JSON.

O projeto apresenta um arquivo app.js, que é o código principal do jogo, e um behavior (GordurinhasBehavior.js) para todas as paredes de gordura.Todos as outras funções posicionadas dentro dos elementos do editor, compõem o arquivo .wsc.

Exemplo de função(onCollision) contida apenas no arquivo wsc:

Enfim,vamos ao código principal do jogo:

App, é todo o nosso aplicativo, que tem um método init() que é nossa função inicializadora. Logo no começo do programa carrego parte dos áudios necessários. Outros, são carregados dentro da função interna de objetos específicos usado this.onAddToScene.
(Exemplo de carregamento de áudio utilizado dentro das barras de gordura)

Logo após, defino o método de escalonamento da janela do programa e um atributo booleano que controla se o usuário já clicou play para poder começar o jogo.

Nota:Todas as variáveis são declaradas como atributos para depois poderem ser acessadas de qualquer objeto do programa como “wade.app.atributoQualquer”.

Após isso, tenho mais três variáveis booleanas responsáveis por acompanhar se os inimigos já foram destruídos.

Logo após, defino o score que é mostrado na tela e todas suas propriedades visuais.

Mais abaixo, defino o número de balas(linfócitos) disponíveis para o ataque.

Agora irei interromper a sequência normal do código para privilegiar uma série lógica, deixando para explicar apenas no final, o funcionamento das funções de GameOver e RemoveBalas, pulando para a função de load.

Agora vamos ao evento de load!

Caso a minha cena tenha sido carregada temos a inicialização das funções matemáticas responsáveis pelo andamento do jogo. Todavia, é necessário o uso de algumas condicionais, entre elas a verificação de que o usuário clicou no botão ‘Play’, se a condicional GAMEOVER é falsa, e se o jogo não foi reiniciado, ou seja, a cena foi limpa(função wade.clearScene()) e meus objetos não existem, resultando ‘null’ e gerando erros de console ao tentar acessá-los.

Já a outra condicional, abarca o cenário onde o usuário já destruiu todos os inimigos, e, por isso, devemos chamar a função de gameOver que será explicada posteriormente.

Agora, vamos a função matemática que é disparada no evento da movimentação do mouse:

Primeiro, precisamos de uma referência ao canhão, por isso utilizamos a função da biblioteca para armazená-lo na variável cannon.

Após, precisamos obter a distância entre o cursor do mouse e o canhão. Para isso realizamos uma subtração vetorial que irá nos conferir o resultado almejado.

A WADE possui diversas funções vetoriais que podem ser acessadas através do wade.vec2 que fornecem ao desenvolvedor várias formas de se trabalhar com vetores 2d.

Depois, calculamos o ângulo através da função Math.atan2 que retorna o arco tangente do quociente dos argumentos (x,y) fornecidos.

Desta forma, posso aplicar ao canhão a rotação correspondente.

Logo em seguida temos a função onMouseDown e onMouseUp:

A função onMouseDown vai ser apenas o gatilho da animação do hemocinho.
Já na função de onMouseUp temos:
Com wade.stopAudio(); Eu interrompo o áudio da minha powerBar, depois, caso o número de balas restantes seja maior do que zero, eu chamo a minha função responsável por remover as balas.
Caso seja igual a zero, significa que o usuário não conseguiu matar todos os monstros, por isso, aplico alguns efeitos de textura e chamo a função de gameOver.
Agora, à criação das balas e criação da trajetória:
Aqui, pegamos a rotação e posição, criamos o novo vetor com 25 pixels a mais, para que a bala seja criada exatamente no final do cano do canhão, e fazemos a soma do vetor pos, com a posição do canhão e criamos o vetor trajetória.
 Depois, é clonada o objeto ball, que é a bala. Ela se encontra presente na cena, mas invisível e fora da área de observação. Assim, a posiciono e com a função wade.vec2.ScaleInPlace aplico a velocidade à bala.
Todavia, antes de definir as velocidades à bola, se faz necessário o uso da Timeout function por conta de que se aplicarmos a velocidade à bola instantaneamente, isso irá sobrescrever a física, não conferindo o correto tempo para que esta seja inicializada. Ou seja, a bala não será afetada pela gravidade, e nem todos os outros atributos físicos que ela possui.
Um detalhe é que a bala será multiplicada pelo valor da barra de força que possui o seguinte código bem simples que aumenta até o valor máximo de 1:

Depois com outra função de Timeout a bala vai ser removida da cena:

E dentro da função interna da bala (onCollision), detecto se ela atingiu algum dos inimigos e realizo a troca para a animação de explosão e ativo o booleano respectivo.
Agora, temos a função de GameOver e de removeBalas.

A função remove balas vai receber como parâmetro o número de balas restantes, irá concatenar em uma string que irá resultar no label das balas que estão na tela, assim, ela vai remover a bala correta da pilha que se encontra ao lado do hemocinho.

E, por último o behavior da remoção das barras de gordura:
No behavior, como descrito anteriormente, é carregado o som de remoção das barrinhas, depois no evento de colisão é checado se ela colidiu com uma das balas, caso tenha sido, é incrementado uma variável de dano. Caso a variável atinja o valor máximo, transformo a barrinha em um sensor, fazendo ela cair através dos objetos, realizo um fade out, e, no final deste, removo a respectiva barra da cena.