Como criar um módulo lunar em seu jogo html5

Este é um dos tipos de jogos mais antigos. A idéia básica é replicar pouso em um planeta para o seu jogo HTML5 sem uma atmosfera. Os astronautas da Apollo tinha uma quantidade limitada de combustível para retardar uma nave espacial que se move rapidamente e trazê-lo para a superfície em segurança. Este jogo é uma variação desse tema.

Video: Como fazer um jogo como javascript e HMLT

A essência de um jogo lunar-lander é a interação entre pressão e gravidade. O jogo depende muito do addVector () método. Gravidade dá um pequeno impulso para baixo cada quadro, que pode ser combatido por impulso das teclas de seta.

O jogo apresenta quatro imagens diferentes Länder (para fornecer feedback que o usuário está aplicando pressão), que são simplesmente trocados com o setImage () método, conforme necessário.

colisões de jogo

A parte mais interessante deste jogo é a rotina de pouso. A rotina de colisão comum não é específico o suficiente para lidar com este tipo de colisão, como o desembarque será considerado um pouso seguro somente se uma série de condições. A maneira mais limpa para verificar se há várias condições está em um profundamente aninhados E se estrutura, como a seguir:

 tLander.checkLanding = função () {if (this.falling) {if (this.y gt; 525) {if (this.x lt; platform.x + 10) {if (this.x gt; platform.x - 10) {if (this.dx lt; 0,2) {if (this.dx gt; -.2) {if (this.dy lt; 2) {this.setSpeed ​​(0) -this.falling = false-mensagem = "Agradável Landing!"-} else {message = "demasiada velocidade vertical"-} // end if} else {message = "muito rápido para a esquerda"-} // end if} else {message = "muito rápido para a direita"-} // fim do if} // fim do `x muito grande` if} // fim do `X muito pequeno` if} // fim `y não é grande o suficiente` if} // fim do `estamos caindo? if} // fim checkLanding

Quando você está verificando para várias condições ao mesmo tempo, é melhor criar um separado E se declaração para cada um. coloque cada E se declaração dentro do seguinte para a parte, mais profundamente aninhada do código representa sucesso.

1. Determine se você está caindo.

   A variável booleana chamada queda foi criado que descreve se a sonda está caindo ou desembarcadas. E se queda É verdade, a força da gravidade é desligado. Ela só faz sentido para verificar se há um estado de destino se você está caindo atualmente.

2. Verifique o valor Y.

   Como a plataforma é colocado em um valor Y de 550, a sonda irá aparecer a desembarcar quando seu valor Y é maior do que 525. Você está realmente apenas preocupado com a parte inferior da sonda tocar o topo da plataforma. Note-se que esta verificação acontece dentro do queda Verifica. Se qualquer condição de falha, não é necessário verificar os outros.

3. Verifique o valor de X.

   Video: GDevApp - Aprenda a Criar Games HTML5 (Introdução)

   Você vai querer o centro da sonda para estar dentro de dez pixels do centro da plataforma, então use um par de nested E se declarações de verificar os locais X.

4. Verifique a velocidade horizontal.

   
   
   
   

   Para uma aterrissagem segura, a embarcação deve ter uma dx valor entre -0,2 e 0,2. (Este é um tanto arbitrária, mas em testes, ele se sente sobre a direita.) Esta é mais marcada com um par de nested E se afirmações.

5. Verifique a velocidade vertical.

   Se tudo está funcionando bem, verifique que a embarcação não está caindo muito rapidamente. Use o dy propriedade para determinar a rapidez com que a nave está caindo.

6. Fornecer feedback com outro cláusulas.

   Video: Jogo Completo em javascript - Batalha Espacial - Pt. 1 - Criando o Cenário e a Nave

   Uma estrutura profundamente aninhada como este mostra o valor real de recuo adequada e comentando. Fornecer feedback nos diversos outro cláusulas para explicar por que o desembarque foi considerado um fracasso.

consoles de texto jogo

Outra parte interessante do código é o mecanismo para exibir dados de texto para o usuário. A maneira mais fácil de fazer isso é através de um HTML simples div. Use CSS para colocar o div exatamente onde você quer que ele seja. Você raramente devem utilizar o posicionamento absoluto no desenvolvimento web normal, faz sentido no contexto de criar um rótulo para um jogo.

Observe que pode ser necessário definir o z-índice propriedade para um valor alto para garantir que ele aparece acima da tela, ou pode não ser visível para o usuário. Aqui está o CSS que faz com que o rótulo parecido com saída na tela:

 #stats {posição: absoluto-família de fonte: espaçamento fixo-esquerda: 50 pixels; topo: 50 pixels; índice z: 999-cor: branco-}

Maneiras de melhorar o seu jogo

Este é apenas um ponto de partida para o jogo. poderiam ser adicionados muitos outros recursos interessantes:

• Combustível: Adicione uma variável de combustível que é decrementado cada vez que o usuário se aplica pressão. impulso vertical deve usar mais combustível do que ajustes horizontais. Se o nível de combustível fica abaixo de zero, ignorar outras entradas de encosto. Esse mecanismo coloca uma complicação realista para o jogo.

• Poderes: Adicionar algumas outras características que o usuário pode ganhar: combustível bônus, menos intensa gravidade, uma plataforma mais ampla.

• Vários desembarques: Talvez mover a almofada de aterragem após um pouso bem-sucedido, ou ter o utilizador transportar um objeto a uma segunda plataforma.

• Obstáculos: Coloque lixo espacial ou edifícios da maneira que irá travar o jogador em contato.

• Alterar o tema: A mesma mecânica pode ser facilmente utilizado para um helicóptero ou jogo balão de ar quente.