对于课程中的疑问，大家可以加 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. docfx daylybuild

    参考:https://myget.org/gallery/docfx-dev 根据对应的vs或nuget版本中添加地址. PS:daylybuild可能包含很多错误哦.

  2. Android BLE 蓝牙编程（四）

    接上篇,我们已经实现了短震,长震的功能了- 现在我们需要实现点击后一直震动的功能 开始我的想法是再循环中不断执行write方法,然而这个办法行不通. 系统会报错. 那要如何实现这个想法呢?其实很简单, ...

  3. python基础-函数式编程

    python基础-函数式编程  高阶函数:map , reduce ,filter,sorted 匿名函数:  lambda  1.1函数式编程 面向过程编程:我们通过把大段代码拆成函数,通过一层一层 ...

  4. 冰冻三尺非一日之寒--rabbitMQ,redis

    第11章 1.rabbitMQ   2. redis 一.rabbitMQ: 人们写了有好多好多的开源的MQ服务器.其中大多数都是写出来用来解决特定问题的.它们不关心上面跑的是什么类型的消息,设计思想 ...

  5. ID还是普通字段做外键合适？

    ORACLE:USER表中没有ID字段,只有USERNAME做为一个唯一一字段当主键, COMMENT评论表中有一个user表的外键是用了USER表中的USERNAME字段. 我总认为这不合理,一般情 ...

  6. [Unity] 在协程中等待指定的毫秒

    先写一个静态类: /// <summary> /// 公用基础函数库 /// <remarks>作者: YangYxd</remarks> /// </sum ...

  7. java8--类加载机制与反射(java疯狂讲义3复习笔记)

    本章重点介绍java.lang.reflect包下的接口和类 当程序使用某个类时,如果该类还没有被加载到内存中,那么系统会通过加载,连接,初始化三个步骤来对该类进行初始化. 类的加载时指将类的clas ...

  8. 关于学习angularJS 的 心里路程(二)

    这一次主要的学习内容是 ng-route(本次的项目由于种种原因吧,我们采用了ui-router,而不是原生的ng-route) * 配置路由. * 注意这里采用的是ui-router这个路由,而不是 ...

  9. JSP Servlet的区别

    主要体现在两点 1.JSP是类servlet jsp说得简单点就是用另一套简单的规则写的servlet程序,它可以写java代码,还可以写html代码,JavaScript,css等等……,但是到服务 ...

  10. java读取项目根路径下和任意磁盘位置下的properties文件

    1.读取项目根路径下的properties文件比较简单也是比较常见的一种操作. 具体代码如下: package com.xuanen.util; import java.util.Properties ...