Matter.Bodies --- 案例

1. 准备工作  ----- 创建引擎世界并渲染

•    记得引入  matter.js

var Engine = Matter.Engine,
  Render = Matter.Render,
  Runner = Matter.Runner,
  Common = Matter.Common,
  MouseConstraint = Matter.MouseConstraint,
  Mouse = Matter.Mouse,
  World = Matter.World,
  Vertices = Matter.Vertices,
  Svg = Matter.Svg,
  Bodies = Matter.Bodies;

// 创建引擎
var engine = Engine.create(), //创建引擎
  world = engine.world;   // 引擎世界

// 渲染引擎
var render = Render.create({ //创建渲染
  element: document.body, //在body中渲染
  engine: engine, //绑定引擎对象
  options: {
    width: 800,
    height: 600
  }
});
Render.run(render);  // 渲染跑起来

// create runner
var runner = Runner.create(); //创建运行对象
Runner.run(runner, engine); //运行 引擎

•   执行后应该是这样

 

• 分别用Bodies 的方法创建物体

                          //x   //y  //半径   //是否静止  (options 即最后一个参数 可以不传)
var circle = Bodies.circle(100, 100, 50, { isStatic: true })               //球体
                                 //x   //y  //宽 //高   //是否静止
var rectangle = Bodies.rectangle(200, 100, 50,100, { isStatic: true })     //矩形
                              //x   //y  //边的个数 //半径   //是否静止
var polygon3 = Bodies.polygon(300, 100, 3,50, { isStatic: true })          //三角形
var polygon8 = Bodies.polygon(400, 100, 8,50, { isStatic: true })          //八角形
                                //x   //y //宽 //高  //角度   //是否静止
var trapezoid = Bodies.trapezoid(500, 100,50,50,0.5,{ isStatic: true })    //梯形

World.add(world, [circle,rectangle,polygon3,polygon8,trapezoid]);   //分别加入引擎世界