码迷,mamicode.com
首页 > Web开发 > 详细

【web前端学习部落22群】分享 碰撞的小球开源小案例

时间:2016-12-28 12:38:32      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:tac   课程   listener   mil   ons   dia   问题   ddc   option   

对于课程中的疑问,大家可以加 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群】分享 碰撞的小球开源小案例

标签:tac   课程   listener   mil   ons   dia   问题   ddc   option   

原文地址:http://www.cnblogs.com/ZZZAB/p/6228774.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!