首页 > 代码库 > 【web前端学习部落22群】分享 碰撞的小球开源小案例
【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问，大家可以加 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://www.mamicode.com/‘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群】分享 碰撞的小球开源小案例