Como adicionar efeitos de deriva ao seu jogo HTML5 - manequins

Você pode usar vetores de força de forma interessante no seu jogo HTML5. Muitos jogos de corrida incluem mecanismos de derrapagem ou à deriva. Obter exatamente esse comportamento requer uma matemática muito sofisticada, mas você pode fazer uma aproximação razoável desse comportamento sem muito esforço.

Esta imagem não é suficiente. Você realmente precisa ver isso como um programa de trabalho porque é realmente legal. À medida que você move o barco na tela, o barco flui e derrapagens. É muito divertido jogar.

Como adicionar comportamento à deriva ao objeto do seu jogo

Para obter um comportamento de derivação simples, basta adicionar um pequeno vetor de força na direção atual do barco, independentemente de o usuário estar pressionando o acelerador.

Esta técnica é um compromisso entre o movimento baseado no espaço (onde o vetor de força é adicionado somente quando o acelerador é pressionado) e o comportamento padrão do carro (onde a direção de viagem está sempre seguindo o nariz do veículo). Cada quadro tem um pouco de cada comportamento.

Aqui está o código:

drift. html var game; var barco; function Boat () {tBoat = novo Sprite (jogo, "boat. png", 100, 50); tBoat. checkKeys = function () {console. log (esta velocidade); se (keysDown [K_LEFT]) {this. changeImgAngleBy (-5);} if (keysDown [K_RIGHT]) {this. changeImgAngleBy (5);} if (keysDown [K_UP]) {this. addVector (this. getImgAngle (), 2);} isto. addVector (this. getImgAngle (), (this. speed / 20)); } // fim checkKeys tBoat. checkDrag = function () {speed = this. getSpeed ​​(); velocidade * =. 95; esta. setSpeed ​​(speed);} return tBoat;} init () {game = new Scene (); jogos. setBG ("# 000066"); barco = barco novo (); jogos. start ();} // fim init função update () {jogo. Claro(); barco. checkKeys (); barco. checkDrag (); barco. update ();}

Como adicionar drift aos sprites do seu jogo

É um procedimento muito simples.

1. Construa um modelo de veículo padrão.

   Considere fazer um barco, apenas para variação.

2. Use um vetor de força para aceleração.

   Novamente, você controla manualmente a velocidade, então o mecanismo addVector () oferece grande poder. O vetor de força de aceleração (usado na tecla de seta para cima) pode ser um valor literal, mas não precisa ser enorme. Porque você realmente estará adicionando um segundo vetor de força, você pode querer diminuir o tom do vetor de aceleração.

3. Adicione um pequeno vetor de força a cada quadro.

   O vetor de força primária acontece somente quando você acelera, mas um vetor menor secundário é adicionado em cada quadro. Este vetor vai na direção em que o barco está enfrentando.Este pequeno vetor de movimento simula o impulso. É importante que este vetor de força seja uma porcentagem da velocidade em vez de um valor literal. Se você sempre mover um pixel, por exemplo, o barco nunca vai parar.