P5 trava com laço da Velocidade do carro | Lógica de programação: laços e listas com JavaScript

Estou na aula 03 - Melhorando o código E na hora de fazer o laço para a velocidade do carro estou com problemas. O p5 trava e não abre o jogo. Até inserir o código funciona bem. Seguem os códigos que estou utilizando

Carros.js

// carros
let xCarros =[600, 600, 600];
let yCarros = [40, 96, 150];
let velocidadeCarros = [2, 2.5, 3.2];

//desenho carro

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

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

function voltaPosicaoInicialDoCarro(){
  if (xCarros[0] < -50){
    xCarros[0] = 600
  }
   if (xCarros[1] < -50){
    xCarros[1] = 600
  }
   if (xCarros[2] < -50){
    xCarros[2] = 600
  }
}

ator.js

//variaveis ator
let xAtor = 100;
let yAtor = 366;
let larguraAtor = 30;
let alturaAtor = 30;

function mostraAtor(){
  image(imagemDoAtor, xAtor, yAtor, larguraAtor, alturaAtor);
}

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

imagem.js

//imagens

let imagemDaEstrada;
let imagemDoAtor;
let imagemCarro;
let imagemCarro2;
let imagemCarro3;

function preload(){
  imagemDaEstrada = loadImage("imagens/estrada.png");
  imagemDoAtor = loadImage("imagens/ator-1.png");
  imagemCarro = loadImage("imagens/carro-1.png");
  imagemCarro2 = loadImage("imagens/carro-2.png");
  imagemCarro3 = loadImage("imagens/carro-3.png");
  imagemCarros = [imagemCarro, imagemCarro2, imagemCarro3]
}

sketch.js

console.log("ODrogo")
function setup() {
  createCanvas(500, 400);
}

function draw() {
  background(imagemDaEstrada);
  mostraAtor();
  mostraCarro();
  movimentaCarro();
  movimentaAtor();
  voltaPosicaoInicialDoCarro();
}

index.html

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

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="imagens.js"></script>
    <script src="ator.js"></script>
    <script src="carro.js"></script>
  </body>
</html>

Oi, Frederico! Como está?

Observei rapidamente seu código e percebi que na function movimentaCarro() você esqueceu de fechar o escopo do laço corretamente e iterou apenas com o contador + 1, talvez seja por isso que ocorreu o problema.

function movimentaCarro(){
  for(let i = 0; i < imagemCarros.length; i + 1)  //bem aqui a iteração
  xCarros[i] -= velocidadeCarros[i];


}

Para solucionar basta fechar o escopo das instruções corretamente e corrigir o cálculo da iteração

function movimentaCarro(){
  for(let i = 0; i < imagemCarros.length; i = i + 1) { //escopo e iteração
  xCarros[i] -= velocidadeCarros[i];
    }
}

Espero que tenha ajudado, fico à disposição!

Um abraço e bons estudos!