Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Ator não movimenta

Olá, depois que eu coloquei o código de colisão, collideRectCircle, o ator do meu jogo não se movimenta. E parece que é a função da colisão, porque eu comentei no draw ( ) para testar se era algo errado antes do código e a vaquinha se movimenta sem collideRectCircle ativado, quando descomento o meu ator não se movimenta. O código do ator:

// ator let yAtor = 366; let xAtor = 100; let colisao = false;

function mostraAtor (){ image (imagemDoAtor, xAtor, yAtor, 30, 30); }

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

function verificaColisao(){ for (let i = 0; i < imagemCarros.length; i = i+1){ colisao = collideRectCircle(xCarros[i], yCarros[i], larguraCarro, alturaCarro, yAtor, xAtor, 30); } if (colisao){ colidiu(); } }

function colidiu(){ yAtor = 366; }

O link do projeto no p5: https://editor.p5js.org/catharina.bri/sketches/b22jaaild

3 respostas
solução!

Olá, Catharina! Espero que esteja tudo bem por aí!

Observei seu projeto e pude perceber que você chamou a função colidiu() na draw(), e isso acabou comprometendo o funcionamento adequado do código. Para resolver basta retirar a colidiu() da draw(), o código ficará assim:

function draw() {
  background(imagemDaEstrada);
  mostraAtor();
  mostraCarro();
  movimentaCarro();
  movimentaAtor();
  voltaPosicaoInicialDoCarro();
  verificaColisao();

}

A colidiu() precisa ser retirada porque ela tem a função de manter o ator sempre na mesma posição, que é o yAtor = 366, olha só:

function colidiu(){
  yAtor = 366;
}

Dessa forma, a draw() fica repetindo continuamente essa função e o ator não sai do lugar.

Ah, não esqueça de, após dar o start no jogo, você precisa clicar com o cursor no ambiente de preview do seu projeto para que o ator se mova pela tela.

E por qual motivo esse bug acontece?

Isso ocorre porque a function draw(), que é padrão do p5.js , tem uma função específica na biblioteca. Vamos ver a definição da documentação:


Chamada diretamente após setup (), a função draw () executa continuamente as linhas de código contidas em seu bloco até que o programa seja interrompido ou noLoop () seja chamada. A draw () é chamada automaticamente e nunca deve ser chamada explicitamente.

Deve sempre ser controlada com noLoop (), redraw () e loop (). Depois que noLoop () interrompe a execução do código em draw (), redraw () faz com que o código dentro de draw () seja executado uma vez e loop () fará com que o código dentro de draw () retome a execução continuamente. (...)

Só pode haver uma função draw () para cada sketch, e draw () deve existir se você quiser que o código seja executado continuamente ou para processar eventos como mousePressed (). Às vezes, você pode ter uma chamada vazia para draw () em seu programa, (...)

(...)

Mas o que isso significa?

A function draw() é a função que faz a "mágica acontecer". É essa função já pré-pronta na biblioteca p5.js que irá desenhar os elementos no ambiente de visualização. Um aspecto interessante da função é que ela funciona como se possuísse um loop , o que faz com que o código escrito em seu escopo seja executado continuamente.


Vou deixar aqui os links que redirecionam para a fonte de informações, que é a sessão de referência do p5.js

Reference do p5.js que explica detalhadamente o que é a function draw()

Home do p5 com informações sobre a biblioteca

Espero que tenha conseguido ajudá-la!

Em caso de dúvidas ou se quiser compartilhar seu progresso, estamos à disposição!

Um grande abraço e até breve!

Nossa não acredito que era isso, eu quebrando a cabeça para ver onde errei. É que eu estava na cabeça que toda a função criada deveria ir para o draw (). Muito obrigada, já resolvi o problema.

Oii tudo bem?estou extamente com o mesmo problema da camila.pessoa,porem eu não inserir o colidiu() na draw(), se puderem ajudar,segue os links a seguir. https://preview.p5js.org/m.eduarda/present/drZcHvATK https://editor.p5js.org/m.eduarda/sketches/drZcHvATK

Insira aqui a descrição dessa imagem para ajudar na acessibilidade