Uncaught ReferenceError ReferenceError: Matter is not defined

Question

I am using matter.js and p5.js but I seem to get this error when I debug sketch.js. Both files are in their correct location and correctly referenced but Matter still seems to be undefined.

Index.html

<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #1b1b1b;
    }
  </style>
  <script src="../matter.js"></script>
  <script src="../p5.js"></script>
  <script src="../addons/p5.sound.js"></script>
  
  <script src="sketch.js"></script>
  
</head>

<body>
  <main>
  </main>
</body>

</html>

sketch.js

var Engine = Matter.Engine,
    //Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

function setup() {
  createCanvas(400,400);
  var engine = Engine.create();
  var world = engine.world;
  var box1 = Bodies.rectangle(200, 100, 80, 80);
  Engine.run(engine);
}

function draw() {
  background(51); // sets background color
  rect(box1.position.x, box1.position.y, 80, 80);

}

Answer 1

It seems the required javascript files are not being recognised. I have reproduced your example using cdn of the libraries you actually wanted to use.

sketch.js

 let Engine = Matter.Engine, //Render = Matter.Render, Runner = Matter.Runner, Bodies = Matter.Bodies, Composite = Matter.Composite; let world; let box1; function setup() { createCanvas(400, 400); let engine = Engine.create(); world = engine.world; box1 = Bodies.rectangle(200, 100, 80, 80); Engine.run(engine); } function draw() { background(51); // sets background color rect(box1.position.x, box1.position.y, 80, 80); }

 <html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>p5.js example</title> <style> body { padding: 0; margin: 0; background-color: #1b1b1b; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script> <script src="sketch.js"></script> </head> <body> <main> </main> </body> </html>

Uncaught ReferenceError ReferenceError: Matter is not defined

Question

1 answers

solution1
1 2022-12-10 22:26:44

Uncaught ReferenceError ReferenceError: Matter is not defined

Question

1 answers

solution1 1 2022-12-10 22:26:44

solution1
1 2022-12-10 22:26:44