javascript - 未捕获的ReferenceError:未定义loadImage

我正在尝试通过浏览器（Chrome）运行用Java语言编写的简单游戏：

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

这是我的javascript文件，其中包含loadimage代码。这些文件都与js位于同一文件夹中。和索引文件。

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);

我完全是初学者，希望这不是一个太愚蠢的问题。

编辑：
多谢！

现在我添加了预加载功能：

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

现在有：
未捕获的ReferenceError：未定义noStroke

现在我也得到：

CORS政策已阻止从来源“ null”访问“ file：/// C：/Users/Uni/Desktop/CC%20Game%20Alessa%20Endspiel/Banana.png”中的图片：无效的响应。因此，不允许访问原始“空”。

-.-

最佳答案

根据文档https://p5js.org/reference/#/p5/loadImage

需要在loadImage函数内部调用preload()

  该图像可能无法立即用于渲染。
  确保在处理任何图像之前准备就绪
  preload（）中的loadImage（）调用。您还可以提供回调
  功能在图像准备就绪时进行处理。

你可以试试...

LoadImage

javascript - 未捕获的ReferenceError:未定义loadImage