Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Página travada

Quando tento testar o jogo, a página inteira trava e eu preciso reiniciar o navegador. Já olhei tudo e não achei nenhum erro. Também não aparece mensagem de erro.

O link é https://editor.p5js.org/Eduarda_Salgado/sketches/Mw8CD3AxR

Alguém pode me ajudar?

1 resposta
solução!

Olá Eduarda, tudo bem?

O erro se encontra no seu arquivo carros.js, você acabou criando muitos loops infinitos sem querer, que trava o processamento da página e até mesmo do navegador em algns teste que fiz, a sintaxe correta é i++ ao invés de i = i++, deste modo há um muitos cálculos e o computador não aguenta.

Seu código refatorado fica do seguinte modo:

//código do carro

let xCarros = [600, 600, 600, 600, 600, 600];
let yCarros = [40, 100, 150, 210, 270, 320];
let vCarros = [2, 2.5, 3.2, 5, 3.3, 2.3];
let cCarros = 50;
let aCarros = 40;

function mostraCarro(){
  for (let i = 0; i < ImagemCarros.length; i++){
    image(ImagemCarros[i], xCarros[i], yCarros[i], cCarros, aCarros);
  }
}

function movimentaCarro(){
  for (let i = 0; i < ImagemCarros.length; i++){
    xCarros[i] -= vCarros[i];
  }
}

function VoltaCarro(){
  for (let i = 0; i < ImagemCarros.length; i++){
    if (PassouTela(xCarros[i])){
      xCarros[i] = 600;
    }
  }
}

function PassouTela(xCarros){
  return xCarros < - 50;
}

Após a implementação do seu código vai aparecer um erro da variável VoltaInicio lá no arquivo ator.js, esse erro é por conta da escrita está errado e não igual a variavel, em um dos casos a função está sendo chamada sem o "V" maiúsculo e no outro sem o "I" maiúsculos, seu código refatorado fica assim:

//variáveis do ator

let xAtor = 85;
let yAtor = 366;
let LAtor = 30;
let AAtor = 30;
let colisao = false
let Pontos = 0;

function mostraAtor(){
   image(ImagemDoAtor, xAtor, yAtor, LAtor, AAtor);
}

function movimentaAtor(){
  if (keyIsDown(UP_ARROW)){
    yAtor -= 3;
  }
 if (keyIsDown(DOWN_ARROW)){
    yAtor += 3;
  }
}

function VerificaColisao(){
  //collideRectCircle(x1, y1, width1, height1, cx, cy, diameter)
  for (let i = 0; i < ImagemCarros.length; i++){
    colisao = collideRectCircle(xCarros[i], yCarros[i], cCarros, aCarros, xAtor, yAtor, 15)
    if (colisao){
      VoltaInicio();
      Pontos -= 1;
    }
  }
}

function VoltaInicio(){
  yAtor = 366;
}

function IncluiPontos(){
  textAlign(CENTER);
  fill(color(255,240,60));
  textSize(25);
  text(Pontos, width / 5, 27);
}

function MarcaPontos(){
  if (yAtor < 15){
    Pontos += 1;
    VoltaInicio();
  }
}

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!