- 准备工作 ----- 创建引擎世界并渲染
- 记得引入 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]); //分别加入引擎世界