对于课程中的疑问，大家可以加 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. JAVA的垃圾回收机制

    1. 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象的内存时,该内存便成为垃圾.JVM的 ...

  2. VMware虚拟网络编辑器

      摘要:很多已经使用VMware很久的同学,也没有接触过VMware的虚拟网络编辑器这个工具.其 实这个工具非常有用.功能也很强大. 我们都知道,安装了VMware软件后,系统中会自动出现VMnet ...

  3. 【.NET】Nuget包，把自己的dll放在云端

    //发布自己的nuget包,1.自己的api KEY,2.自己的类库,3.nuget打包工具https://npe.codeplex.com/releases/view/620126          ...

  4. 【Alpha】十天屠龙记

    团队名字: 一不小心就火了 屠龙天团少年们: 031402504 陈逸超 (组长) 031402505 陈少铭 031402511 黄家俊 031402515 翁祖航 031402516 黄瑞钰 03 ...

  5. MongoDB基础知识

    一.Mongodb简介 Mongodb是基于分布式文件存储的数据库,用C++编写: Mongodb是nosql(not-only-sql)数据库: Mongodb '无状态模式',不用去设计,直接用, ...

  6. 表格不被内容撑大，且超出的内容变为省略号（css)

    今天写代码,发现表格会被内容撑大,影响到了网页的整体布局. 百度了一解决方法,下面是代码和我的备注 table{table-layout: fixed;}        //固定表格 table td ...

  7. Linux 远程复制文件

    Linux 远程复制文件 如果想把机器A上面的dir目录下面的所有文件复制到机器B的dir目录下,我们可以使用nc命令来完成 在机器A的dir目录下面执行: tar -czf - * | nc -l ...

  8. linux之svn

    sudo apt-get install subversion 实践出真理

  9. C#把DataTable中数据一次插入数据库的方法

    现在实际的情况是这样的: 客户有一台打卡机,员工打卡的信息全部储存在打卡机的Access数据库里面,现在客户引入了一种新的管理系统,需要将Access数据库中的打卡数据同步到SQL Server数据库 ...

  10. CSS书写顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, margin, padding)3. ...