对于课程中的疑问，大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦，群里还有不少技术大拿、行业大牛 可以一起探讨问题，我们也会安排专业的技术老师为大家答疑解惑呢!

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>碰撞的小球</title>

<style type="text/css" media="screen">

*{ padding: 0; margin: 0; font-family: sans-serif; }

body {

background: #222;

}

canvas:active {

cursor: pointer;

cursor: -webkit-grabbing;

}

#stage {

margin: 12px;

width: 100%;

}

</style>

</head>

<body>

<div style="text-align:center"><div id="stage"></div></div>

<script src='http://cdn.bootcss.com/matter-js/0.5.0-alpha/matter.min.js'></script>

<script type="text/javascript">

(function() {

this.Cradle = {};

var Engine = Matter.Engine,

Gui = Matter.Gui,

World = Matter.World,

Bodies = Matter.Bodies,

Body = Matter.Body,

Composite = Matter.Composite,

Composites = Matter.Composites,

Common = Matter.Common,

Constraint = Matter.Constraint;

var _engine;

Cradle.init = function() {

var container = document.getElementById('stage');

// engine options - these are the defaults

var options = {

positionIterations: 5,

velocityIterations: 3,

enableSleeping: false,

timeScale: 1

};

_engine = Engine.create(container, options);

Engine.run(_engine);

var _world = _engine.world;

World.clear(_world);

Engine.clear(_engine);

_engine.enabled = true;

_engine.enableSleeping = false;

_engine.world.gravity.y = 1;

var renderOptions = _engine.render.options;

renderOptions.wireframes = true;

renderOptions.showAxes = true;

renderOptions.showPositions = true;

var cradle = Composites.newtonsCradle(240, 10, 6, 30, 200);

World.addComposite(_world, cradle);

Body.translate(cradle.bodies[0], { x: -180, y: -100 });

};

if (window.addEventListener) {

window.addEventListener('load', Cradle.init);

}

else if (window.attachEvent) {

window.attachEvent('load', Cradle.init);

}

})();

</script>

</body>

</html>

关注“ web前端学习部落22群”群号 领取前端免费学习资料及工具！

【web前端学习部落22群】分享 碰撞的小球开源小案例的更多相关文章

  1. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

  2. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  3. 立方体旋转 【web前端学习部落22群120342833】

    效果: HTML部分: <body class="body"> <div class="rect-wrap">   <!-- // ...

  4. web前端学习部落22群 明白何谓Margin Collapse

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  5. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  6. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  7. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  8. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

  9. web前端学习就这9个阶段，你属于哪个阶段？

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

随机推荐

  1. Nginx高级使用

    1.用户认证 客户端访问限制deny 客户端地址: 拒绝访问allow 客户端地址: 允许访问 rpm -q httpd-tools yum -y install httpd-tools user h ...

  2. SQL 优化tips

    1. 陷阱, 1)几个表进行join,然后过滤 等价于 2)分别过滤为小表后,再join? 并不完全.2)确实比1)效率高,但要注意一些NULL值过滤.否则2)得到的结果比1)多

  3. hihoCoder #1445 : 后缀自动机二·重复旋律5

    #1445 : 后缀自动机二·重复旋律5 时间限制:10000ms 单点时限:2000ms 内存限制:256MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为一段数构成的数 ...

  4. matlab进阶：常用功能的实现，常用函数的说明

    常用功能的实现 获取当前脚本所在目录 current_script_dir = fileparts(mfilename('fullpath')); % 结尾不带'/' 常用函数的说明 bsxfun m ...

  5. Java+jquery实现裁剪图片上传到服务器

    大体分两步: 1.利用jquery裁剪图片,把裁剪到的几个点传入后端 2.利用前端传入的几个点,来裁剪图片 首先,用到一个jquery的插件 imgAreaSelect 实例及插件下载地址:http: ...

  6. WebService如何调试及测试工具

    http://www.cnblogs.com/zfanlong1314/archive/2012/04/06/2434788.html 通常,我们在Visual Studio里调试ASP.NET网站, ...

  7. python基础2（数据类型、数据运算、for循环、while循环、列表）

    1.数据类型 python使用对象模型来存储数据,每一个数据类型都有一个内置的类,每新建一个数据,实际就是一个对象,即所有数据都是对象. 对象的3个特性: 身份:即内存地址,可以用id()来获取 类型 ...

  8. js获取当前坐标

    <script type="text/javascript"> var position_option = {enableHighAccuracy: false,max ...

  9. yuv420p转为emgucv的图像格式Emgu.CV.Image<Bgr, Byte>

    GCHandle handle = GCHandle.Alloc(yuvs, GCHandleType.Pinned); Emgu.CV.Image<Bgr, Byte> image = ...

  10. 深入理解IoC/DI

    ------------------------------------------------------------------------ 理解IoC/DI 1.控制反转 --> 谁控制谁 ...