Matter.js基于 Web 的 2D 图形引擎

Matter.js 是一个基于 Web 的 2D 图形引擎。

特性：

• 物理属性(质量、面积、密度等)




• 任何凸多边形的刚体




• 稳定的叠加和 resting




• 碰撞 (broad-phase, mid-phase and narrow-phase)




• Restitution (elastic and inelastic collisions)




• Conservation of momentum




• Friction and resistance




• Constraints




• Gravity




• Composite bodies




• Sleeping and static bodies




• Events




• Rounded corners (chamfering)




• Views (translate, zoom)




• Collision queries (raycasting, region tests)




• Time scaling (slow-mo, speed-up)




• Canvas renderer (supports vectors and textures)




• WebGL renderer (requires pixi.js)




• MatterTools for creating, testing and debugging worlds




• World state serialisation (requires resurrect.js)




• Cross-browser (Chrome, Firefox, Safari, IE8+)




• Mobile-compatible (touch, responsive)




• An original JavaScript physics implementation (not a port)

示例代码：

// Matter.js module aliases

var Engine = Matter.Engine,

    World = Matter.World,

    Bodies = Matter.Bodies;



// create a Matter.js engine

var engine = Engine.create(document.body);



// create two boxes and a ground

var boxA = Bodies.rectangle(400, 200, 80, 80);

var boxB = Bodies.rectangle(450, 50, 80, 80);

var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });



// add all of the bodies to the world

World.add(engine.world, [boxA, boxB, ground]);



// run the engine

Engine.run(engine);