Como adicionar efeitos de arrastar ao seu jogo HTML5 - manequins

O princípio de adição de vetor pode ser útil para o seu jogo HTML5 de várias maneiras. Por um lado, ele pode adicionar efeito de arrastar e, portanto, levar a um comportamento mais preciso do veículo terrestre. Imagine que 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 nem mudar seu movimento.

O que você precisa fazer é adicionar uma força. Quando você adiciona força, você adiciona lentamente o vetor de movimento. Eventualmente, o carro começa a se mover. Se você parar de aplicar a força, eventualmente irá parar à medida que a resistência do vento e a resistência ao rolamento retardem o carro.

Corridas de arrasto de jogos

O arrastar. O exemplo html mostra um carro realista que acelera devagar e diminui a velocidade quando o acelerador (neste caso, a seta para cima) é liberado.

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

Drag var game; var barco; function Car () {tCar = novo Sprite (jogo, "carro. png", 100, 50); tCar. checkKeys = function () {console. log (esta velocidade); se (keysDown [K_LEFT]) {this. changeImgAngleBy (-5);} if (keysDown [K_RIGHT]) {this. changeImgAngleBy (5);} if (keysDown [K_UP]) { isto. addVector (this imgAngle, 2); } // mova-se na direção atual para isso. addVector (this. imgAngle, 2);} // fim checkKeys tCar. checkDrag = function () { speed = this. getSpeed ​​(); velocidade * =. 95; isto. setSpeed ​​(velocidade); } // final checkDrag retornar tCar;} // end car def function init () {game = new Scene (); jogos. setBG ("# 666666"); carro = carro novo (); jogos. start ();} // fim init função update () {jogo. Claro(); carro. checkKeys (); carro. checkDrag (); carro. update ();} // fim de atualização

Como implementar o arrastar no seu jogo

Esta versão usa um movimento baseado em força mais realista. Quando o usuário pressiona a seta para cima, o carro aumenta a velocidade. Se o usuário deixar a seta para cima pressionada, o carro atinge a velocidade máxima naturalmente. Quando o usuário libera a seta para cima, o carro gradualmente diminui e, eventualmente, pára. Os vetores forçados são a chave.

Veja como funciona:

1. Crie um veículo básico.

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

2. Avançar com um vetor de força.

   O código para avançar é um pouco diferente. Em vez de simplesmente modificar a velocidade diretamente, aplique uma força na direção atual do carro. Use o método getImgAngle () do sprite para determinar qual direção o carro está apontando e adicione uma força pequena nessa direção.

3. Crie um método checkDrag ().

   Os carros não apenas continuam sem energia. A resistência do vento e do solo irá diminuí-los e, eventualmente, eles vão parar. Simule as várias forças de arrasto, adicionando um método checkDrag () ao seu objeto.

4. Multiplique a velocidade por um fator de arrastar.

   Para este exemplo, as várias forças de arrasar roubam o carro de 5% de sua velocidade em cada quadro. Lembre-se de que o jogo está sendo executado em 20 quadros por segundo, então a força de arrasto é bastante substancial. Você pode alcançar o efeito de arrastar de várias maneiras, mas a maneira mais fácil é multiplicar a velocidade do carro por algum valor menor do que 1.

5. Sem freios!

   O carro de arcada auto-respeitado possui freios? Sério, você pode querer adicionar uma entrada para a seta para baixo, mas não deve ser necessário porque o carro irá abrandar sozinho.

6. Season to taste.

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

   Você pode simular uma suspensão mais responsiva alterando a taxa de giro se o usuário pressionar as setas direita ou esquerda. Você também pode simular um carro mais ou menos eficiente modificando a relação de arrasto. Agora, o carro gira a qualquer velocidade, mas você pode evitar entradas de seta esquerda e direita se o carro estiver abaixo de uma certa velocidade.