如何用p5.js与matter.js重置出界小球的位置？

问题描述 #

我希望当小球飞出屏幕或position.y < 0时（后续会添加其他边界条件），将其重置回初始位置。尝试通过移除出界小球来模拟该逻辑，但发现小球并未被真正移除——仅处于冻结状态（其他元素不再与其碰撞），同时测试用的console.log会无限输出小球的y坐标。

原代码 #

Ball类代码 #

import Matter from 'matter-js'

export default class Ball {
    constructor(x, y, r, world) {
        this.body = Matter.Bodies.circle(x, y, r);
        Matter.World.add(world, this.body);
        this.r = r;
    }

    show(p) {
        const pos = this.body.position;
        const angle = this.body.angle;
        p.push();
        p.translate(pos.x, pos.y);
        p.rotate(angle);
        p.rectMode(p.CENTER);
        p.fill("white");
        p.strokeWeight(0);
        p.circle(0, 0, this.r);
        p.pop();
    }
}

App组件代码 #

import React, { useRef, useEffect } from 'react';
import p5 from 'p5';
import Matter from 'matter-js'
import './App.css'
import Ball from "./components/Ball.jsx";
import Boundary from "./components/Boundary.jsx";

let Engine = Matter.Engine;
let World = Matter.World;
let Mouse = Matter.Mouse;
let MouseConstraint = Matter.MouseConstraint;
let ground, box, ball, world, engine, mCon, leftWall, rightWall;

function sketch(p) {
    p.setup = function() {
        const canvas = p.createCanvas(p.windowWidth, p.windowHeight);
        engine = Engine.create();
        world = engine.world;

        const canvasMouse = Mouse.create(canvas.elt);
        canvasMouse.pixelRatio = p.pixelDensity();
        const options = {
            mouse: canvasMouse,
        }
        mCon = MouseConstraint.create(engine, options);

        ground = new Boundary(p.width/2, p.height-10, p.width, 20, world);
        leftWall = new Boundary(10, p.height/2, 20, p.height, world);
        rightWall = new Boundary(p.width - 10, p.height/2, 20, p.height, world);
        ball = new Ball(50, p.height - 100, 25, world);

        World.add(world, [mCon,
        ]);
    }

    p.windowResized = function() {
        p.resizeCanvas(p.windowWidth, p.windowHeight);
    }

    p.draw = function () {
        p.background(51);
        Engine.update(engine);
        rightWall.show(p);
        leftWall.show(p);
        ground.show(p);
        ball.show(p);

        if (ball.body.position.y < 0) {
            console.log(ball.body.position.y);
            World.remove(world, ball.body);
        }
    }
}

function App() {
    const p5Container = useRef();

    useEffect(() => {
        const p5Instance = new p5(sketch, p5Container.current);

        return() => {
            p5Instance.remove();
        }
    }, []);

    return (
        <div ref={p5Container} className="container">
        </div>
    );
}

export default App;

问题原因 #

• 仅从Matter.js的World中移除了小球的body，但ball对象本身依然存在，p.draw()循环里仍会调用ball.show(p)绘制它，同时持续检查ball.body.position.y，导致无限打印日志。
• 即使移除了body，原ball对象的body属性并未被清除，依然能读取到位置数据，所以判断条件会一直触发。

解决方案 #

方案1：直接重置小球位置（推荐，性能更优） #

不需要移除小球，直接重置其物理属性到初始状态，避免对象销毁重建的开销。

步骤1：给Ball类添加reset方法

import Matter from 'matter-js'

export default class Ball {
    constructor(x, y, r, world) {
        this.body = Matter.Bodies.circle(x, y, r);
        Matter.World.add(world, this.body);
        this.r = r;
        // 保存初始位置，方便后续重置
        this.initialX = x;
        this.initialY = y;
    }

    show(p) {
        const pos = this.body.position;
        const angle = this.body.angle;
        p.push();
        p.translate(pos.x, pos.y);
        p.rotate(angle);
        p.rectMode(p.CENTER);
        p.fill("white");
        p.strokeWeight(0);
        p.circle(0, 0, this.r);
        p.pop();
    }

    // 新增重置方法
    reset() {
        // 重置位置
        Matter.Body.setPosition(this.body, { x: this.initialX, y: this.initialY });
        // 重置速度（避免保留之前的运动状态）
        Matter.Body.setVelocity(this.body, { x: 0, y: 0 });
        // 重置角速度（如果不需要旋转可以保留）
        Matter.Body.setAngularVelocity(this.body, 0);
    }
}

步骤2：修改App组件的draw函数

p.draw = function () {
    p.background(51);
    Engine.update(engine);
    rightWall.show(p);
    leftWall.show(p);
    ground.show(p);
    ball.show(p);

    if (ball.body.position.y < 0) {
        // 调用重置方法
        ball.reset();
        console.log('小球已重置回初始位置');
    }
}

方案2：彻底移除后重新创建小球 #

如果确实需要销毁原小球再创建新实例，需确保清空原对象并避免无效操作：

修改App组件的代码

// 提取初始参数为全局变量，方便复用
let initialBallX = 50;
let initialBallR = 25;
let initialBallY;

function sketch(p) {
    p.setup = function() {
        const canvas = p.createCanvas(p.windowWidth, p.windowHeight);
        engine = Engine.create();
        world = engine.world;

        const canvasMouse = Mouse.create(canvas.elt);
        canvasMouse.pixelRatio = p.pixelDensity();
        const options = {
            mouse: canvasMouse,
        }
        mCon = MouseConstraint.create(engine, options);

        ground = new Boundary(p.width/2, p.height-10, p.width, 20, world);
        leftWall = new Boundary(10, p.height/2, 20, p.height, world);
        rightWall = new Boundary(p.width - 10, p.height/2, 20, p.height, world);
        initialBallY = p.height - 100;
        ball = new Ball(initialBallX, initialBallY, initialBallR, world);

        World.add(world, [mCon]);
    }

    p.draw = function () {
        p.background(51);
        Engine.update(engine);
        rightWall.show(p);
        leftWall.show(p);
        ground.show(p);

        // 仅当ball存在时才执行绘制和判断
        if (ball) {
            ball.show(p);
            if (ball.body.position.y < 0) {
                console.log('小球已移除');
                // 从物理世界移除body
                World.remove(world, ball.body);
                // 清空原ball对象
                ball = null;
                // 重新创建新的小球实例
                ball = new Ball(initialBallX, initialBallY, initialBallR, world);
            }
        }
    }
}

效果验证 #

• 方案1：小球出界后会立即回到初始位置，保留原对象，物理引擎继续正常驱动。
• 方案2：小球出界后被销毁，同时创建新的小球实例，效果与重置一致，但会有对象创建的额外开销。

内容的提问来源于stack exchange，提问作者Worker1432