[Dúvida] Como faço isso? | Lógica de programação: laços e listas com JavaScript

Oi Davi!!

Veja este código e extraia o que for necessário, acho que é exatamente o que está precisando. Acho que vi isto em algum post, o jogo tinha duas vias e estava com um problema semelhante ao seu. Espero que isso o ajude. Boa sorte e bons estudos!!

//carros
let comprimentoCarros = 55;
let alturaCarros = 40;

//variaveis carros
let yCarros = [40, 97, 150, 210, 265, 320];
let xCarros = [800, 800, 800, -55, -55, -55];
let velocidadeCarros = [8, 10.5, 12, -11, -9, -6];

function mostraCarros(){
  for (let i = 0; i < Carros.length; i++) {
    image(Carros[i], xCarros[i], yCarros[i], comprimentoCarros, alturaCarros);
    }
}

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

function Carrolooping(){
  for(let i = 0; i < Carros.length; i++) {
    if(xCarros[i] < -60){xCarros[i] = 800;}
    if(xCarros[i] > 810){xCarros[i] = -30;}
  }
}

____________________________________________

//imagens
let estrada;

//imagens carregadas
function preload(){
  estrada = loadImage("imagens/estrada.png");
  jogador = loadImage("imagens/ator-1.png");
  carro1 = loadImage("imagens/carro-1.png");
  carro2 = loadImage("imagens/carro-2.png");
  carro3 = loadImage("imagens/carro-3.png");
  carro4 = loadImage("imagens/carro-4.png");
  carro5 = loadImage("imagens/carro-5.png");
  carro6 = loadImage("imagens/carro-6.png");
  Carros = [carro1, carro2, carro3, carro4, carro5, carro6];
}

_______________________________________________

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
    <script src="carro.js"></script>
    <script src="imagens.js"></script>
    <script src="jogador.js"></script>
    <script src="p5.collide2d.js"></script>
  </body>
</html>

______________________________________

// ator
let xjogador = 200;
let yjogador = 367;
let cjogador = 30;
let ajogador = 30;

let meusPontos = 0;

let colisao = false;

function funcaoJogador(){
  image(jogador, xjogador, yjogador, cjogador, ajogador);
  if (keyIsDown(UP_ARROW)) {yjogador -= 3};
  if (keyIsDown(DOWN_ARROW) && yjogador < 366) {yjogador += 3};
}

function verificaColisao(){
  //collideRectCircle(200, 200, 100, 150, mouseX, mouseY, 100);
  for(let i = 0; i < Carros.length; i++){
    colisao = collideRectCircle(xCarros[i], yCarros[i], comprimentoCarros -15, alturaCarros, xjogador, yjogador, 12,5);
    if(colisao){resetJogador();}
  }
}


function Placar(){
  textAlign(CENTER);;
  fill(color(0,255,0));
  stroke(0);
  strokeWeight(2);
  textSize(17);
  text(meusPontos, width / 5, 23);

  if(yjogador < 15) {meusPontos += 1; resetJogador();}
}

function resetJogador(){
  yjogador = 367;
}
___________________________________________________


//sketch
let larguraTela = 800;
let alturaTela = 400;

function setup() {
  createCanvas(larguraTela, alturaTela);
}

function draw() {
  background(estrada);
  funcaoJogador();
  mostraCarros();
  movimentoCarros();
  Carrolooping();
  verificaColisao();
  Placar();
}


____________________________________
style css


html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

Mergulhe em programação