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.
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.