Como criar pong em 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 o remo jogo

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

 tPaddle.followMouse = função () {// segue rato para o jogador controlthis.setImgAngle (90) -this.setPosition (this.x, scene.getMouseY ()) -} // método followMouse extremidade

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 Y da pá igual ao valor de Y da bola. No entanto, este vai ser chato, porque o adversário nunca vai perder, e será sempre acertar a bola em cheio no meio da parede, tornando mais fácil para voltar. Este não é nenhum divertimento a todos. 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 percentagem. E se CÉREBROS está definida para 0,5, a pá 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 principal é V_SPEED, ou a velocidade vertical da pá. Isso indica o quão rápido a pá se moverá em direção à bola. Um valor mais alto irá 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; BRAINS) {if (this.y gt; ball.y) {this.setMoveAngle (0) -} else {this.setMoveAngle (180) -} // ifthis.setSpeed ​​final (V_SPEED) -} // fim do if} // fim autoMove

Construir 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, ele envolve.

Video: Criar jogo para celular e pc em javascript e html5 - #2 Game loop

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 pelo sprite do atualizar() método. Sua versão personalizada checkBounds simplesmente substitui a versão built-in. Aqui está uma variante:

 tBall.checkBounds = function () {// substituir checkbounds funcionar para dar // comportamento personalizado // saltar fora do topo e bottomif (this.y lt; 0) {this.setDY (this.dy * -1) -} se (this.y gt; scene.height) {this.setDY (this.dy * -1) -} // embrulhar fora de sidesif (this.x lt; 0) {this.setPosition (scene.width - 150, this.y) - // pontuação computador} // fim do IFIF (this.x gt; 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

Em 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 = função (pá) {// responde a uma colisão com a pá dada // Max e min = Dymax 10Se (this.collidesWith (pá)) {this.setDX (this.dx * -1) dy = this.y - paddle.y-dy = ((dy / paddle.height) * 2) * dy = MAX-this.setDY (dy) -} // final se} // checkBounce extremidade

o dx valor é fácil de calcular, porque você simplesmente inverter dx a mover-se na outra direcção. o dy valor é calculado pela determinação da diferença entre a bola de y posição e que da pá:

1. Determine um máximo dy.

   Este valor determina o nível mais alto de desvio você 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 o y valor da raquete e a bola está.

4. Normalizar este valor.

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

5. Multiplicar o normalizado dy de MAX.

   Video: Como criar um jogo em javascript e html 5 (Parte 4)

   Multiplicando o normalizado dy valor pelo 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 a adição de 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 fim do jogo.

  Video: Desenvolvendo o PONG no Scratch - Parte 1/2

• 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. Ele fica muito nervoso quando a bola está viajando em uma trajetória plana. Veja se você pode descobrir uma maneira de suavizar esse comportamento.