Skip to main content

matter.js

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
  <script src="https://unpkg.com/xnew@2.3.x/dist/xnew.js"></script>
  <script src="https://unpkg.com/xnew@2.3.x/dist/addons/xmatter.js"></script>
  <style>
    body {
      margin: 0;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id="main" style="position: relative; width: 100%; height: 100%;"></div>
  <script>
    xnew('#main', (self) => {
      const screen = xnew(xnew.Screen, { width: 800, height: 400 });

      const matter = xmatter.setup({
        render: Matter.Render.create({
          canvas: screen.canvas, engine: Matter.Engine.create(), options: {
            width: screen.canvas.width, height: screen.canvas.height, wireframes: false,
          }
        })
      });

      const constraint = Matter.MouseConstraint.create(matter.engine, { element: screen.canvas });
      Matter.Composite.add(matter.engine.world, constraint);

      xnew(MatterContents);

      const button = xnew({ tagName: 'button', style: 'position: absolute; top: 0;' }, 'reset');
      button.on('click', () => { button.emit('+reset'); });
    });

    function MatterContents(self) {
      self.on('+reset', () => { self.reboot(); });

      xnew(Rectangle, 400, 200, 80, 80);
      xnew(Polygon, 450, 50, 6, 40);
      xnew(Circle, 350, 50, 40);
      xnew(Rectangle, 400, 400, 800, 20, { isStatic: true });
    }

    function Rectangle(self, ...args) {
      xmatter.nest(Matter.Bodies.rectangle(...args));
    }
    function Circle(self, ...args) {
      xmatter.nest(Matter.Bodies.circle(...args));
    }
    function Polygon(self, ...args) {
      xmatter.nest(Matter.Bodies.polygon(...args));
    }
  </script>
</body>
</html>