Como criar Pong no seu jogo HTML5

Nenhum desenvolvimento discussão jogo HTML5 seria completa sem uma menção ao famoso jogo Pong. Enquanto isso não era tecnicamente o primeiro jogo, foi o primeiro a atrair a atenção popular, e é de longe um dos jogos mais influentes de todos os tempos.

Construir a pá jogo

O objeto pá é bastante simples, mas na verdade existem duas pás com diferentes comportamentos. Nesta versão do jogo, o remo esquerdo é controlado pelo jogador, e a pá direito é controlado por um computador AI. Um objeto pá única pode servir tanto como um jogador ou um remo AI. O jogador da pá apenas segue o mouse:

 tPaddle.followMouse = function () {// segue mouse para o jogador controlthis.setImgAngle (90) -this.setPosition (this.x, scene.getMouseY ()) -} // método followMouse final

Adicionar estupidez artificial para o seu jogo

É realmente muito fácil de construir uma Inteligência Artificial (AI) para o adversário. Basta definir o valor de Y da pá igual ao valor de Y da bola. No entanto, isso vai ser chato, porque o adversário nunca vai perder, e sempre vai bater a bola bem no meio da raquete, tornando mais fácil para voltar. Esta não é divertido em tudo. Dê a pá AI algum tipo de problemas de atenção.

A AI não deve seguir diretamente a bola. Em vez disso, ele deve verificar para ver se a bola está acima ou abaixo dela, e responder adequadamente.

Duas variáveis ​​foram adicionadas para controlar o movimento da pá AI. o CÉREBROS constante é uma porcentagem. E se CÉREBROS está definido para 0,5, o remo irá verificar para localização bola apenas metade do tempo. Para um jogo mais fácil, definir o CÉREBROS valor baixo.

O outro valor primário é V_SPEED, ou a velocidade vertical da raquete. Isso indica o quão rapidamente a pá se moverá em direção à bola. Um valor mais alto vai criar uma mais potente jogador AI. Encontrar a combinação certa destes dois valores para obter o comportamento AI quiser. Aqui está o código para o autoMove () método:

 tPaddle.autoMove = function () {// automaticamente movesthis.setImgAngle (90) - // não se movem em cada turnif (Math.random () lt; CÉREBROS) {if (this.y> ball.y) {this.setMoveAngle (0) -} else {this.setMoveAngle (180) -} // ifthis.setSpeed ​​final (V_SPEED) -} // fim do if} // acabar autoMove

Criar uma bola a saltar fora das fronteiras

Enquanto a bola é um sprite aparentemente simplista, ele tem um comportamento interessante. A bola tem um esquema de verificação de limite único. Ele salta para fora a parte superior e inferior da tela, mas se ele deixa os lados, ela envolve.

Se você não tem um esquema de limite que se encaixa um dos padrões normais, você pode simplesmente substituir o checkBounds () método para fazer o que quiser. (Note que você não precisa chamar explicitamente checkBounds (). Ele é automaticamente chamado por o sprite do atualizar() método. Sua versão personalizada do checkBounds simplesmente substitui a versão built-in. Aqui está uma variante:

 tBall.checkBounds = function () {// substituir checkbounds funcionar para dar // comportamento personalizado // saltar fora da parte superior e bottomif (this.y lt; 0) {this.setDY (this.dy * -1) -} if (this.y> scene.height) {this.setDY (this.dy * -1) -} // enrole fora de sidesif (this.x lt; 0) {this.setPosition (scene.width - 150, this.y) - // pontuações computador} // fim do IFIF (this.x> scene.width) {this.setPosition (150, this.y) - // jogador marca} // fim do if} // checkBounds finais

Se a bola bater na parte superior ou inferior da tela, invertido dy para fazê-lo saltar. Se ele acerta a esquerda ou direita da tela, mova-o para o outro lado.

Ponha um pouco de giro sobre a bola do jogo

Nas versões tradicionais de Pong, a bola pode ser controlado por escolher onde no remo para bater na bola. Se você acertar a bola perto do topo da parede, a bola vai se mover para cima. Se você acertar a bola perto do centro da raquete, ele vai voar em toda a tela na horizontal, e se você bater perto do fundo, a bola vai se mover para baixo.

 tBall.checkBounce = function (remo) {// responde a uma colisão com o remo dada // Max e min DYMAX = 10Se (this.collidesWith (remo)) {this.setDX (this.dx * -1) dy = this.y - paddle.y-dy = ((dy / paddle.height) * 2) -dy * = MAX-this.setDY (dy) -} // fim do if} // checkBounce final

o dx valor é fácil de calcular, porque você simplesmente inverter dx para mover em outra direção. o dy valor é calculado pela determinação da diferença entre a bola de y posição ea do remo:

1. Determinar um máximo dy.

   Este valor determina o nível mais alto de desvio você vai permitir. Se o MAX valor é definido como 10, a bola de dy valor será -10 na parte superior da pá, 0, no meio, e 10 na parte inferior da pá.

2. Invertido dx.

   Se a bola está movendo para a esquerda, multiplique o dx valor por -1 para torná-lo ir para a direita. Se ele está indo para a direita, a mesma operação (multiplicando por -1) irá torná-lo ir para a esquerda. Qualquer colisão pá inverte a bola de dx.

3. Encontrar a diferença cru em y valores.

   Calcule a distância entre as y valor da raquete e a bola está.

4. Normalizar este valor.

   Se você dividir a matéria dy valor pela altura da pá, você vai ter um intervalo entre -.5 e .5. Multiplique esse valor por 2 para obter um -1 a 1 gama.

5. Multiplique o normalizado dy de MAX.

   Multiplicando o normalizado dy valor pela MAX valor dará um dy valor entre -MAX e MAX.

Como melhorar o jogo Pong

Enquanto este jogo Pong tem o comportamento básico para baixo, está longe de pronto para o jogo real. Aqui estão algumas coisas a considerar acrescentando:

• Adicione apelo estético. Você pode fazer muita coisa para torná-la melhor, de personalizar os remos para adicionar animações de bola e efeitos sonoros.

• Adicionar scorekeeping. Adicionar a capacidade de acompanhar os resultados de usuário e computador. Também adicionar alguma maneira para determinar o final do jogo.

• Adicionar powerups. Alterar o tamanho de cada pá, inverter o controle do jogador pá, mudar a velocidade da bola, fazer a bola ocasionalmente invisível, ou inverter o algoritmo de colisão bola-pá para começar.

• Sintonize-se o AI. Fica bastante nervosa quando a bola está viajando em uma trajetória plana. Veja se você pode descobrir uma maneira de suavizar esse comportamento.