Como criar um piloto do correio em seu jogo HTML5

Este é um tipo de um jogo de piloto de rolagem que você pode usar em seu HTML5. Este tipo de jogo tem sido um grampo do universo de jogos de vídeo, pois pode haver tantas variações interessantes.

Neste iteração particular, você é um piloto que voa um avião sobre um arquipélago. Seu trabalho é sobrevoar as ilhas e evitar as nuvens. O jogo apresenta controle de usuário da posição X do avião e um mundo infinitamente rolagem.

• Identificar as variáveis-chave: Neste jogo, as principais variáveis ​​são o avião, as ilhas, e as nuvens. Todos são implementadas objetos Sprite.

• Criar cada objeto em isolamento: Identificar o que cada objeto deve fazer e implementar essas características básicas.

• Construir uma única element- em seguida, convertê-lo em uma matriz: o nuvens objeto é realmente uma matriz. É muito comum ter matrizes de objetos. A chave é construir um único primeiro elemento que faz o que você quer e, em seguida, converter esse objeto para uma matriz.

  Normalmente, quando você fizer isso, você vai construir duas funções personalizadas. A primeira função cria a matriz e utiliza um para loop para inicializar cada objeto na matriz. A segunda função também tem um para loop que percorre cada objeto, invocando qualquer das suas funções de eventos e atualizar cada objeto na tela.

• Gerenciar as interações: A maioria das coisas interessantes que acontecem em um jogo de arcade ocorrer quando objetos colidem, então rotinas de colisão são uma parte importante do desenvolvimento do jogo.

Como construir um plano de fundo "sem fim" jogo

Uma característica interessante deste jogo é o fundo infinito de azulejos. O avatar do usuário não se move para a frente em tudo. Em vez disso, a ilusão de movimento vem de ter um fundo que se move para baixo perpetuamente, fazendo parecer que o avião está se movendo para cima.

Naturalmente, é impossível criar um fundo verdadeiramente infinitas, mas você pode fazer um par de truques para produzir uma ilusão crível:

1. Construir um sprite para o fundo.

   A maneira mais fácil de obter o comportamento fundo em movimento é simplesmente tornar o fundo muito grande Sprite.

2. Criar uma imagem maior do que a cena.

   Como este gráfico específico destina-se a telha vertical, foi feita a largura da cena (800px), mas muito mais alto do que a cena (1440px de altura para uma cena de altura 600px). Tamanhos maiores levar a repetição menos óbvio, mas será mais intensivo de recursos. Se você quiser a rolagem horizontal, faça a sua imagem ampliada no eixo X do que a cena.

3. Duplicar a parte superior e inferior.

   A chave para um efeito de rolagem "sem fim" é a de ter a parte superior e inferior (ou para a esquerda e para a direita de uma imagem horizontal) idênticos uns aos outros. Use a cópia e colar ferramenta do seu pacote de gráficos com o Clone e ferramentas Smudge para obter este efeito.

4. substituir o checkBounds função.

   O sprite fundo terá comportamento personalizado limite, então substituir o sprite do checkBounds método.

5. Verifique para garantir que o fundo nunca sai da tela.

   No exemplo Correio Piloto, o sprite começa muito acima da cena e se move para baixo. Com alguns testes (eo console.log () de comando), o fundo começa a deixar a cena em um valor Y de 720. Use uma E se declaração para verificar se quando isso acontece.

6. Mova o fundo de modo a secção idêntica está mostrando.

   A parte superior e inferior do oceano gif são os mesmos, por isso, quando o mar está prestes a deixar o local, o usuário está vendo o topo da grande oceano gif. Altere o valor Y para que o usuário está vendo agora o fundo idêntica do mesmo .GIF, e mantê-lo em movimento. Você pode precisar usar console.log () e alguns testes para fazê-lo funcionar como você quer.

Aqui está o código para o checkBounds () método para que você possa vê-lo em ação. Note que você vai ter que alterar os valores específicos para coincidir com o tamanho da imagem.

 tOcean.checkBounds = function () {// repeatsif seamless oceano gif (this.y> 720) {this.setPosition (400, -120)} // fim do if} // checkBounds finais

Melhorar piloto top-down de seu jogo

Este tipo de jogo é muito popular porque é fácil escrever e pode ser modificado em um número de maneiras simples para obter muitos tipos diferentes de jogos. Aqui estão algumas sugestões:

• Adicionar um mecanismo de pontuação. A melhoria mais óbvia é a de adicionar algum tipo de sistema de pontuação. Prêmio aponta para tocar as ilhas e tirar a vida para tocar as nuvens.

• Construir o nível de dificuldade. Considere a adição de mais nuvens, mudando o tamanho dos diferentes elementos, ou alterando a velocidade.

• Adicionar powerups. Powerups são sprites simples que fornecem algum tipo de benefício ou desvantagem quando eles estão ativados (geralmente por tiro ou em execução através da energização). As opções são quase ilimitadas, mas aqui estão algumas ideias iniciais: temporariamente permitir o movimento vertical, bem como horizontal, alterar a velocidade, e fazer o avião maior ou menor.

• Alterar o movimento. Neste momento, o avião move-se apenas sobre o eixo horizontal. Permitindo o movimento no eixo vertical bem vai mudar drasticamente a jogabilidade.

• Adicionar armas. Adicionar marcadores para uma reviravolta interessante. Se você quer um monte de balas, você vai precisar para criar uma matriz.

• Alterne para a rolagem horizontal. Você pode alternar para a rolagem horizontal com bastante facilidade. Você também pode permitir a rolagem em ambos os eixos, mas você tem que realmente pensar sobre os aspectos limite de verificação.