未捕获的错误：无法读取未定义的属性 x

问题描述

我正在使用 matter.js 和 p5.js 制作这个游戏，你必须使用弹弓和石头让芒果从树上掉下来。代码看起来有点像这样：

SlingShot.js：

    constructor(bodyAInput,pointBInput) {
        var options = {
            bodyA: bodyAInput,pointB: pointBInput,stiffness: 0.2,length: 20

        }
        this.pointB = pointBInput;

        this.constraint = Matter.Constraint.create(options);
        World.add(world,this.constraint);

    }
    detach() {
        this.constraint.bodyA = null;
    }
    attach(bodyInput) {
        this.constraint.bodyA = bodyInput;
    }
    display() {
        
            var pointA = this.constraint.bodyA.position;
            var pointB = this.pointB;

            line(pointA.x -40,pointA.y,pointB.x - 40,pointB.y);
            line(pointA.x,pointB.x,pointB.y - 3);
            
      
    }
}

Sketch.js（出现错误的相关部分）：

function setup() {
    createCanvas(1300,600);
    engine = Engine.create();
    world = engine.world;

    mango1 = new mango(1100,100,30);
    mango2 = new mango(1000,150,30);
    mango3 = new mango(900,200,30);
    mango4 = new mango(950,250,30);
    mango5 = new mango(1200,30);


    stoneObj = new Stone(230,400);
    treeObj = new tree(1050,580);
    groundobject = new ground(width / 2,600,width,20);
    //console.log(SlingShot);
    launcherObject = new SlingShot( stoneObj,{ x:230,y: 400 });

    Engine.run(engine);

}

在创建launcherObject时，显示如下错误：

matter.js:7769 Uncaught TypeError: Cannot read property 'x' of undefined
    at Object.Vector.add (matter.js:7769)
    at Object.Constraint.create (matter.js:3597)
    at new SlingShot (slingShot.js:12)
    at setup (sketch.js:32)
    at _setup (p5.js:58811)
    at _runIfPreloadsAreDone (p5.js:58752)
    at p5._decrementPreload (p5.js:58761)
    at Image.img.onload (p5.js:74562)

重点是，为什么会显示错误？

编辑：这是 Stone.js 的代码：

class Stone{
    constructor(x,y){
        var options = {
            isstatic: true
        }
        this.body = Bodies.circle(x,y,10,options);
        World.add(world,this.body);
        this.image = loadImage("images/stone.png");
    }
    display(){
        push ();
        image(this.image,this.body.position.x,this.body.position.y,20,20);
        pop ();
    }
}

解决方法

创建 SlingShot 时，stoneObj 是构造函数的第一个参数

 let launcherObject = new SlingShot( stoneObj,{ x:230,y: 400 });

第一个参数是 bodyAInput，它被分配给 options.bodyA，它需要是一个 Body 对象。

constructor(bodyAInput,pointBInput) {
    var options = {
        bodyA: bodyAInput,pointB: pointBInput,stiffness: 0.2,length: 20

    }

Stone 不是 Body 对象，但它有一个 Body，因此需要像这样设置选项：

constructor(bodyAInput,pointBInput) {
    var options = {
        bodyA: bodyAInput.body,length: 20

    }

,

问题在于您如何通过新的 SlingShot 类传递和读取 StoneObj。在 SlingShot 类中，您试图读取未定义的 pointA 的属性 x，可能是因为 StoneObj 没有返回您期望的位置。

尝试记录该部分以查看发生了什么问题。