Boa noite, depois de dividir o código em pastas no p5, agora o código não vai, mesmo colocando o nome das pastas no index.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Boa noite, depois de dividir o código em pastas no p5, agora o código não vai, mesmo colocando o nome das pastas no index.
Olá, Victor! Tudo bem com você?
Você poderia enviar o link do p5 com o seu código para que a gente possa visualizar melhor ?
Até breve e bons estudos!
Oi, Victor! Espero que esteja tudo bem!
Bom, observei seu código e estava um pouco confuso. Vi que você iniciou a divisão das funções em arquivos diferentes mas não chamou no arquivo html, também pude verificar que há partes da lógica faltando nas funções de movimentação e posicionamento. Por conta disso, vou separar o código completo aqui para você testar se funciona normalmente e, em caso de dúvida, posso explicar mais detalhadamente todo o funcionamento. Tudo bem?
Um exemplo, no seu arquivo de imagens, estava faltando fechar o escopo da função preload com as chaves. Também pude observar que você nomeu algumas variáveis e funções e em outra parte do código elas apareciam com pequenos equívocos, como trilha do som e trila do som. Embora sejam fatores que não interferem na lógica do código, o interpretador entende que você está chamando outra função ou variável e então o erro acontece.
Arquivo do Ator - Crie ou adicione no arquivo chamado ator.js
//código do ator
let xAtor = 100;
let yAtor = 366;
function mostraAtor(){
image(imagemDoAtor, xAtor, yAtor, 30, 30);
}
function movimentaAtor(){
if (keyIsDown(UP_ARROW)){
yAtor -= 3;
}
if (keyIsDown(DOWN_ARROW)){
yAtor += 3;
}
}Arquivo do Carro - Crie ou insira no arquivo carro.js
//código do carro
//carro 1
let xCarro = 600;
let yCarro = 40;
let velocidadeCarro1 = 2;
//carro 2
let xCarro2 = 600;
let yCarro2 = 96;
let velocidadeCarro2 = 2.5;
//carro 3
let xCarro3 = 600;
let yCarro3 = 150;
let velocidadeCarro3 = 3.2;
function mostraCarro(){
image(imagemCarro, xCarro, yCarro, 50, 40);
image(imagemCarro2, xCarro2, yCarro2, 50, 40);
image(imagemCarro3, xCarro3, yCarro3, 50, 40);
}
function movimentaCarro(){
xCarro -= velocidadeCarro1;
xCarro2 -= velocidadeCarro2;
xCarro3 -= velocidadeCarro3;
}
function voltaPosicaoInicialDoCarro(){
if (xCarro < -50){
xCarro = 600
}
if (xCarro2 < -50){
xCarro2 = 600
}
if (xCarro3 < -50){
xCarro3 = 600
}
}
Arquivo para mostrar e carregar as imagens do jogo - Crie ou adicione no arquivo imagens.js
// imagens do jogo
let imagemDaEstrada;
let imagemDoAtor;
let imagemCarro;
let imagemCarro2;
let imagemCarro3;
function preload(){
imagemDaEstrada = loadImage("imagens/estrada.png");
imagemDoAtor = loadImage("imagens/ator-1.png");
imagemCarro = loadImage("imagens/carro-1.png");
imagemCarro2 = loadImage("imagens/carro-2.png");
imagemCarro3 = loadImage("imagens/carro-3.png");
}O arquivo do Sketch é bem mais simples e possui apenas as funções que já estão construídas nos outros arquivos - Adicione no arquivo sketch.js
function setup() {
createCanvas(500, 400);
}
function draw() {
background(imagemDaEstrada);
mostraAtor();
mostraCarro();
movimentaCarro();
movimentaAtor();
voltaPosicaoInicialDoCarro();
}
E no arquivo html você irá chamar todos os outros arquivos que contruiu. Ele deverá ficar com os nomes dos outros arquivos.
<!DOCTYPE html><html><head>
<script src="p5.min.js"></script>
<script src="p5.dom.min.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
<script src="imagens.js"></script>
<script src="ator.js"></script>
<script src="carro.js"></script>
</body></html>Espero que tenha ajudado!
Fico à disposição!
Um abraço e bons estudos!
Obrigado,consegui utilizar o jogo.