Javascript 使用matter.js预测轨迹线

我正在构建我的第一个little matter.js游戏-PartyGolf。游戏玩家类似于愤怒的小鸟。我想显示一条预测轨迹线，以显示球将去哪里，但我无法在matter.js中找到它的可能性

我尝试了Phaser游戏框架，但matter.js不起作用。比如说

render（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
this.context.drawImage（this.background，0，this.canvas.width，this.canvas.height/2）；
for（设i=0，len=this.bounders.length；i

---

我只希望matter.js显示预测线。

这可以通过向量来完成。瞄准角度和速度。你必须研究向量，把运动分解成不同的部分，然后很容易预测弹丸的运动方向。这是一点物理知识，但可以通过一些文书工作来获得好的结果。检查以获取代码，即使它们正在使用向量

render() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.context.drawImage(this.background, 0, 0, this.canvas.width, this.canvas.height / 2);
    for (let i = 0, len = this.boundaries.length; i < len; i++) {
        this.context.beginPath();
        let vertices = this.boundaries[i].body.vertices;
        this.context.moveTo(vertices[0].x, vertices[0].y);
        for (let j = 1; j < vertices.length; j++) {
            this.context.lineTo(vertices[j].x, vertices[j].y);
        }
        this.context.lineTo(vertices[0].x, vertices[0].y);
        this.context.fillStyle = '#000';
        this.context.fill();
        this.context.stroke();
        this.context.closePath();
    }

    for (let i = 0, len = this.balls.length; i < len; i++) {
        let ball = this.balls[i];
        ball.addTrailPoint(ball.body.position.x, ball.body.position.y);

        this.context.lineWidth = ball.radius * 2;
        this.context.beginPath();
        this.context.lineCap = 'round';
        this.context.lineJoin = 'round';
        this.context.moveTo(ball.trailPoints[0][0], ball.trailPoints[0][1]);
        this.context.globalAlpha = 0.3;
        this.context.strokeStyle = ball.color;
        for (let j = 1, len = ball.trailPoints.length; j < len; j++) {
            this.context.lineTo(ball.trailPoints[j][0], ball.trailPoints[j][1]);
        }
        this.context.stroke();
        this.context.closePath();
        this.context.lineWidth = 1;
        this.context.globalAlpha = 1;

        this.context.beginPath();
        this.context.arc(ball.body.position.x, ball.body.position.y, ball.radius, 0, Math.PI * 2);
        this.context.lineWidth = 2;
        this.context.fillStyle = ball.color;
        this.context.strokeStyle = '#000';
        this.context.fill();
        this.context.stroke();
        this.context.closePath();
    }

    this.context.lineWidth = 0;
    this.context.strokeStyle = '#000';

    window.requestAnimationFrame(this.render.bind(this));
}

run() {
    this.render()
}