Como criar um piloto de 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 porque 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 o controle do usuário da posição X do avião e um mundo infinitamente rolagem.

Video: Como criar jogos digitais #15 - Exportando o jogo - Construct 2

• 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.

  Video: Estrutura básica de um jogo com javascript e HTML - Pt.1 de 3

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

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

  Video: FLAPPY BIRD 'NA UNHA' 04 - LÓGICA DO JOGO pt.01 (HTML5/CSS3/JS)

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

• Gerir as interacçõ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 fundo “sem fim” jogo

Uma característica interessante deste jogo é o fundo infinito 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 fazer o fundo um grande duende.

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 maior no eixo X do que a cena.

3. Duplicar a parte superior e inferior.

   
   
   
   

   A chave para um efeito de rolagem “sem fim” é ter a parte superior e inferior (ou esquerda e 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 () comando), o fundo começa a deixar a cena em um valor Y de 720. Use uma E se declaração para verificar 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 oceano 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 .jpg, 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 () {// perfeita oceano gif repeatsif (this.y gt; 720) {this.setPosition (400, -120)} // final se} // checkBounds finais

Melhorar piloto top-down de seu jogo

Este tipo de jogo é muito popular porque é fácil de 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 são activados (geralmente por tiro ou correr sobre a energização). As opções são quase ilimitadas, mas aqui estão algumas idéias 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 se move apenas no eixo horizontal. Permitindo 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.

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