Como adicionar efeitos de arrastar para o seu jogo html5

O princípio disso vector pode ser útil para o seu jogo HTML5 de muitas maneiras. Por um lado, ele pode adicionar efeitos de arrasto e, assim, levar a um comportamento mais preciso-terra veículo. Imagine o seu carro está preso em um bairro ruim no meio da noite (novamente). Você não pode simplesmente mudar a posição do carro diretamente. Você não pode mesmo mudar seu movimento.

O que você tem a fazer é em vez adicionar uma força. Quando você adiciona força, você adicionar lentamente ao vetor de movimento. Eventualmente, o carro começa a se mover. Se você parar de aplicar força, ele eventualmente vai parar como resistência ao vento e resistência ao rolamento desacelerar o carro para baixo.

corridas jogos de arrasto

o drag.html exemplo mostra um carro realista que acelera lentamente e retarda a uma parada como o acelerador (neste caso, a seta para cima) é liberado.

Você realmente precisa ver o programa em ação para apreciar o seu comportamento.

Video: Criando Efeito Carrossel de Imagens com jQuery - UpInside Treinamentos

Como implementar arrastar em seu jogo

Esta versão utiliza um movimento baseado em vigor mais realista. Quando o usuário pressiona a seta para cima, o carro se acumula velocidade. Se o usuário deixa a seta para cima pressionado, o carro atinge uma velocidade máxima naturalmente. Quando o usuário libera a seta para cima, o carro gradualmente desacelera e eventualmente pára. vetores de força são a chave.

Veja como funciona:

1. Construir um veículo básico.

   Criar um sprite personalizado com um checkKeys () método, e verifique se todas as teclas de seta normais. O código para verificar setas esquerda e direita é exatamente o que você espera.

2. 
   
   
   

   Mover para a frente com um vector de força.

   O código para avançar é ligeiramente diferente. Ao invés de simplesmente modificar a velocidade diretamente, aplique uma força na direção atual do carro. Use o sprite do getImgAngle () método para determinar a direção que o carro está apontando, e adicionar uma pequena força nessa direção.

3. Crie um checkDrag () método.

   Carros não só vai manter sem energia elétrica. Vento e resistência de terra vai atrasá-los e, eventualmente, eles vão parar. Simular as várias forças de arrasto, adicionando uma checkDrag () método para o seu objeto.

4. Multiplique a velocidade por um fator de arrasto.

   Para este exemplo, as várias forças de arrasto vai roubar o carro de 5 por cento da sua velocidade de cada frame. Lembre-se que o jogo está rodando a 20 quadros por segundo, então a força de arrasto é bastante substancial. Você pode conseguir o efeito de arrasto de muitas maneiras, mas a maneira mais fácil é multiplicar a velocidade do carro por algum valor menor do que 1.

5. Sem freios!

   O que se preze arcada carro tem freios? Sério, você pode querer adicionar uma entrada de seta para baixo, mas não deve ser necessário porque o carro vai abrandar por conta própria.

6. Tempere a gosto.

   Video: Como criar efeitos e animações com CSS e Jquery (parte 02) - WOW.js | CSS #03

   Este exemplo fornece um esboço, mas você pode modificar uma série de valores para obter exatamente o desempenho carro que você quer. Você pode simular um motor mais potente (ou uma massa menor), aumentando o vetor de força quando você pressiona o acelerador.

   Você pode simular uma suspensão mais responsivo alterando a taxa de virar se o usuário pressiona as setas para a direita ou para a esquerda. Você também pode simular um carro mais ou menos eficiente, modificando a relação de arrasto. Agora, o carro se transforma em qualquer velocidade, mas você pode evitar a esquerda; e direita; arrow entradas se o carro está abaixo de uma determinada velocidade.