Como saltar e correr em plataformas em seu jogo HTML5

O "salto e correr" plataforma de gênero tem sido um gênero de arcada grampo por um bom motivo. Ele fornece uma experiência interativa agradável para o seu jogo HTML5 e é relativamente fácil de modificar para muitos tipos diferentes de jogos.

O elemento essencial de um jogo de plataforma é - bem - plataformas. A ação acontece geralmente com uma vista lateral e um personagem que responda à gravidade. Normalmente, o jogador vai saltar em torno de plataformas e lutar contra os inimigos por tiro, saltar, ou combate corpo a corpo.

Meu protótipo mostra as características essenciais. Ele inclui um personagem que pode saltar e pousar em plataformas. plataformas arrastáveis ​​são incluídos para que você possa editar a cena e ver como o personagem interage com diversas configurações de plataforma.

image0.jpg

códigos de salto e de jogo da terra

A chave para um jogo side-scrolling é o salto e aterrissagem mecânico. Use um caindo propriedade para controlar se o personagem deve responder a gravidade ou não. Aqui está o código do checkKeys () método que lê a seta para cima e faz o personagem pular.

 if (keysDown [K_UP]) {if (this.falling == false) {this.setImage ( "characterUp.png") - this.y - = 5-this.falling = true-this.addVector (0, 15) -} // end if} else {checkFalling () -} // end if

o checkFalling () função verifica cada um dos blocos. Se o personagem não está tocando qualquer um dos blocos, definir caindo para verdade. Isso fará com que a queda de caráter, uma vez que se move fora de um bloco.

Como entrar para uma aterragem

A interação entre o personagem e os blocos é importante porque você quer o personagem parar de se mover antes ela atinge um bloco. Isto requer uma técnica chamada detecção de colisão preditivo, que soa muito mais complicado do que é. Aqui está o mecanismo:

  1. Mova o elemento como normal.

    Fazer os cálculos para mover o objecto (neste caso o personagem) como normal. Note-se que o caracter não é ainda desenhada, mas novos valores x e y foram determinados através da adição de dx e dy.

  2. Verifique se há uma colisão.

    Verificar para ver se o personagem colidiu com nada (neste caso, cada um dos blocos da matriz de blocos).

  3. Se ocorrer uma colisão, o backup do personagem.

    Você está verificando se há uma colisão, mas você não quer que o personagem para coincidir com o bloco. Em vez disso, você está interessado em saber se o vetor de movimento atual poderia causar uma colisão.

  4. Subtrair dx a partir de x, dy a partir de y.

    Uma colisão foi detectado, de modo que a tira de colisão subtraindo o vector de movimento. Isso resulta no ser sprite onde começou antes da colisão foi detectada.

  5. Defina a velocidade do sprite para zero.

    Defina a velocidade do sprite para zero para o próximo quadro não causa o sprite a colidir com o bloco novamente.

A maneira mais fácil de obter o comportamento preditivo é adicionar um cópia de segurança() método para o duende objeto, que pode ser chamado em qualquer tipo de colisão:

 tCharacter.backup = function () {// Estou sobreposição de algo que não deveria dividir espaço com // volta para onde estava antes da colisão foi detectedX = this.x - this.dx-Y = this.y - this.dy-this.setPosition (X, Y) -} // fim de backup

Como fazer blocos arrastáveis

Este jogo apresenta uma outra característica muito interessante: Cada bloco pode ser arrastado para uma nova posição para que você pode experimentar com outras colocações de blocos. Fazer qualquer Sprite draggable é relativamente fácil. Basta verificar para ver se o bloco atualmente está sendo clicado. Se assim for, definir a sua posição igual à posição do mouse:

 tBlock.checkDrag = function () {// permitem o bloco a ser draggableif (this.isClicked ()) {this.setPosition (scene.getMouseX (), scene.getMouseY ()) -} // fim do if} // fim checkDrag

Como melhorar o jogo de plataforma

O jogo de plataforma está aberta a muitos tipos de melhorias:

  • Use vários níveis. Os blocos de padrão são fáceis de construir e funcionar com, mas eles não são muito interessantes. Experiência com formas de blocos diferentes e posições para construir níveis interessantes. Você pode armazenar as posições de bloco em matrizes para fazer novos níveis, e simplesmente reutilizar os blocos.

  • Considere uma abordagem baseada na telha. O exemplo a plataforma utiliza um esquema de colocação de bloco arbitrário, mas você também pode usar uma abordagem baseada em azulejo.

  • Adicionar metas e inimigos. Uma melhoria óbvia para este jogo seria incluir algum objetivo de alcançar com algum obstáculo no caminho. Pense em como você pode implementar personagens inimigos. Será que eles se movem? Será que eles vão filmar? Considere também adicionando upgrades para melhorar a velocidade de salto, adicione uma arma de longo alcance, ou qualquer outra coisa que você pode imaginar.

  • Adicionar mais poder de fogo. Adicionar uma arma para o personagem que ele possa atirar. Em scrollers lado, a arma normalmente dispara horizontalmente, mas você pode jogar em torno de obter o comportamento desejado.

  • Melhorar a física. A dinâmica deste jogo funcionar muito bem, mas você pode melhorá-los com um pouco mais ajustes. Siga as linhas gerais do programa existente, mas veja se você pode fazê-lo funcionar exatamente como o que você quer.

Semelhante

menu