Uncaught error: cannot read property x of undefined

Question

我正在使用 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 , pointA.y, 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, 200, 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 ();
    }
}

Answer 1

问题在于您如何通过新的 SlingShot 传递和读取 stoneObj class。在 SlingShot class 中，您正在尝试读取未定义的 pointA 的属性 x，可能是因为 stoneObj 没有 return 您期望的位置。

尝试记录该部分以查看问题所在。

Answer 2

创建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,
        pointB: pointBInput,
        stiffness: 0.2,
        length: 20

    }

Uncaught error: cannot read property x of undefined

Uncaught error: cannot read property x of undefined

javascript

p5.js

matter.js