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 reduzir a velocidade de uma nave espacial que se move rapidamente e trazê-lo para a superfície em segurança. Este jogo é uma variação desse tema.

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

O jogo apresenta quatro imagens diferentes Länder (para fornecer feedback que o utilizador está a aplicar empuxo), 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 uma aterragem segura apenas se um certo número de condições são verdadeiras. A maneira mais limpa para verificar se há várias condições está em um profundamente aninhados E se estrutura, como o seguinte:

 tLander.checkLanding = function () {if (this.falling) {if (this.y> 525) {if (this.x lt; platform.x + 10) {if (this.x> platform.x - 10) {if (this.dx lt; .2) {If (this.dx> -.2) {if (this.dy lt; 2) {this.setSpeed ​​(0) -this.falling = false-message = "Nice Landing!" -} Else {message = "velocidade vertical demais" -} // fim do if} else {message = "rápido demais para esquerda "-} // fim do if} else {message =" rápido demais para a direita "-} // end 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 caindo foi criado que descreve se a sonda está caindo ou o desembarque. E se caindo É verdade, a força da gravidade está desligado. Ela só faz sentido para verificar se há um estado de destino, se você está caindo no momento.

2. Verifique o valor de Y.

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

3. Verifique o valor de X.

   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 aterragem 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.) Este é o melhor verificado com um par de nested E se declarações.

5. Verifique a velocidade vertical.

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

6. Fornecer feedback com outro cláusulas.

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

consoles de texto jogo

Outro aspecto interessante de o código é o mecanismo para a exibição de dados de texto para o utilizador. 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 deve usar o posicionamento absoluto no desenvolvimento web normal, faz sentido no contexto de criação de um rótulo para um jogo.

Observe que pode ser necessário definir a z-index 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 {position: absolute-font-family: monospace-left: 50px; top: 50px; z-index: 999-color: branco-}

Maneiras de melhorar o seu jogo

Este é apenas um ponto de partida para o jogo. pode ser adicionado muitas outras características interessantes:

• Combustível: Adicionar uma variável de combustível que é decrementado cada vez que o utilizador 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 impulso. 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 plataforma de pouso depois de um pouso bem-sucedido, ou que o usuário carregar um objeto a uma segunda plataforma.

• Obstáculos: Coloque lixo espacial ou edifícios na maneira que irá falhar 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.