使用matter.js与p5.js时出现Uncaught ReferenceError: Matter未定义问题求助

可能的原因及排查步骤 #

1. 确认Matter.js文件路径正确 #

虽然你提到文件位置正确，仍需通过浏览器工具验证：

• 按下F12打开开发者工具，切换到网络标签页，刷新页面后查看matter.js的加载状态：
  • 若状态为404，说明路径错误，调整src属性的相对路径（比如将../matter.js改为./matter.js或对应正确的目录层级）。
  • 若状态为200，继续下一步排查。

2. 验证Matter.js是否成功加载 #

在index.html中matter.js的引入脚本后添加测试代码，确认全局Matter对象存在：

<script src="../matter.js"></script>
<script>
  console.log(Matter); // 控制台应输出Matter对象，而非undefined
</script>

如果输出undefined，说明Matter.js文件损坏或版本不兼容，重新下载官方完整版的Matter.js文件替换即可。

3. 调整脚本加载顺序 #

将sketch.js的引入移到<body>标签末尾，确保所有依赖库加载完成后再执行业务代码：

<body>
  <main>
  </main>
  <script src="sketch.js"></script>
</body>

4. 额外注意：sketch.js的变量作用域问题 #

解决Matter未定义问题后，你会遇到box1 is not defined的错误——因为box1是setup函数内的局部变量，draw函数无法访问。需要将box1声明为全局变量，同时记得将物体添加到物理世界中：

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

var box1; // 全局声明box1

function setup() {
  createCanvas(400,400);
  var engine = Engine.create();
  var world = engine.world;
  box1 = Bodies.rectangle(200, 100, 80, 80);
  Composite.add(world, box1); // 将物体添加到物理世界，否则不会模拟物理效果
  Engine.run(engine);
}

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

内容的提问来源于stack exchange，提问作者Hunter0doom