1
resposta

Quando vou testar o jogo após adicionar a função de colisão o navegador não carrega mais.

Quando vou testar o jogo após adicionar a função de colisão o navegador não carrega mais.

https://editor.p5js.org/dralvphd2/sketches/7Ndj4fes7

1 resposta

Olá, Álvaro! Espero que esteja tudo bem por aí!

Olhei seu projeto e há um pequeno erro que compromete o funcionamento do código. Esse erro é no for da função verificaColisao(). Vamos ver?

Observe atentamente o seu código:

function verificaColisao(){
  for( let i=0; imagemCarros.length; i++){ //faltou passar a condição
    colisao = collideRectCircle(xCarros[i], yCarros[i], wCarro, hCarro, xAtor, yAtor, 15)

    if(colisao){
    voltaInicio();
    }
  }
}

Podemos perceber que falta passar uma informação na condição do seu for, o que gerou o conflito de informações e o comportamento do código ficar eternamente realizando a aferição do comprimento da lista de "imagens.carro".

Por que isso ocorreu?

A sintaxe do for possui a seguinte estrutura:

for ([inicialização]; [condição]; [expressão final])
   declaração

Nesse sentido, você enviou corretamente a inicialização e a expressão final. No entanto a condição ficou como a leitura do comprimento de imagensCarros e o for ficou realizando essa operação eternamente (por isso que travou o navegador). A condição é muito importante , pois é:

condição

Uma expressão para ser avaliada antes de cada iteração do loop. Se esta expressão for avaliada para true, declaração será executado. Este teste da condição é opcional. Se omitido, a condição sempre será avaliada como verdadeira. Se a expressão for avaliada como falsa, a execução irá para a primeira expressão após a construção loop for.

Dessa forma, para solucionar o problema basta passarmos uma condição que esteja de acordo com a lógica do projeto. No código abaixo o instrutor utiliza uma verificação que é baseada em "se o contador for menor que o comprimento da lista de imagens dos carros", vejamos:

function verificaColisao(){
  for( let i = 0; i < imagemCarros.length; i++){ //bem aqui a condição
    colisao = collideRectCircle(xCarros[i], yCarros[i], wCarro, hCarro, xAtor, yAtor, 15)

  if(colisao){
    voltaInicio();
  }
}
}

Você poderia copiar e testar no seu p5.js para ver se funciona?

Vou deixar um link com a documentação da MDN sobre o for: for MDN Web Docs

Espero que tenha ajudado você!

Um abraço e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software