物理引擎集成_使用Matter.js实现碰撞效果-js教程-PHP中文网

物理引擎集成_使用Matter.js实现碰撞效果

betcha

发布： 2025-12-02 20:21:00

原创

195人浏览过

Matter.js是轻量级2D物理引擎，用于实现网页中物体下落、碰撞、反弹等真实交互；首先通过CDN引入库文件，创建Engine、Render、World实例并运行；接着使用Bodies.rectangle、Bodies.circle等方法创建地面和动态物体，设置restitution、friction、density等属性控制物理行为；通过World.add将物体加入世界；可监听collisionStart事件实现碰撞响应，如播放音效或改变样式；注意避免过多活动物体、防止高速穿透、标记静态物体以优化性能；结合Canvas即可构建逼真互动场景。

物理引擎集成_使用matter.js实现碰撞效果

在网页中实现真实的物理交互效果，比如物体下落、碰撞、反弹等，Matter.js 是一个轻量且功能强大的 2D 物理引擎。它能帮助开发者快速构建具备真实感的动画和交互场景，适用于小游戏、可视化界面或动态展示。

初始化 Matter.js 环境

使用 Matter.js 前，先引入库文件。可以通过 CDN 引入：

然后创建必要的模块实例：引擎（Engine）、渲染器（Render）和世界（World）。

const { Engine, Render, Bodies, World } = Matter;

const engine = Engine.create();
const world = engine.world;

const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    wireframes: false
  }
});

Render.run(render);
Engine.run(engine);

创建可碰撞的物体

Matter.js 提供了多种方式创建刚体，例如矩形、圆形、多边形等。这些物体会受重力影响并相互碰撞。

下面创建一个地面和几个从空中掉落的方块：

// 创建地面
const ground = Bodies.rectangle(400, 600, 810, 60, { isStatic: true });

// 创建几个动态方块
const boxA = Bodies.rectangle(400, 100, 50, 50, { restitution: 0.8 }); // 回弹系数高
const boxB = Bodies.circle(350, 50, 30, { density: 0.01 }); // 圆形，密度低
const boxC = Bodies.rectangle(450, 50, 60, 30, { friction: 0.5 }); // 摩擦力适中

// 将物体加入世界
World.add(world, [ground, boxA, boxB, boxC]);

restitution 控制反弹程度，值越接近 1 反弹越明显；friction 影响滑动摩擦；density 和质量相关，影响碰撞反应。

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

153

查看详情

响应碰撞事件

你可以监听碰撞开始、持续或结束的事件，用于触发音效、计分或视觉反馈。

Matter.Events.on(engine, 'collisionStart', function(event) {
  const pairs = event.pairs;
  pairs.forEach(function(pair) {
    console.log('发生碰撞：', pair.bodyA.label, '和', pair.bodyB.label);
    // 可在此添加自定义逻辑，如播放声音、改变颜色
  });
});

每个刚体默认 label 为 "Body"，也可在创建时指定：

const ball = Bodies.circle(300, 50, 20, {
label: 'redBall'
});