```<br>//Realizado o exercício, até o módulo 4. Troquei a imagem da vaquinha, pela imagem de um cachorrinho. <br>//O curso está excelente. Segue código:<br>//Ator.js<br>//Criando posição para o ator<

[Projeto] Projeto Freeway.js Finalizado | Lógica de programação: laços e listas com JavaScript

//Realizado o exercício, até o módulo 4. Troquei a imagem da vaquinha, pela imagem de um cachorrinho. 
//O curso está excelente. Segue código:
//Ator.js
//Criando posição para o ator
let xAtor = 92;
let yAtor = 368;

//Criando variáveis para controle da colisão e pontos
let colisao = false;
let meuspontos = 0;

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

function movimentaAtor(){
  if(keyIsDown(UP_ARROW)){
    yAtor -=3;
  }
  if(keyIsDown(DOWN_ARROW)){
    if(podesemover()){
      yAtor +=3;
    }
  }
  if(keyIsDown(LEFT_ARROW)){
    xAtor -= 5;
  }
  if(keyIsDown(RIGHT_ARROW)){
    xAtor += 5;
  }
}

function verificaColisao(){
  for(let i = 0; i < imagemCarros.length; i++){
   colisao = collideRectCircle(xCarros[i], yCarros[i], comprimentoCarro, alturaCarro, xAtor, yAtor, 15 )
  if (colisao){
       colidiu();
       SomDaColisao.play();
      if(pontosMaiorZero()){
         meuspontos -= 1;
      }
    }
  }
}
function colidiu(){
  yAtor = 368; 
}
function inluipontos(){
  textAlign(CENTER);
  textSize(25);
  fill(color(255,255,51));
  text(meuspontos, width/5,25);
}

function marcapontos(){
  if(yAtor < 17){
    meuspontos++;
    SomDoPonto.play();
    colidiu(); //Volta Ator para a tela inicial: aproveitamos a função colidiu, que faz exatamente isso.
  }
}

function pontosMaiorZero(){
  return meuspontos > 0;  
}

function podesemover(){
  return yAtor < 366;
}
// -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// Carro.js
//Criando listas
let xCarros = [400, 400,400, 400, 400, 400];
let yCarros = [40, 98, 150, 213, 260, 320];
let velocidadeCarros = [2,4,5,6, 5,3];
let comprimentoCarro = 60;
let alturaCarro = 40;

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

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

function voltaPosicaoInicialDoCarro(){
  for(let k = 0; k < imagemCarros.length; k++){
    if(passouATela(xCarros[k])){
      xCarros[k] = 600;
    }
  }
}
function passouATela (xCarros){
  return xCarros < -50;
}
// -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// imagens.js --> utilizei sons e trilha sonora diferentes das que foram aplicadas em aula
//Criando as variáveis das imagens 
let imagemDaEstrada;
let imagemDoAtor;
let imagemDoCarro;
let imagemDoCarro2;
let imagemDoCarro3;

//Criando as variáveis dos sons
let somDaTrilha;
let SomDoPonto;
let SomDaColisao;

//Carregando a estrada
function preload(){
  imagemDoAtor = loadImage("Imagens/cachorro.png");
  imagemDoCarro = loadImage("Imagens/carro-1.png");
  imagemDoCarro2 = loadImage("Imagens/carro-2.png");
  imagemDoCarro3 = loadImage("Imagens/carro-3.png");
  imagemDaEstrada = loadImage("Imagens/estrada.png");  
  imagemCarros = [imagemDoCarro,imagemDoCarro2,imagemDoCarro3,imagemDoCarro2,imagemDoCarro,imagemDoCarro3]

  somDaTrilha = loadSound("sons/trilhasonora.mp3");
  SomDoPonto = loadSound("sons/somponto.mp3");
  SomDaColisao = loadSound("sons/ohno.mp3");
}
// -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/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="imagens.js"></script>
    <script src="ator.js"></script>
    <script src="carro.js"></script>
    <script src="p5.collide2d.js"></script>
  </body>
</html>
// -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// sketch.js
function setup() {
  createCanvas(500, 400);
  somDaTrilha.loop();
}
function draw() {
  background(imagemDaEstrada);
  mostraAtor();
  mostraCarro();
  movimentaCarro();
  movimentaAtor();
  voltaPosicaoInicialDoCarro();
  verificaColisao();
  inluipontos();
  marcapontos();
  pontosMaiorZero();
  podesemover();
}
// -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------