p5 image loading problems

I'm learning p5/javscript and have decided to start off with a Space Invaders project. My problem is that when I play my project my player sprite doesn't show up. The code for my player is below.

let playerImg;
let playerX = 942;
let playerY = 873;
let bulletImg;
let bulletX = playerX;
let bulletY = playerY;

function preload(){
  playerImg = loadImage('sprites/player.png');
}

function draw(){
  image(playerImg, 942, 873, 170,132);
}

function move(){
  if(keyCode == LEFT_ARROW){
    playerX - 5 = playerX;
  }

  if(keyCode == RIGHT_ARROW){
      playerX + 5 = playerX;
    }
  }

function shoot(){
  if(keyCode == SPACE){
      bulletY + 766;
    }
}

Those questioning the shoot function I have that covered in another script. Here's my script for the background, in case that's what is causing the problem.

let backgroundimg;


function preload(){
  backgroundimg = loadImage('sprites/background.png');

}

function setup() {
  createCanvas(windowWidth,windowHeight)
}

function draw() {

  image(backgroundimg, 0, 0, windowWidth, windowHeight);

}

Upvotes: 2

Views: 84

Answers (1)

Vivek
Vivek

Reputation: 66

You cant have 2 draw or preload functions. In this case, you have 2 draw functions. Only The second draw function in which you draw the background will be called.

So the code will be

let playerImg;
let playerX = 942;
let playerY = 873;
let bulletImg;
let bulletX = playerX;
let bulletY = playerY;
let backgroundimg;

function preload(){
  backgroundimg = loadImage('sprites/background.png');
  playerImg = loadImage('sprites/player.png');
}

function setup() {
  createCanvas(windowWidth,windowHeight)
}

function draw(){
  image(backgroundimg, 0, 0, windowWidth, windowHeight);
  image(playerImg, 942, 873, 170,132);
}

function move(){
  if(keyCode == LEFT_ARROW){
    playerX - 5 = playerX;
  }

  if(keyCode == RIGHT_ARROW){
      playerX + 5 = playerX;
    }
  }

function shoot(){
  if(keyCode == SPACE){
      bulletY + 766;
    }
}

Upvotes: 1

Related Questions