Como adicionar Colisões para o seu jogo HTML5

As coisas mais interessantes em jogos de vídeo HTML5 acontecer quando sprites entrar em pane e colidem uns nos outros. motores de jogo normalmente têm algum tipo de ferramenta para testar se dois sprites são sobrepostas. Isto é chamado detecção de colisão

, e isso pode ser feito de várias maneiras. Este exemplo utiliza a norma retângulo delimitador esquema. Não é perfeito, mas é muito fácil de implementar e é comumente usado.

Como configurar delimitadora colisões retângulo em seu jogo

Dê uma olhada colTest.html e você verá um exemplo simples.

No colTest.html exemplo, o usuário move o bicho com o mouse, e você receberá uma mensagem quando o bicho está tocando a caixa no meio da tela.

vazio

Uma série de coisas interessantes estão acontecendo neste código:

1. Ocultar o cursor do rato normal.

   Quando você vai ter algum outro objeto seguir o mouse, você normalmente deseja ocultar o cursor de seta normal. Dentro simpleGame, use o game.hideCursor () método para ocultar o cursor do rato dentro da tela do jogo.

2. Criar mais de uma entidade gráfica.

   São precisos dois para dançar o tango, ou colidem. Neste exemplo, a caixa permanece estacionária, e um bicho que segue o rato.

3. Dê o bicho a followMouse () método.

   Neste exemplo, você tem o bicho seguir o mouse. Comece criando um followMouse () método.

4. Determinar a posição do mouse.

   A posição do mouse é determinado (em simpleGame.js) com o document.mouseX e document.mouseY propriedades.

5. Copie a posição do mouse para a posição bicho.

   Use a posição x do mouse para definir a posição x do bicho, e repita com y.

6. Chamar o bicho de followMouse () método de cada frame.

   Como de costume, o atualizar() função é onde você coloca o código que deve acontecer repetidamente.

Se você brincar com a colTest.html página, você provavelmente vai notar que as colisões não são exatas. É possível ter um registo de colisão, mesmo quando o bicho não está realmente tocar a caixa. Isto é importante porque simpleGame usa um sistema chamado delimitadora colisões de caixa.

Isto significa que você não está realmente a verificação para ver se as imagens colidem, mas se os retângulos em torno das imagens colidem. Neste exemplo, a diferença é menor, mas às vezes você verá erros significativos com este mecanismo, especialmente com elementos que são longos e finos. Como um sprite gira, o tamanho do rectângulo envolvente pode mudar.

colisões baseada em distância para o seu jogo

Uma forma alternativa de detecção de colisão, chamada círculo delimitador colisões, está disponível. Com este mecanismo, basta calcular a distância entre o centro de dois sprites, e se esse valor é menor do que algum limiar, você considerá-lo uma colisão. Esta abordagem tem duas vantagens:

• A distância de colisão é constante. A distância entre os centros de imagem não vai mudar quando as imagens são rodadas, mesmo que as imagens mudam de tamanho.

• O limiar de colisão pode ser variada. Você pode definir qualquer sensibilidade que você quer. Definir um grande raio de colisão para colisões fáceis e um menor quando quiser colisões para ser disparado apenas quando os sprites são muito próximos uns dos outros.

o simpleGame biblioteca duende objeto tem um distanceTo () método, que calcula a distância de um sprite para o outro. Você pode ver um exemplo deste código no distance.html exemplo:

 
vazio

O método de colisão com base na distância é muito semelhante à versão delimitadora-rectângulo. Crie um checkDistance () função que irá agir apenas como o velho checkCollisions (). Aqui estão os passos para o que acontece em checkDistance:

1. Encontre a distância entre os dois sprites.

   Use o sprite do distanceTo () Método para determinar a distância entre as duas sprite.

2. Se a distância for inferior a um limiar, contá-lo como uma colisão.

   Geralmente, você deve usar a largura do sprite de menores como um ponto de partida para um limiar de colisão, mas você pode ajustar isso para fazer colisões mais ou menos provável.

3. Relatar o status de colisão.

   Neste exemplo, simplesmente imprimir # 147-colisão # 148- ou # 147 nenhuma colisão, # 148- mas em um jogo real, as colisões são gatilhos para outras acções: aumentar a pontuação, diminuindo o número de vidas, mudar a velocidade ou a posição dos elementos colidiram, ou o que quer. (Esperamos que ele envolve explosões.)