Como adicionar colisões para o seu jogo html5

Video: Love2D - [ Jogo de Nave ] - Parte 4 - Detectando colisões

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 sobrepostos. Isso é 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 a criatura 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. Esconder 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 mouse dentro da tela do jogo.

2. Criar mais de um duende.

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

3. Dê a criatura um followMouse () método.

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

4. Determinar a posição do mouse.

   Video: Criação de um jogo de labirinto com HTML5 e javascript #Pt. 3/6 – Verificando as colisões

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

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

   Usar 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 todos os quadros.

   Video: 5 - C++/ALLEGRO 5 - JOGO - Colisões

   Como de costume, o atualizar() função é onde você colocar 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 é realmente tocar a caixa. Isto é importante porque simpleGame usa um esquema chamado delimitadora colisões 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 delimitadora 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 um limite, 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 giradas, mesmo que as imagens mudam de tamanho.

• O limiar de colisão pode ser variada. Você pode definir qualquer sensibilidade que você deseja. Defina 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 objecto tem um distanceTo () método, que calcula a distância a partir de um sprite para o outro. Você pode ver um exemplo desse código no distance.html exemplo:

vazio
Video: [OLD] - Publicar jogos do construct no google drive como hospedagem free (host)

O método de colisão com base na distância é muito semelhante à versão delimitadora retâ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 os dois sprites.

2. Se a distância for inferior a algum 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 “colisão” ou “nenhuma colisão”, 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, mudando a velocidade ou posição dos elementos colidiram, ou o que quer . (Esperamos que ele envolve explosões.)