Quando eu separei o código da função preload e das imagens em outro arquivo, ocorreu um erro de referência no sketch.js, mesmo com a pasta imagens.js sendo puxada no index. Não faço ideia do que está errado e estou quase ficando maluco.
O código:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="imagens.js"></script>
<script src="sketch.js"></script>
</body>
</html>imagens.js:
let imagemDaEstrada;
let imagemDoAtor;
let imagemDoCarro;
function preload(){
imagemDaEstrada = loadImage("imagens/estrada.png");
imagemDoAtor = loadImage("imagens/ator-1.png");
imagemDoCarro = loadImage("imagens/carro-1.png");
}sketch.js:
//carro
let xCarro = 600;
let yCarro = 46;
let wCarro = 50;
let hCarro = 30;
//ator
let xAtor = 100;
let yAtor = 360;
let wAtor = 30;
let hAtor = 30;
function setup() {
createCanvas(500, 400);
}
function draw() {
background(imagemDaEstrada);
mostraAtor();
mostraCarro();
movimentaCarro();
movimentaAtor();
}
function mostraAtor(){
image(imagemDoAtor, xAtor, yAtor, wAtor, hAtor);
}
function mostraCarro(){
image(imagemDoCarro, xCarro, yCarro, wCarro, hCarro);
}
function movimentaCarro(){
xCarro -= 2
}
function movimentaAtor(){
if(keyIsDown(UP_ARROW)){
yAtor -= 2
}
if(keyIsDown(DOWN_ARROW)){
yAtor += 2
}
}e o link do projeto: https://editor.p5js.org/sl4ash/sketches/5A5O_UtDi
Agradeço desde já!
