Javascript 皮棉罐'；t读取$（'；）的属性。使用MatterJS lib添加圆（'；）/undefined

我正在尝试创建新的形状，当您按下该形状的按钮时，这些形状会掉落到画布中。我正在使用CDN。只有两个页面是我的索引和app.js。我的画布与按钮一起出现，第一个球落下，但每当我按下按钮时，什么也没有发生。控制台显示“$”未定义。非常感谢您的帮助。此外，在我的索引页面上，我的CDN位于脚本标记中，位于我的app.js脚本标记之前

var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies;

var engine = Engine.create();

var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 400,
    wireframes: false
  }
});

var topWall = Bodies.rectangle(400, 0, 810, 30, { isStatic: true });
var leftWall = Bodies.rectangle(0, 200, 30, 420, { isStatic: true });
var ball = Bodies.circle(460, 10, 40, 10);
var bottomWall = Bodies.rectangle(400, 400, 810, 30, { isStatic: true });

World.add(engine.world, [topWall, leftWall, ball, bottomWall]);

Engine.run(engine);

Render.run(render);


var addCircle = function () {
  return Bodies.circle(Math.random() * 400 + 30, 30, 30);
};

var addSquare = function () {
  return Bodies.rectangle(Math.random() * 400 + 30, 30, 60, 60);
};

var addRect = function () {
  return Bodies.rectangle(Math.random() * 400 + 30, 30, 100, 60);
};

这就是我的问题所在。我也遵循了教程

$('.add-circle').on('click', function () {
  World.add(engine.world, addCircle());
});

$('.add-square').on('click', function () {
  World.add(engine.world, addSquare());
})

$('.add-rect').on('click', function () {
  World.add(engine.world, addRect());
})