Como adicionar a gravidade para o seu jogo html5
Video: Criar jogo para celular e pc em javascript e html5 - #3 Fator de escala
Conteúdo
cálculos de gravidade têm sido uma parte dos jogos de vídeo HTML5 desde o início. Na verdade, existem dois tipos de gravidade a considerar. Em jogos de estilo plataforma, o jogador está perto de um planeta, e toda a gravidade parece puxar tudo para baixo.
Quando você sabe como adicionar vetores de aceleração, a gravidade de estilo plataforma é realmente fácil trabalhar com. Pense da gravidade como uma força constante sempre puxando para baixo uma pequena quantidade cada frame.
Como adicionar foguetes para passeio de seu jogo
Este exemplo tem uma outra característica interessante. Quando você pressiona a seta para cima, a imagem do carro é alterado para outra imagem com chamas.
O código para o hovercar exemplo é mostrado aqui na sua totalidade:
hoverCar.html
Como usar o vetor de força no seu jogo
A gravidade é realmente bastante simples. É simplesmente um vetor de força. As outras partes interessantes deste exemplo, envolver alterando o movimento horizontal sem alterar o ângulo de imagem do carro e ajustar a imagem para indicar o propulsor. Aqui estão os passos:
Construir duas imagens diferentes.
Video: Tutorial - Criar um jogo com javascript html 5 - parte 3
Use o seu editor de imagens para construir duas versões diferentes da imagem.
Construir um duende comum.
Como a maioria dos sprites do veículo, é necessário um checkKeys () método. Este é configurado na forma ordinária, mas o comportamento é um pouco diferente.
Definir a imagem como padrão.
A imagem padrão não tem propulsores. Use o ChangeImage () método para fazer isso a imagem padrão. Quando os propulsores estão ligados, a imagem será alterado.
Utilizar uma variável para controlar a velocidade horizontal.
Você pode criar o hspeed variável para gerenciar a velocidade horizontal do carro.
Defina as setas esquerda e direita para modificar hspeed.
As teclas de seta esquerda e direita modificar o hspeed variável.
Usar changeXby para definir a velocidade horizontal.
Depois de verificar todas as chaves, altere o X valor do carro para o valor atual de hspeed.
A seta para cima adiciona um vector para cima.
Use o agora infame addVector () função para adicionar uma pequena força vetor para cima quando o usuário pressiona a seta para cima. Lembre-se que 0 graus é para cima. Brincar com esse valor para obter a quantidade de pressão que você quer para o seu jogo.
Mostrar os propulsores quando a seta se for pressionado.
Se o usuário está pressionando a seta para cima, você precisa mostrar os propulsores. Use o ChangeImage () método para definir a imagem do sprite para aquele com propulsores de foguetes.
Construir um checkGravity () método.
Este método irá ser chamado de cada quadro para compensar gravidade.
Verifique se você está no chão.
Neste exemplo, o chão é definido como um y valor maior que 580.
Se você não estiver no chão, adicionar um vetor de força da gravidade.
Porque ele vai acumular, o vetor força da gravidade precisa ser muito pequena. Você vai precisar para equilibrar a força da gravidade e os propulsores para obter o comportamento desejado. Se a gravidade é muito forte, os propulsores não vai funcionar. Se propulsores são muito fortes, o carro simplesmente voa para o espaço.