Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Não entendi o erro no meu código

Uncaught TypeError: Cannot read property 'width' of undefined (carro: line 13)

> p5.js says: image() was expecting p5.Image|p5.Element for parameter #0 (zero-based index), received an empty variable instead. If not intentional, this is often a problem with scope: [https://p5js.org/examples/data-variable-scope.html] at about:srcdoc:114:3. [http://p5js.org/reference/#p5/image]

//código do carro

//carro 1 
let xCarro = 600; 
let yCarro = 40; 

//carro 2
let xCarro2 = 600; 
let yCarro2 = 96;

function mostraCarro(){ 
  image(imagemCarro, xCarro, yCarro, 50, 40);
  image(imagemCarro2, xCarro2, yCarro2, 50, 40); 
}

function movimentaCarro(){
  xCarro -= 2;
  xCarro2 -=3;
}
6 respostas

Olá José, tudo certo?

Você está usando o google chrome?

estou no google chrome

Coloca aqui o código completo, html e javascrip.

sketch.js

function setup() {
  createCanvas(500, 400);
}

function draw() {
  background(imagemDaEstrada);
  mostraAtor();
  mostraCarro();
  movimentaCarro();
  movimentaAtor();
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/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>
    <script src="carro.js"></script>
  </body>
</html>

style.css não mexi

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")
  imagemCarro = loadImage("imagens/carro-2.png")
  imagemCarro = loadImage("imagens/carro-3.png")
}

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

carro.js

//código do carro

//carro 1 
let xCarro = 600; 
let yCarro = 40; 

//carro 2
let xCarro2 = 600; 
let yCarro2 = 96;

function mostraCarro(){ 
  image(imagemCarro, xCarro, yCarro, 50, 40);
  image(imagemCarro2, xCarro2, yCarro2, 50, 40);            //o erro ocorre nessa linha
}

function movimentaCarro(){
  xCarro -= 2;
  xCarro2 -=3;
}
solução

Olá, José. Tudo bem?

No arquivo imagens.js, na função preload(), todas as imagens estão sendo armazenadas na mesma variável: imagemCarro

function preload(){
    imagemCarro = loadImage("imagens/carro-1.png"); 
    imagemCarro = loadImage("imagens/carro-2.png");
    imagemCarro = loadImage("imagens/carro-3.png");
}

Dessa forma, o erro ocorre ao invocar a função image, no arquivo carro.js e tentar passar a var imagemCarro2 como parâmetro, pois o mesmo não armazena o local da imagem do carro-2, conforme a sua intenção:

//A imagemCarro2 não está armazenando a localização da imagem: carro2
image(imagemCarro2, xCarro2, yCarro2, 50, 40);

O correto seria:

function preload(){
    imagemCarro = loadImage("imagens/carro-1.png"); 
    imagemCarro2 = loadImage("imagens/carro-2.png");
    imagemCarro3 = loadImage("imagens/carro-3.png");
}

&

image(imagemCarro, xCarro, yCarro, 50, 40);
image(imagemCarro2, xCarro2, yCarro2, 50, 40);

Espero ter ajudado. Bons estudos pra gente!

Muito obrigado!