Unbekannter Fehler in P5.js

Question

Ich habe ein Problem, den Fehler in meinem Code zu finden. Ich mache meine eigene Version von Space Invaders für ein Schulprojekt. P5 zeigt keine Fehler, aber wenn ich einen Testlauf des Codes mache, bekomme ich nur einen weißen Bildschirm. Ich brauche dafür extra Augen. Jede Hilfe wird geschätzt. Vielen Dank!!

//initializes bullets 
var bullets = { 
    x: new Array(), 
    y: new Array(), 
    shot: new Array() 
} 
//initializes the ship 
var ship = { 
    x: 625, 
    y: 475, 
    photo: loadImage("download.png") 
} 

function setup() { 
    createCanvas(1350,650); 

    //bullet1 
    append(bullets.x, ship.x); 
    append(bullets.y, ship.y); 
    append(bullets.shot, false); 

    //bullet2 
    append(bullets.x, ship.x); 
    append(bullets.y, ship.y); 
    append(bullets.shot, false); 

    //bullet3 
    append(bullets.x, ship.x); 
    append(bullets.y, ship.y); 
    append(bullets.shot, false); 
} 

//Controls 
function updateShip() 
{ 
    //Right movement 
    if (keyIsDown(RIGHT_ARROW)) { 
     ship.x = ship.x+ 10; 
     if (ship.x >= 1350) { 
      ship.x = ship.x - 11; 
     } 
    } 
    //Left movement 
    if (keyIsDown(LEFT_ARROW)) { 
     ship.x = ship.x - 10; 
     if (ship.x <= 0) { 
      ship.x = ship.x + 11; 
     } 
    } 
    //Up movement 
    if (keyIsDown(UP_ARROW)) { 
     ship.y = ship.y - 10; 
     if (ship.y <= 350) { 
      ship.y = ship.y + 11; 
     } 
    } 
    //Down movement 
    if (keyIsDown(DOWN_ARROW)) { 
     ship.y = ship.y + 10; 
     if (ship.y >= 580) { 
      ship.y = ship.y - 11; 
     } 
    } 
} 
function drawShip() 
{ 
    ship.photo.resize(75,75); 
    image(ship.photo,ship.x-ship.photo.width/2,ship.y+ship.photo.height/2); 
} 
//Drawing the bullets 
function drawBullets() { 
    fill(255); 
    rect(bullets.x[0],bullets.y[0], 5, 10); 
    rect(bullets.x[1],bullets.y[1], 5, 10); 
    rect(bullets.x[2],bullets.y[2], 5, 10); 
} 

//Controls the bullet movement 
function updateBullets() { 
    bullets.y[0] = bullets.y[0] + 10; 
} 

//Checks if bullet is shot 
function checkShoot() { 
    if (keyIsPressed && keyCode === 32) { 
     bullets.y[0] = ship.y; 
    } 
} 

function draw() { 
    background(0); 

    updateShip(); 
    drawShip(); 
    checkShoot(); 
    updateBullets(); 
    drawBullets(); 
} 

Answer 1

Sie sollten die Funktion loadImage() in die setup() -Funktion Ihrer Skizze verschieben. Gefällt Ihnen dieses

var ship; 
function setup() { 
    createCanvas(1350,650); 
    ship = { 
     x: 625, 
     y: 475, 
     photo: loadImage("download.png") 
    } 
    //something 
}