1
resposta

Melhorando colisão entre Ator e Carros

Ainda durante as aulas eu percebi que foi usada a função collideRectCircle para definir o impacto do Ator.

No entanto, o Ator é uma imagem com altura e comprimento. Assim sendo, o xAtor é definido pelo canto superior esquerdo da imagem da vaquinha. Diferente do que ocorreria com os círculos em o x considerado do objeto fica no centro.

Para melhorar a sensibilidade do impacto, na função collideRectCircle eu ajustei alguns detalhes para que o xAtor e yAtor considerados pela função fique no centro do objeto, evitando um defeito onde o carro nem encosta e mesmo assim considera a colisão!

Ficou assim:

function verificaColisao(){
  for(let i = 0; i < xCarros.length; i++){
    hit = collideRectCircle(xCarros[i], yCarros[i], wCarros, hCarros, (xAtor+15), (yAtor+15), 28);
    if (hit == true){
      yAtor = 366;
      xAtor -= 60;
      diminuiVelocidade();
      contador--;
      pontuacao--;
      somColisao.play();
    }
  }
}

Como o Ator é, na verdade, um quadrado de lado 30, eu acrescentei ao xAtor e ao yAtor o valor do raio desejado, para que o collide use como referência o ponto central do objeto.

No entanto, ao indicar o diâmetro optei por colocar o valor de 28, para que ele desconsidere as bordas

1 resposta

Olá, Rafael! Como você está?

Excelente observação e implementação.

Você tem total razão, ao aplicarmos a função collideRectCircle para uma imagem, precisamos realizar algumas alterações para aumentar a sensibilidade de colisão e o carro reconhecer a parte inferior do Ator vaca.

Parabéns pela solução, certamente irá auxiliar muitos alunos com essa mesma questão aqui no fórum. Continue compartilhando seu progresso conosco!

Um grande abraço, obrigada e até breve!!

Bons estudos!