Alessa Klinger Alessa Klinger - 3 years ago 240
HTML Question

Uncaught ReferenceError: loadImage is not defined

I'm trying to run this simple Game written in Javascript from my browser (Chrome):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="p5.js"></script>
<script src="CC Game Alessa Endspiel.js"></script>


</head>
<body>

</body>
</html>


Here is my javascript file which includes the loadimage Code. The Files are all in the same Folder as the js. and index file.

var gamestate = "intro";
//Früchte
var Strawberry = loadImage("Strawberry.png");
var Banana = loadImage("Banana.png");
var Coconut = loadImage("Coconut.png");
var Grapes = loadImage("Grapes.png");
var Pineapple = loadImage("Pineapple.png");
var Mango = loadImage("Mango.png");
var Raspberry = loadImage("Raspberry.png");
var Background1 = loadImage("Background1.jpg");
var Baba2 = loadImage("Baba2.png");
var StartScreen = loadImage("StartScreen.jpg");
var StartButton = loadImage("StartButton.png");
var TimeClock = 520;
var Princess = loadImage("indianprincess.jpg");

var player_img = image(Baba2,mouseX,470,19,19);


Im totally beginner and hope this is not a too stupid question >.<

edit:
thx a lot !

now i added preload function:

var Strawberry;
var Banana;
var Coconut;
var Grapes;
var Pineapple;
var Mango;
var Raspberry;
var Background1;
var Baba2;
var StartScreen;
var StartButton;
var TimeClock;
var Princess;

var player_img;


function preload() {

Strawberry = loadImage("Strawberry.png");
Banana = loadImage("Banana.png");
Coconut = loadImage("Coconut.png");
Grapes = loadImage("Grapes.png");
Pineapple = loadImage("Pineapple.png");
Mango = loadImage("Mango.png");
Raspberry = loadImage("Raspberry.png");
Background1 = loadImage("Background1.jpg");
Baba2 = loadImage("Baba2.png");
StartScreen = loadImage("StartScreen.jpg");
StartButton = loadImage("StartButton.png");
Princess = loadImage("indianprincess.jpg");

}
function setup() {
image(Strawberry, 0, 0);
image(Banana, 0, 0);
image(Coconut, 0, 0);
image(Grapes, 0, 0);
image(Pineapple, 0, 0);
image(Mango, 0, 0);
image(Raspberry, 0, 0);
image(Background1, 0, 0);
image(Baba2, 0, 0);
image(StartScreen, 0, 0);
image(StartButton, 0, 0);
image(Princess, 0, 0);
player_img = image(Baba2,mouseX,470,19,19);
}


now there is :
Uncaught ReferenceError: noStroke is not defined

and also now i get:

Access to Image at 'file:///C:/Users/Uni/Desktop/CC%20Game%20Alessa%20Endspiel/Banana.png' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

-.-

Answer Source

As per the docs https://p5js.org/reference/#/p5/loadImage

loadImage needs to be called inside an preload() function

The image may not be immediately available for rendering If you want to ensure that the image is ready before doing anything with it, place the loadImage() call in preload(). You may also supply a callback function to handle the image when it's ready.

Can you try that...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download