Etapa 1 - Game Freeway com Js

Domingo é dia de codar com a Alura! <3

Acrescentei a funcionalidade que delimita a movimentação do ator nas margens do mapa, segue link e código.

Link: https://editor.p5js.org/imagno/full/HL2mBTrBk

Código:

// armazenar imagens do jogo
let imagemDaEstrada, imagemDoAtor, imagemCarro1, imagemCarro2, imagemCarro3;

// variáveis do ator
let xAtor = 100;
let yAtor = 366;
let alturaAtor = 30;
let comprimentoAtor = 30;

// carros
let xCarro1 = 600;
let yCarro1 = 40;
let alturaCarro1 = 50;
let comprimentoCarro1 = 40;

let xCarro2;
let yCarro2;
let alturaCarro2;
let comprimentoCarro2;

let xCarro3;
let yCarro3;
let alturaCarro3;
let comprimentoCarro3;

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

function setup() {
  createCanvas(500, 400);
}

function draw() {
  background(imagemDaEstrada);

  mostraAtor();
  movimentaAtor();

  mostraCarros();
  movimentaCarros();
}

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

function movimentaAtor() {
  if (keyIsDown(UP_ARROW)) {
    if (yAtor - 5 > 0) {
      yAtor -= 5;
    } else {
      yAtor = 0;
    } 
  } else if (keyIsDown(DOWN_ARROW)) {
    if (yAtor + 5 < 366) {
      yAtor += 5;
    } else {
      yAtor = 366;
    }
  }
  if (keyIsDown(LEFT_ARROW)) {
    if (xAtor - 5 > 0) {
      xAtor -= 5;
    } else {
      xAtor = 0;
    }
  } else if (keyIsDown(RIGHT_ARROW)) {
    if (xAtor + 5 < 470) {
      xAtor += 5;
    } else {
      xAtor = 470;
    }
  }
}

function mostraCarros() {
   image(imagemCarro1, xCarro1, yCarro1, alturaCarro1, comprimentoCarro1);
}

function movimentaCarros() {
  xCarro1 -= 2;
}