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!