寫在前面

matter.js 是一個(gè)2D的javascript物理引擎，主頁展示了一些demo。
這里介紹如何創(chuàng)建一個(gè)基本的物理世界。

用法

1. html文件中引入

<script src="../build/matter.js"></script>

2. 創(chuàng)建引擎，渲染器，添加世界，生成身體模型。

var Engine=Matter.Engine,
    Render=Matter.Render,
    World=Matter.World,
    Bodies=Matter.Bodies；

Engine是引擎，Render是渲染器，World是表演環(huán)境，Bodies可以用來創(chuàng)建各種形狀的物體。

3. 創(chuàng)建引擎實(shí)例與引擎世界。

var engine=Engine.create(),
    world=engine.world；

4.創(chuàng)建渲染器實(shí)例。

var render=Render.create({
                 engine:engine,
                 element:document.body
           });

render(渲染器)將要渲染的物理引擎是之前所創(chuàng)建的engine，而渲染的對(duì)象是html網(wǎng)頁的body。

5. 運(yùn)行渲染器，運(yùn)行引擎。

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

Engine和Render是依附于Matter的，而運(yùn)行run（）方法的參數(shù)是它們各自所創(chuàng)建的實(shí)例。

至此，在網(wǎng)頁這測(cè)試，如無意外，可看到一個(gè)黑色的canvas。

基本的matter.js世界

6.添加物體

var boxA=Bodies.rectangle(500,170,40,260）；

由rectangle可以看出，這將是一個(gè)矩形物體。

7.將物體添加到World世界之中。

World.add(world,boxA);

這時(shí)，再刷新，可以看到一個(gè)矩形的物體從生成的地方開始自由落體。

生成了一個(gè)矩形

參數(shù)(500,170,40,260）中，前兩個(gè)是物體坐標(biāo)，后兩個(gè)分別是寬度和長度。
需要注意的是，這里的坐標(biāo)系統(tǒng)中，500和170是矩形的中心所在位置，而html的canvas中坐標(biāo)描述的是矩形的左上角。**

8.生成地面。

var ground=Bodies.rectangle(400,600,600,100,{isStatic:true});

需要修改前面的代碼，將ground加入到World中。World.add(world,[boxA,ground]);地面ground同樣是一個(gè)矩形，不過，可以看到它在生成是比boxA多了一個(gè)參數(shù)，這個(gè)參數(shù)是個(gè)json對(duì)象，字面上很好理解，將isStatic設(shè)為true，即是靜止的。
這時(shí)候，再刷新頁面，就是這樣的，一個(gè)簡(jiǎn)單的世界，物體遵循自由落體規(guī)律。

純潔的世界

寫在后面

這是一個(gè)簡(jiǎn)單的世界，在這個(gè)基礎(chǔ)上，可以擴(kuò)展出更復(fù)雜的功能。mater.js 還是蠻好用的。