Ball Drop with setion matter.js

ball-drop-with-setion-matter-js.markdown

Ball Drop with setion matter.js

A Pen by learyjk on CodePen.

License.

index.html

<div class="section-space">HI</div>
<div class="section-space is-blue">HI</div>
<div class="section-space" id="matter-window">

</div>
<div class="section-space is-blue">HI</div>

script.js

var canvas = document.getElementById("matter-window");

$("#matter-window").one("inview", function (event, isInView) {
  if (isInView) {
    //alert("inview");
    // module aliases
    w = window.innerWidth;
    h = window.innerHeight;

    var Engine = Matter.Engine,
      Render = Matter.Render,
      Runner = Matter.Runner,
      Bodies = Matter.Bodies,
      Composite = Matter.Composite,
      MouseConstraint = Matter.MouseConstraint,
      Mouse = Matter.Mouse;

    // create an engine
    var engine = Engine.create();

    // create a renderer
    var render = Render.create({
      element: canvas,
      engine: engine,
      options: {
        width: w,
        height: h,
        wireframes: false,
        background: "red"
      }
    });

    var circA = Bodies.circle(100, 10, 20, {
      render: { fillStyle: "orange" },
      restitution: 0.5
    });
    var ground = Bodies.rectangle(w / 2, h + 10, 50000, 60, {
      isStatic: true
    });

    // add all of the bodies to the world
    Composite.add(engine.world, [circA, ground]);

    // run the renderer
    Render.run(render);

    // create runner
    var runner = Runner.create();

    // run the engine
    Runner.run(runner, engine);

    // add mouse control
    var mouse = Mouse.create(render.canvas),
      mouseConstraint = MouseConstraint.create(engine, {
        mouse: mouse,
        constraint: {
          stiffness: 0.2,
          render: {
            visible: true
          }
        }
      });

    Composite.add(engine.world, mouseConstraint);

    // keep the mouse in sync with rendering
    render.mouse = mouse;
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>

style.css

.section-space {
  background-color: transparent;
  border-style: solid;
  border-width: 1px;
  height: 300px;
}

.is-blue {
  background-color: lightblue;
}

#matter-window {
  height: 100vh;
}

initial working