Como adicionar movimento realista para o seu jogo HTML5

Dê uma olhada space.html

. Este jogo simples, fornece um bom exemplo para a aplicação de movimento realista para o seu jogo HTML5. Ele utiliza o esquema de controle que ficou famosa nos jogos clássicos Asteroids e Spacewar! (Embora Asteroids é mais conhecido, Spacewar! é, de longe, o jogo mais cedo e mais influente).

image0.jpg

Clique Aqui para obter a experiência total.

Como adicionar um vetor de força de objeto do seu jogo

O navio é controlado pelas teclas de seta, mas o efeito de Newton é mais fácil de ver no espaço do que na terra (não há forças de arrasto traquinas para ficar no caminho). A esquerda; e direita; teclas de seta girar o navio, mas eles não afetam o movimento do navio. A seta para cima dispara um foguete, que acrescenta um vetor de força na direção do navio está enfrentando atualmente.

Aqui está o código:

espaço  

Como simular o espaço em seu jogo

Aqui está o resumo:

  1. Comece o exemplo da maneira normal.

    Como a maioria simpleGame demos, começar com um sprite e uma cena. Uma vez que o navio terá um método personalizado, você faz um objeto único.

  2. Dê o navio a checkKeys () Método.

    o checkKeys () método procura teclas pressionadas e muda o comportamento do navio em conformidade.

  3. Mudar o ângulo da imagem.

    Um sprite na verdade tem dois ângulos distintos. Ele pode ter um ângulo que é apontando (o chamado imgAngle dentro simpleGame) Eo ângulo está se movendo (o chamado moveAngle). Quando você muda o ângulo, você está mudando tanto o movimento e os ângulos de imagem no pressuposto de que o objeto simplesmente viajar na direção que ele está enfrentando.

    Para exemplos simples, isto é bom, mas muitos tipos de movimento exigem dissociar os ângulos de imagem e movimento. o changeImgAngleBy () método permite-lhe mudar a direção a imagem está apontando, sem alterar o ângulo de movimento. (Existe um changeMotionAngle () método, também, mas não é usado com muita frequência.)

  4. Adicionar um vetor de força para simular impulso.

    Quando o usuário pressiona a seta para cima, o navio dispara seus principais foguetes. Isso adiciona uma pequena força vetor na direção que o navio está enfrentando atualmente. Use o getImgAngle () método para determinar a direção que o navio está a enfrentar, e usar esse valor para especificar onde a força deve ser adicionado.

    Como esse código está acontecendo no loop de animação e é amplificado como a chave de seta é pressionado, é necessária apenas uma força muito pequena.

menu