[Dúvida] vaquinha nao colide com os carros e os 3 carros das linhas de baixo nao aparecem

Olá, Peterson! Tudo bom contigo?

Antes de tudo, agradeço a paciência em aguardar uma resposta!

Para realizar a colisão da vaquinha com os carros, faremos uso de uma biblioteca do próprio p5.js. Para utilizar os métodos dessa biblioteca, precisamos, inicialmente, realizar sua importação.

As etapas desse processo estão contidas na Gif abaixo:

• Ir para https://editor.p5js.org/,
• Clicar em ”Help & Feedback > Reference > Libraries";
• Buscar por "p5.collide2d";
• Acessar o repositório no Github da Biblioteca;
• Selecionar o arquivo "p5.collide2d.js";
• Fazer o download desse código zipado;
• Descompactar o zip em uma pasta de sua preferência;
• No p5.js, clicar em "project folder";
• Selecionar "Add file";
• Adicionar o arquivo "p5.collide2d.js" ;
• Clicar em "Open";
• Adicionar <script src="p5.collide2d.js"></script> ao "index.html", para que nosso arquivo seja lido.

Depois da importação, precisamos alterar a chamada da função do p5.collide2d no código. No arquivo ator.js faremos a seguinte mudança:

function verificaColisao(){

  for (let i= 0; i < imagemCarros.length; i++){
   colisao = collideRectCircle(xCarros[i], yCarros[i], larguraCarro, alturaCarro, xAtor, yAtor, 15)

    if(colisao) {
      colidiu();
     }
  }
}

Além da importação, existem dois fatores que estão impedindo a colisão da vaquinha com os carros. Vamos analisá-los?

Ao observarmos seu código, podemos notar que algumas variáveis estão sendo inicializadas mais de uma vez no arquivo carro.js. A inicialização de uma variável acontece a partir do momento que a declaramos e atribuímos um valor a ela, como neste exemplo:

let xAtor = 100;

Quando desejamos alterar o valor da variável em outro momento, não é mais necessário utilizar a palavra reservada let.

Outro ponto importante é acerca do nome utilizado para as variáveis. Existem alguns padrões seguidos pela comunidade dev — o pessoal que trabalha com Javascript, por exemplo, gosta de criar variáveis tendo como base o Camel Case.

O padrão Camel Case é aquele em que as variáveis são sempre iniciadas por letra minúscula e, caso haja outra palavra logo em seguida, esta começará por uma letra maiúscula, como no exemplo abaixo:

let velocidadeCarro = 2.5

Para saber um pouquinho mais sobre esses tipos de nomenclatura, deixo como dica para ler mais tarde um artigo da Alura:

• Convenções de nomenclatura: Camel, Pascal, Kebab e Snake case

Ao fim, teremos o seguinte resultado:

Código de ator.js:

//codigo do ator

//variaveis do ator
let xAtor = 100;
let yAtor = 366;
let colisao = false;

function mostraAtor(){
  image (imagemDoAtor, xAtor, yAtor, 30, 30)
}

function movimentaAtor(){
  if ( keyIsDown(UP_ARROW)){
    yAtor -= 3 }

 if ( keyIsDown(DOWN_ARROW)){
    yAtor += 3}
}

function verificaColisao(){

  for (let i= 0; i < imagemCarros.length; i++){
   colisao = collideRectCircle(xCarros[i], yCarros[i], larguraCarro, alturaCarro, xAtor, yAtor, 15)

    if(colisao) {
      colidiu();
     }
  }
}

function colidiu() {
  yAtor = 366;
}

Código de carro.js:

//codigo do carro

//lista
let xCarros = [600,600,600,600,600,600]
let yCarros = [100,40,210, 150, 270, 318]
let velocidadeCarros = [3 , 2.5 , 3.5 , 5 , 3.3 , 2.3]
                    //  0 , 1,    2,    3.   4,    5,

//largura e altura dos carros
let larguraCarro = 45;
let alturaCarro = 35

  function mostraCarro(){
  for (let i = 0; i < imagemCarros.length;i++){
    image(imagemCarros[i], xCarros[i], yCarros[i], comprimentoCarro, alturaCarro);
  }
}

function movimentaCarros() {
  for (let i = 0 ; i < imagemCarros.lenght; i++){
    xCarros [i] -= velocidadeCarros [i];
  }
}

function mostraCarro(){
    for(let i = 0; i < imagemCarros.length; i++){
image(imagemCarros[i], xCarros[i], yCarros[i], larguraCarro, alturaCarro);
  }
}

function movimentaCarros(){
    for (let i = 0; i < imagemCarros.length; i++){
        xCarros[i] -= velocidadeCarros[i];
        }
}

function voltaPosicaoInicialDoCarro(){
    for (let i = 0; i < imagemCarros.length; i++){
        if(passouTodaATela(xCarros[i])){
                xCarros[i] = 600;
        }
    }
}

function passouTodaATela(xCarro){
    return xCarro < - 50;
}

Fico à disposição para te ajudar caso surjam dúvidas ao longo dos seus estudos.

Grande abraço, Peterson!