调用Matter.Body.rotate()后Matter.js+p5.js游戏无法启动求助

算力阿峰

2026-8-6

问题：Matter.js调用Body.rotate后游戏页面空白

在基于Matter.js和p5.js开发的游戏中，添加Body.rotate(paddle0, Math.PI/6);后游戏直接空白，无报错，移除该行则恢复正常，问题出在两个核心错误：

1. Body.rotate的参数类型错误

Matter.js的Body.rotate()方法需要传入Matter.js原生的Body对象，但你传入的是自定义的Paddle类实例。正确的做法是传入实例的body属性：

// 原错误代码
Body.rotate(paddle0, Math.PI/6);
// 修正后
Body.rotate(paddle0.body, Math.PI/6);

2. Paddle类构造函数的options格式错误

在Paddle类的构造函数中，创建矩形Body时的选项对象格式有误，你把options作为嵌套属性传入，而Matter.js期望直接平铺restitution等属性：

// 原错误代码
this.body = Matter.Bodies.rectangle(x, y, w, h, {options,collisionFilter: {mask: 0x0004},});
// 修正后（展开options合并属性）
this.body = Matter.Bodies.rectangle(x, y, w, h, {
  ...options,
  collisionFilter: {
    mask: 0x0004
  }
});

修正后的完整关键代码

Sketch.js（旋转逻辑修正）

paddle0 = new Paddle(100,100, PADDLE_WIDTH, PADDLE_LENGTH);
// 传入正确的Body对象
Body.rotate(paddle0.body, Math.PI/6);

paddle.js（构造函数选项修正）

class Paddle {
  constructor(x, y, w, h) {
    const options = {
      restitution: 0.5
    };
    // 修正选项对象格式，确保Matter.js能正确解析
    this.body = Matter.Bodies.rectangle(x, y, w, h, {
      ...options,
      collisionFilter: {
        mask: 0x0004
      }
    });
    Matter.World.add(world, this.body);
    this.w = w;
    this.h = h;
  }

  show() {
    const pos = this.body.position;
    const angle = this.body.angle;
    push();
    translate(pos.x, pos.y);
    rotate(angle);
    fill(255);
    rectMode(CENTER);
    rect(0,0, this.w, this.h);
    pop();
  }
}