Pessoal, alguém poderia me ajudar?
Estou dividindo o código em vários arquivos, e agora, não é mais exibido o ator, a "vaquinha".
Seguem os códigos e os respectivos arquivos:
imagens.js
// Variáveis
let imagemDaEstrada;
let imagemDoAtor;
let imagemCarro;
function preload() {
imagemDaEstrada = loadImage("imagens/estrada.png");
imagemDoAtor = loadImage("imagens/ator-1.png");
imagemCarro = loadImage("imagens/carro-1.png");
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/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>
</body>
</html>
sketch.js
// Variáveis de carros
let xCarro = 600;
function setup() {
createCanvas(500, 400);
}
function draw() {
background(imagemDaEstrada);
mostraCarro();
movimentaCarro();
}
function mostraCarro() {
image(imagemCarro, xCarro, 40, 50, 40);
}
function movimentaCarro() {
xCarro -= 2;
}
ator.js
// Variáveis do ator
let yAtor = 366;
let xAtor = 100;
function mostraAtor() {
image(imagemDoAtor, xAtor, yAtor, 30, 30); // X, Y, largura, altura
}
function movimentaAtor() {
if(keyIsDown(UP_ARROW)) {
yAtor -= 3;
}
if(keyIsDown(DOWN_ARROW)) {
yAtor += 3;
}
if(keyIsDown(LEFT_ARROW)) {
xAtor -= 3;
}
if(keyIsDown(RIGHT_ARROW)) {
xAtor += 3;
}
}
Tudo estava funcionando bem, até eu começar a criar arquivos e mudar código de lugar, seguindo as instruções do instrutor.
E, sim, já subi as imagens também para o P5.JS...rsrsrs :)
Grato pela ajuda.