2

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

我尝试使用 Phaser 游戏框架，但它不适用于 matter.js。例如http://bl.ocks.org/joyrexus/11220109

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()
}

我希望仅使用 matter.js 来显示预测线。

4

0 回答 0