Quero inserir faixas distintas

Fala, Eder! Tudo bem contigo?

É uma boa ideia, hein!!!

Dê uma olhada no projeto de um de nossos alunos, José Luiz, que desenvolveu carros trafegando em sentidos contrários!

Acredito que vai te ajudar a desenvolver o seu projeto!

Um abraço e bons estudos, Eder!

Opa Eder, tudo bem com você?

É totalmente possível, a única coisa que é necessário adicionar imagens diferentes em nosso array:

  imagemCarros = [imagemCarro, imagemCarro2, imagemCarro3, imagemCarro4, imagemCarro5, imagemCarro6]

Aqui de preferência seria legal que as imagens fossem giradas para trazer um melhor efeito de movimento :)

Após isso só precisamos mudar em 2 lugares:

1. Posições

Dado que alguns vão se movimentar com a outra faixa, então precisamos que a posição também seja invertida:

let xCarros = [0, 600, 0, 600, 0, 600];

Então a lógica vai ser o seguinte, os carrinhos pares vão de 0 a 600, e os impares vão de 600 a 0 :)

mas como calcular os pares e impares?

Nas linguagens de programação temos o operador de modulo (%), que nada mais é do que o resto da divisão inteira, então por exemplo:

• 1 % 2 = 1 ( a divisão inteira é 0 e sobra 1 )
• 2 % 2 = 0 ( a divisão inteira é 1 e sobra 0)
• 3 % 2 = 1 ( a divisão inteira é 1 e sobra 1 )
• 4 % 2 = 0 ( a divisão inteira é 2 e sobra 0 )

Então como podemos ver, todo número par, quando fazemos o módulo por 2 tem resultado igual a 0 :)

onde vamos usar isso ?

Bem na função movimentaCarro podemos adicionar essa verificação :

 function movimentaCarro(){
  for( let i = 0; i < imagemCarros.length; i++){

    if( i % 2 == 0){
        xCarros[i] += velocidadeCarros[i];
    } else {
      xCarros[i] -= velocidadeCarros[i];
    }
  }
}

Ou seja, se o índice for par, vamos aumentar a posição dele, se for ímpar continuamos diminuindo :)

Dessa maneira precisamos mudar também a função que calcula se passou a tela

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

Ou seja, adicionamos com o || (ou) mais uma condição que é passar de 600, dessa forma teremos verdadeiro nos 2 casos

E por fim, a função de voltar a posição inicial:

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

      if ( i % 2 == 0){
        xCarros[i] = 0;
      }else {
      xCarros[i] = 600;
      }
    }
  }
}

Novamente utilizei a questão do módulo, para caso seja par colocar na posição 0, e impar continua igual começando em 600 :)

Dessa forma teremos os carrinhos se movimentando diferente!!!

Abraços e Bons Estudos :)

Obrigado Cassio e Geovani

A ideia partiu do projeto do José, então eu já havia visto e aplicado ao meu código.

A solução do Geovani ajudou bastante (Inclusive até anotei a parte sobre % para dar uma estudada melhor)

Vou aplicar e configurar certinho e abro um tópico para todo mundo ver depois Muito obrigado pela ajuda!