Projeto concluído no VS Code e rodando no browser | Lógica de programação: laços e listas com JavaScript

Assim como fiz com Pong, fiz meu Freeway no VS Code em vez do p5.js. Abaixo, listo os códigos gerados no módulo, mas também é possível jogar diretamente da minha Github Page clicando aqui (fica dando uns glitches, mas não sei ainda como corrigir, kkkk).

<head>
  <meta charset="UTF-8" />
  <canvas width="600" height="400"></canvas>
</head>
<body>
  <script src="cenario.js"></script>
  <script src="ator.js"></script>
  <script src="carros.js"></script>
  <script src="colisaoRetCirc.js"></script>
  <audio id="colisao">
    <source src="sounds/colidiu.mp3" type="audio/mp3" />
  </audio>
  <audio id="pontos">
    <source src="sounds/pontos.wav" type="audio/wav" />
  </audio>
  <audio loop id="trilha" autoplay="autoplay">
    Seu navegador não suporta HTML5
    <source src="sounds/trilha.mp3" type="audio/mp3" />
  </audio>
</body>

<script>
  //setup
  let cenario = document.querySelector('canvas')
  let pincel = cenario.getContext('2d')
  let estrada = new Image()

  //sons do jogo
  let trilha = document.getElementById('trilha')
  let colisao = document.getElementById('colisao')
  let pontos = document.getElementById('pontos')

  //start
  function start() {
    limpaTela()
    mostraAtor()
    mostraCarros()
    moveCarros()
    checaColisao()
    marcaPonto()
  }

  setInterval(start, 1)
  document.onkeydown = moveAtor
</script>

//CÓDIGO DO ATOR

//variaveis do ator
let xAtor = 170
let yAtor = 366
let comprAtor = 30
let largAtor = 30
let colidiu = false
let meusPontos = 0

function mostraAtor() {
  let ator = new Image()
  ator.src = 'images/ator-1.png'
  ator.onload = function () {
    pincel.drawImage(ator, xAtor, yAtor, comprAtor, largAtor)
  }
}

//keyCodes das setas do teclado
// let esquerda = 37
let cima = 38
// let direita = 39
let baixo = 40

function moveAtor(evento) {
  if (evento.keyCode == cima) {
    yAtor -= 15
  } else if (evento.keyCode == baixo) {
    if (yAtor < 366) {
      yAtor += 15
    }
  }
}

function checaColisao() {
  //colisaoRetCirc(xRet, yRet, largRet, altRet, xCirc, yCirc, diametro)
  for (let i = 0; i < imagens.length; i++) {
    colidiu = colisaoRetCirc(
      xCarros[i],
      yCarros[i],
      comprCarros,
      largCarros,
      xAtor,
      yAtor,
      15
    )
    if (colidiu) {
      resetaAtor()
      if (meusPontos > 0) {
        meusPontos -= 1
      }
      colisao.play()
    }
  }
}

function resetaAtor() {
  yAtor = 366
}

function incluiPlacar() {
  pincel.font = '25px Arial'
  pincel.textAlign = 'center'
  pincel.fillText(meusPontos, 170, 27)
}

function marcaPonto() {
  if (yAtor < 15) {
    meusPontos++
    resetaAtor()
    pontos.play()
  }
}

//CÓDIGO DOS CARROS

//variaveis dos carros
let xCarros = [600, 600, 600, 600, 600, 600]
let yCarros = [40, 95, 150, 210, 270, 318]
let velocidades = [2, 2.5, 3.2, 5, 3.3, 2.3]
let imagens = [
  'images/carro-1.png',
  'images/carro-2.png',
  'images/carro-3.png',
  'images/carro-1.png',
  'images/carro-2.png',
  'images/carro-3.png'
]
let comprCarros = 50
let largCarros = 40

function mostraCarros() {
  for (let i = 0; i < imagens.length; i++) {
    let carros = new Image()
    carros.src = imagens[i]
    carros.onload = function () {
      pincel.drawImage(carros, xCarros[i], yCarros[i], comprCarros, largCarros)
    }
  }
}

function moveCarros() {
  for (let i = 0; i < imagens.length; i++) {
    xCarros[i] -= velocidades[i]
    if (saiuDaTela(xCarros[i])) {
      xCarros[i] = 600
    }
  }
}

function saiuDaTela(xCarro) {
  return xCarro < -50
}

//CÓDIGO DO CENÁRIO

function mostraEstrada() {
  estrada.src = 'images/estrada.png'
  estrada.onload = function () {
    pincel.drawImage(estrada, 0, 0, cenario.width, cenario.height)
    incluiPlacar()
  }
}

function limpaTela() {
  estrada.src = ''
  mostraEstrada()
}

//Verifica a colisão entre um retângulo e um círculo

function colisaoRetCirc(xRet, yRet, largRet, altRet, xCirc, yCirc, diametro) {
  //2d
  // variáveis temporárias para designar as bordas para teste
  let testeX = xCirc
  let testeY = yCirc

  // qual borda está mais próxima?
  if (xCirc < xRet) {
    testeX = xRet // borda esquerda
  } else if (xCirc > xRet + largRet) {
    testeX = xRet + largRet
  } // borda direita

  if (yCirc < yRet) {
    testeY = yRet // borda superior
  } else if (yCirc > yRet + altRet) {
    testeY = yRet + altRet
  } // borda inferior

  // aferir distâncias das bordas mais próximas
  // A distância entre dois pontos no plano cartesiano é dada pela raiz quadrada de (x1 - x2)² + (y1 - y2)²
  let distancia = Math.sqrt((xCirc - testeX) ** 2 + (yCirc - testeY) ** 2)

  // se a distância for menor que o raio, colisão!
  if (distancia <= diametro / 2) {
    return true
  }
  return false
}

Mergulhe em programação