1
resposta

Resolvido - Faça como eu fiz na aula

ator.js

//Código do Ator

//Variáveis do Ator
let xAtor = 85;
let yAtor = 366;
let colisao = false;
let meusPontos = 0;

//Função para mostrar o ator na tela
function mostraAtor(){
  image(imagemDoAtor, xAtor, yAtor, 30, 30);
}

//Função para movimentar o ator na tela
function movimentaAtor(){
  if (keyIsDown(UP_ARROW)){
    yAtor -= 3;
  }
  if (keyIsDown(DOWN_ARROW)){
    if(podeSeMover()){
    yAtor += 3;
    }
  }
}

//Função para verificar se houve colisão
function verificaColisao(){
  //collideRectCircle(x1, y1, width1, height1, cx, cy, diameter)
  for (let i = 0; i < imagemCarros.length; i++){
    colisao = collideRectCircle(xCarros[i], yCarros[i], comprimentoCarro, alturaCarro, xAtor, yAtor, 15)
    if (colisao){
      voltaAtorParaPosicaoInicial();
      somDaColisao.play();
        if (podeSeMover()){
        meusPontos -=1;
    }
    }
  }
}

//Função para retornar o ator ao inicio
function voltaAtorParaPosicaoInicial(){
  yAtor = 366;
}

//Função para incluir marcação de pontos
function incluiPontos(){
  textAlign(CENTER);
  textSize(25);
  fill(color(255, 240, 60));
  text(meusPontos, width / 5, 27);
}

//Função para marcar os pontos
function marcaPonto(){
  if (yAtor < 15){
    meusPontos += 1;
    voltaAtorParaPosicaoInicial();
    somDoPonto.play();
  }
}

//Função que vai verificar e limitar os pontos em zero
function pontosMaiorQueZero(){
  return meusPontos > 0;
}

//Função para não pover o ator para baixo
function podeSeMover(){
    return yAtor < 366;
}

carros.js

//Código do Carro

//Lista de valores
let xCarros = [600, 600, 600, 600, 600, 600];
let yCarros = [40, 96, 150, 210, 270, 318];
let velocidadeCarros = [2, 2.5, 3.2, 5, 3.3, 2.3];
let comprimentoCarro = 50;
let alturaCarro = 40;

//Função para mostrar o carro na tela
function mostraCarro(){
  for (let i = 0; i < imagemCarros.length; i++){
    image(imagemCarros[i], xCarros[i], yCarros[i], comprimentoCarro, alturaCarro);
  }
}

//Função para movimenta o carro na tela
function movimentaCarro(){
    for(let i = 0; i < imagemCarros.length; i++){
        xCarros[i] -= velocidadeCarros[i];
        }
}

//Função para o carro voltar a posição inicial
function voltaPosicaoInicialCarro(){
    for(let i = 0; i < imagemCarros.length; i++){
        if(passouTodaATela(xCarros[i])){
                xCarros[i] = 600;
        }
    }
}

//Função para retornar o valor quando o carro passar toda a tela
function passouTodaATela(xCarro){
    return xCarro < - 50;
}

imagens.js

//Imagens e Sons do Jogo

//Variáveis das Imagens
let imagemDaEstrada;
let imagemDoAtor;
let imagemCarro;
let imagemCarro2;
let imagemCarro3;

let somDaTrilha;
let somDaColisao;
let somDoPonto;

//Função de pré loading das imagens e dos sons
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");

  imagemCarros = [imagemCarro1, imagemCarro2, imagemCarro3, imagemCarro1, imagemCarro2, imagemCarro3];

  somDaTrilha = loadSound("sons/trilha.mp3");
  somDaColisao = loadSound("sons/colidiu.mp3");
  somDoPonto = loadSound("sons/pontos.wav");
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.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>
    <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();
  voltaPosicaoInicialCarro();
  verificaColisao();
  incluiPontos();
  marcaPonto();
}
1 resposta

Continue avançando, Felipe!

Estamos aqui para qualquer dúvida que tiver

Um abraço

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software