12
respostas

Freeway - minha modificação e alguns problemas

Pessoal, estou modificando o código da aula, e agora, o personagem dá respawn sempre na mesma posição, e não na mesma coordenada y em que ele estava ao "morrer".

Além disso, criei movimentos para cima, para baixo, e para os lados.

Agora, estou tentando limitar os movimentos da vaquinha.

Conseguindo tudo, menos a parte direita.

Alguém poderia me ajudar, por gentileza? :)

Segue o código do arquivo ator.js:

// Código do ator

let xAtor = 100;
let yAtor = 366;
let colisao = false;
let meusPontos = 0;

function mostraAtor() {
  image(imagemDoAtor, xAtor, yAtor, 30, 30); // X, Y, largura, altura
}

function movimentaAtor() {
  if(keyIsDown(UP_ARROW)) {
    if(podeSeMoverCima())
    yAtor -= 3;
  }
  if(keyIsDown(DOWN_ARROW)) {
    if(podeSeMoverBaixo())
    yAtor += 3;
  }
  if(keyIsDown(LEFT_ARROW)) {
    if(podeSeMoverEsquerda())
    xAtor -= 3;
  }
  if(keyIsDown(RIGHT_ARROW)) {
    if(podeSeMoverDireita())
    xAtor += 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], comprimentoCarros, alturaCarros, xAtor, yAtor, 15) // diametro um pouquinho menor para uma melhor colisão
    if(colisao) {
      voltaAtorParaPosicaoInicial();
      somDaColisao.play();
      if(meusPontos > 0){  // Perguntar no fórum da Alura - Só assim funcionou
        meusPontos -= 1;
      }  
    }
  }
}

function voltaAtorParaPosicaoInicial() {
  yAtor = 366;
  xAtor = 100; // minha adição
}

function incluiPontos() {
  textAlign(CENTER);
  fill(color(255,240,60));
  textSize(25);
  text(meusPontos, width / 5, 28);
}

function marcaPonto() {
  if(yAtor < 15) {
    meusPontos += 1;
    somDosPontos.play();
    voltaAtorParaPosicaoInicial();
  }
}

function podeSeMoverBaixo() { 
  return yAtor < 366;
}

function podeSeMoverCima() {
  return yAtor < 400
}

function podeSeMoverEsquerda() {
  return xAtor > 0
}

function podeSeMoverDireita() {
   return xAtor < 500
}

Abraços!

P.S.: o link para o o projeto é esse:

https://editor.p5js.org/marcos.zy/sketches/zsPiHzIYv

12 respostas

Consegui pessoal. :)

Era o valor na coordenada X. Dei um print no xAtor, e observei os valores "correndo" pela tela, até conseguir capturar o direito. Aí usei o valor.

O projeto está nesse link:

https://editor.p5js.org/marcos.zy/full/MuxtTXNGH

Agora, a vaquinha se movimenta, além de para cima e para baixo, também para a esquerda e para a direita. Ela também não atravessa nenhuma borda, seja inferior, superior, ou laterais. :)

Só uma pergunta, por gentileza. O instrutor usou esse valor:

voltaAtorParaPosicaoInicial();
      somDaColisao.play();
      if(meusPontos > 0){
        meusPontos -= 1;

E em meus testes, inicialmente, tinha usado if(meusPontos < ) . Por que do maior que zero, aí? :)

Opa, outra dúvida...rsrs Desculpem o flood aqui. :)

Mexendo no código do carro.js , obtive um comportamento inesperado. Agora, os carros se movimentam ao contrário. Tentei verificar onde é o problema, mas não consigo. :(

Olá, seu código esta correto na lógica faltou um pequeno detalhe.

Esse trecho você pode colocar um console.log(xAtor); para ver a posição da vaca, ela para de se mexer no 502, parece que ela continua infinito na tela, mas na verdade ela para fora da tela.

function podeSeMoverDireita() {
   return xAtor < 500
}

Isso ocorre porque a vaca tem 30px de largura, faltou levar esses 30px em consideração na hora de verificar a colisão com a parede.

Formas funcionais:

function podeSeMoverDireita() {
   return xAtor+30 < 500
}

Ou:

function podeSeMoverDireita() {
   return xAtor < 470
}

Opa, valeu Felipe. :)

Acabei usando o valor 472...rsrs

Sobre o movimento contrário dos carros, após as mexidas que dei no código, inesperadamente agora estando se movendo ao contrário, você teria ideia do que está causando isso?

Eai, então, verifique aqui, parece tudo normal, você conseguiu arrumar?

Então, Felipe, não consegui. Estranho os carros estarem vindo da direção contrária, né? :(

Estranho mesmo, vou deixar o link do meu caso queira comparar o códigos

https://editor.p5js.org/felipedeandrademendonca/sketches/-ZmplKQpP

É, ok, meu caro. Muito obrigado. :)

Quer dizer, agora parece estar tudo certo.

Só não entendi muito bem a parte abaixo:

voltaAtorParaPosicaoInicial();
      somDaColisao.play();
      if(meusPontos > 0){
        meusPontos -= 1;

Em meus testes, inicialmente, tinha usado if(meusPontos < 0) . Por que do maior que zero, aí?

Tive que fazer assim para funcionar, de forma idêntica ao que o instrutor fez.

Porque você não quer que o jogador tenha pontos negativos.

Então, se o pontos do jogador for maior que quero "if(meusPontos > 0)" ele pode perder pontos se não for maior que zero ele não deve perder pontos.

Caso fosse "if(meusPontos < 0)" ele marcaria pontos normalmente, mas não perderia pontos ao colidir com os carros, ele só irá entrar nessa condição se os pontos fossem números negativos.

Ah, entendi. Obrigado, Felipe. :)

Agora sim. ;)

Valeu mesmo, meu caro!

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