Concluindo o Jogo, com algumas alterações.

Meu objetivo neste post, é apresentar o resultado do desenvolvimento da atividade proposta no Curso Jogos Clássicos parte 2, e tirar algumas dúvidas sobre algumas soluções que encontrei para resolver determinados problemas.

O primeiro script que apresento, será do arquivo sketch.js:

A primeira alteração do jogo inicial, foi definir duas variáveis que determinam a largura e a altura do Canvas, pois como alguns parâmetros do jogos dependiam desses valores, achei mas interessante trata-los como variáveis. Dessa forma, trabalhei com conceito que nós não estudamos neste curso, mas eu já tinha um pouco de conhecimento sobre matrizes( listas de listas).

 // ambiente
let LARGURA = 800;
let ALTURA = 600;

function setup() {
  createCanvas(LARGURA, ALTURA); 
  trilha.loop();
}

function draw() {
  background(imagemEstrada);
  mostraCarro();
  mostraAtor();
  moveCarro();
  moveAtor();
  marcaPonto();
  mostraPlacar()
  verificaColisao();

}

O segundo script é referente ao arquivo que contém os códigos para o funcionamento dos carros. Umas das principais alterações da estrutura do código, em comparação com do professor, é foi o fato de utilizar listas de listas. Pois considerei mais coerente, armazenar os dados de cada carro dentro de uma lista, e por fim armazenar todas as listas de carros numa única.

Agora o principal desafio para eu, foi implementar os carros na segunda faixa de pistas, se movendo no sentido contrário inclusive com a imagem do carro virada para o lado correto. Para chegar a esse resultado precisei consultar bastante a documentação do p5js, fazer vários testes até chegar no código escrito.

//medidas dos carros

let larguraCarro = 50;
let alturaCarro =40;
//listas carros [xCarro, yCarro, velocidadeCarro]
let carro1 = [LARGURA-80, 70, 4];
let carro2 = [LARGURA-60, 155, 5];
let carro3 = [LARGURA-90, 235, 6];
let carro4 = [500, 320, -7];
let carro5 = [100, 405, -5];
let carro6 = [60, 490, -4];
let CARROS = [carro1,carro2,carro3, carro4, carro5, carro6];

function mostraCarro(){
     for(let x=0; x<CARROS.length;x++){
    if(x<3){     
    image(imagensCarros[x],CARROS[x][0], CARROS[x][1],larguraCarro,alturaCarro)
    //rect(CARROS[x][0], CARROS[x][1],larguraCarro,alturaCarro)  
    }else{
      segundaFaixa(x);
    }
  }   
}

function moveCarro(){
    for(let x=0; x<CARROS.length;x++){
         if(CARROS[x][0]<-60 || CARROS[x][0]>LARGURA+60){
              let posicao = CARROS[x][0];
              CARROS[x][0]=passouTela(posicao);

        } else{
            CARROS[x][0]-=CARROS[x][2]
    }
  }
}

function passouTela(posicao){ 

  if(posicao<-60){
    return LARGURA+40;  
  } else{
    return -40;
  }
}

function segundaFaixa(x){

  let xCarroInvertido = CARROS[x][0]+larguraCarro/2
  let yCarroInvertido = CARROS[x][1]+alturaCarro/2
  push();
  angleMode(DEGREES);
  translate(xCarroInvertido,yCarroInvertido);
  rotate(180);
  imageMode(CENTER);
  image(imagensCarros[x],0,0,larguraCarro, alturaCarro)
   pop();
  //rect(xCarroInvertido-larguraCarro/2, yCarroInvertido-alturaCarro/2,larguraCarro,alturaCarro)  
}

O proximo script é do arquivo referente aos códigos do Ator. Nessa etapa o principal desafio foi implementar as colisões. Não entendi porque o modelo de colisão utilizado na aula * recteCircle * ocorreu normal, pois no meu programa estava correndo vários bugs. E para resolver isso tive usar o modelo rectRect, além de fazer umas correções nas coordenadas dos personagens.

// Variáveis Ator
let yAtor = ALTURA-50;
let xAtor = 50;
let colisao = false;
let meusPontos = 0;

function mostraAtor(){

  image(imagemAtor,xAtor, yAtor,40, 40);
  //rect(xAtor,yAtor,40,40)

}

function moveAtor(){

  if(keyIsDown(UP_ARROW)){
    yAtor-=2;
  }

    if(keyIsDown(DOWN_ARROW)){
    yAtor+=2;
  }

    if(keyIsDown(LEFT_ARROW)){
    xAtor-=2;
  }

    if(keyIsDown(RIGHT_ARROW)){
    xAtor+=2;
  }

}

function verificaColisao(){

  for(let x = 0; x<CARROS.length;x++){
    colisao = collideRectRect(xAtor-20, yAtor-20, 40,40,CARROS[x][0]-larguraCarro/2,CARROS[x][1]-alturaCarro/2, larguraCarro, alturaCarro)
    if(colisao){
      if(meusPontos>0){
        meusPontos--;  
      }
      colidir.play();
      voltaInicio()
    }
  }
}
function marcaPonto(){

  if(yAtor<30){
    meusPontos++;
    pontos.play();
    voltaInicio();
  }
}
function voltaInicio(){
  yAtor=ALTURA -50
} 
function mostraPlacar(){
  fill(255,215,0);
  textAlign(CENTER);
  textSize(32);
  text(meusPontos, width/5, 35);
}

Basicamente essa foi a estrutura completa para quem quiser vê o código funcionando segue o link.