vue引入并使用物理引擎matter.js

1.效果

2.什么是matter.js?

Matter.js 是一个开源的2D物理引擎，专为Web浏览器设计，使用JavaScript编写。它允许开发者在网页上创建包含物理交互的动态图形和游戏。Matter.js 提供了一系列强大的功能，使得模拟真实世界中的物理行为变得简单，例如碰撞检测、刚体动力学、约束条件等。
3.主要特点：

①易于集成：Matter.js 可以轻松地与现有的HTML5 Canvas或其他Web图形库（如Pixi.js）集成，为网页项目添加物理模拟功能。

高性能：优化的架构设计使其能在多种设备上流畅运行，支持大量的物理对象同时模拟。

②模块化：Matter.js 是高度模块化的，你可以选择只使用需要的功能模块，减少最终应用的体积。

③物理特性丰富：支持静态、动态、运动学等多种类型的物体，以及各种关节、碰撞检测、摩擦力、重力等物理属性的自定义。

④链式API：提供了一套直观的链式调用API，便于构建和配置物理世界及其中的对象。

⑤渲染独立：Matter.js 不直接处理渲染，而是提供了物体的位置和尺寸信息，开发者可以根据需要选择自己的渲染方式。

⑥跨平台：由于基于Web标准，Matter.js 可以运行在任何支持JavaScript的现代浏览器上，包括桌面和移动设备。

基本模块（需要其它详细api介绍文档可看）

模块名称	说明
引擎（Engine）	引擎 `Engine` 是 `Matter.js` 的核心组件，用于管理物理世界中的所有对象、计算物体的运动和相互作用。用来模拟真实环境的。
渲染器（Render）	渲染器 `Render` 用于将物理世界中的对象可视化。意思就是它能将物体渲染到屏幕上。
复合体（Composite）	是包含多个刚体和约束的容器，它们可以作为单个物理对象进行操作。
刚体（Body）	表示具有物理属性的实体，如形状、质量和速度等。刚体可以是各种形状，例如矩形、圆形、多边形等。
约束（Constraint）	用于约束刚体的相对运动，例如让两个刚体之间的距离保持不变、限制旋转等。
循环模块 (Runner)	`Runner` 用于管理和控制物理引擎的主循环。

**4.在vue项目下载依赖**

html 复制代码

npm install matter-js

5.在需要使用的页面中引入

html 复制代码

import Matter from "matter-js";

6.详细代码

html 复制代码

<template>
  <div>
    <div id="c"></div>
  </div>
</template>

<script>
import Matter from "matter-js";

export default {
  mounted() {
    this.$nextTick(() => {
      // 确保DOM已更新
      this.initMatter();
    });
  },
  methods: {
    initMatter() {
      const Engine = Matter.Engine;
      const Render = Matter.Render;
      const Bodies = Matter.Bodies;
      const Composite = Matter.Composite;
      const Runner = Matter.Runner;

      // 3. 创建引擎
      let engine = Engine.create();

      // 4. 创建渲染器，并将引擎连接到画布上
      let render = Matter.Render.create({
        element: document.getElementById("c"), // 绑定页面元素
        engine: engine, // 绑定引擎
        options: {
          wireframes: false
        }
      });

      // 5-1. 创建两个正方形
      let boxA = Bodies.rectangle(400, 200, 80, 80, {
        frictionAir: 0.1, // 设置空气阻力
        restitution: 1, // 设置弹力
        render: {
          sprite: {
            xScale: 0.3,
            yScale: 0.3,
            // 使用精灵
            texture:
              "https://img0.baidu.com/it/u=105699685,1942932424&fm=253&fmt=auto&app=138&f=JPEG" // 图片纹理位置
          }
        }
      });
      //   let boxB = Bodies.rectangle(450, 50, 80, 80);
      let boxB = Bodies.circle(450, 40, 40, {
        frictionAir: 0.1, // 设置空气阻力
        render: {
          strokeStyle: "#3490de", // 设置边框颜色
          lineWidth: 20 // 设置边框宽度
        }
      }); //圆形 x,y,半径
      //正多边形
      let polygon = Matter.Bodies.polygon(450, 200, 7, 40, {
        frictionAir: 0.1 // 设置空气阻力
      });
      //   三角形
      let triangle = Matter.Bodies.trapezoid(450, 200, 80, 80, 1, {
        mass: 0.4 //质量 mass 质量越大，惯性越大
        // frictionAir: 0.1 // 设置空气阻力
      });
      // 定义顶点
      const vertices = [
        { x: 0, y: 0 },
        { x: 50, y: 0 },
        { x: 50, y: 50 },
        { x: 25, y: 75 },
        { x: 0, y: 50 }
      ];

      // 自定义多边形
      const trapezoid = Matter.Bodies.fromVertices(450, 100, vertices);
      // 5-2. 创建地面，将isStatic设为true，表示物体静止
      let ground = Bodies.rectangle(400, 610, 810, 60, {
        isStatic: true,
        render: {
          fillStyle: "#cccccc"
        }
      });
      // 创建鼠标实例
      let mouse = Matter.Mouse.create(render.canvas);

      // 给鼠标添加约束
      let mouseConstraint = Matter.MouseConstraint.create(engine, {
        mouse: mouse,
        constraint: {
          stiffness: 0.2,
          render: {
            visible: false // 默认为 true，会显示鼠标拖拽轨迹
          }
        }
      });
      // 6. 将所有物体添加到世界中
      Composite.add(engine.world, [
        boxA,
        boxB,
        triangle,
        polygon,
        trapezoid,
        ground,
        mouseConstraint
      ]);

      // 7. 执行渲染操作
      Render.run(render);

      // 8. 创建运行方法
      var runner = Runner.create();

      // 9. 运行渲染器
      Runner.run(runner, engine);
    }
  }
};
</script>