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

MIT
JavaScript
跨平台
2015-01-20
红薯

拥抱开源,微软做了哪些努力?一大波开源技术成果将亮相微软在线技术峰会>>>

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);

A pyramid of blocks

加载中

评论(0)

暂无评论

暂无资讯

暂无问答

2015年10个最佳Web开发JavaScript库

现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中。我们可以参考网上的指导来获取构建代码项目的各种必要信息。如果你是搞Web开发的,那么大多更喜欢支持前端开发的...

2015/03/14 22:00
72
0
[JavaScript]-JavaScript的this原理.

一、问题的由来 学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。 var obj = { foo: function () {} }; var foo = obj.foo; // 写法一 obj.foo() // 写法二 foo(...

2018/06/27 15:45
705
0
JS杂谈系列-js的认识和js相关技术的了解

什么是js,js类库,js的mv*框架,js的ui框架,js的插件,服务端js,混杂app中的js等

2015/08/16 14:23
528
0
JS调用PHP 和 PHP调用JS的方法举例

1、JS方式调用PHP文件并取得PHP中的值 举一个简单的例子来说明: 如在页面test_json1中用下面这句调用: <script type="text/javascript" src="http://callmewhy.sinaapp.com/index.php/test/t...

2014/04/11 11:57
5.3W
0
JS引擎是如何工作的?从调用堆栈到Promise

摘要: 理解 JS 引擎运行原理。 作者:前端小智 原文:JS引擎:它们是如何工作的?从调用堆栈到Promise,需要知道的所有内容 Fundebug经授权转载,版权归原作者所有。 为了保证可读性,本文采用...

2019/07/02 10:00
73
0
JavaScript 学习(2)

由于前篇文章有些过长,遂新开一文。

2014/10/01 08:06
472
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

2012/04/06 11:37
7K
9
用JavaScript实现JavaScript文件的版本管理和加载

受《大公司怎样开发和部署前端代码?》这篇文章的启发,结合自己的项目实践,创建了一套JavaScript文件的版本管理和加载的机制,虽然比较粗糙,但是解决了不少实际的问题。

2015/04/14 12:40
1.7K
0
Cocos2d-JS中JavaScript继承

JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求。由于Cocos2d-JS引擎是从Cocos2d-x演变而来的,在Cocos2d-J...

2015/03/17 08:15
60
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部