cat bounce

dom renderer example

by Nick Hulea

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>
<script src="https://jsbin-user-assets.s3.amazonaws.com/naeluh/matter-dom-plugin.min.js"></script>
<script src="https://jsbin-user-assets.s3.amazonaws.com/naeluh/matter-collision-events.min.js"></script>
<div id="debug"></div>
<img id="cat1" class="cat" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_1.png" matter>
<img id="cat2" class="cat" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_2.png" matter>
<img id="cat3" class="cat" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_3.png" matter>
<img id="cat4" class="cat" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_4.png" matter>
<img id="cat4" class="cat" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_5.png" matter>
<img id="cat6" class="cat" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_6.png" matter>
<div id="ceiling" matter></div>
<div id="left-wall" matter></div>
<div id="right-wall" matter></div>
<div id="ground" matter></div>

CSS

body {
  overflow: hidden;
  margin: 0px;
  width: 100vw;
  height: 100vh;
}

#ceiling {
  width: 100%;
  height: 1px;
  background-color: transparent;
}

#left-wall {
  width: 1px;
  height: 100%;
  background-color: red;
}

#right-wall {
  width: 1px;
  height: 100%;
  background-color: red;
}

#ground {
  width: 100%;
  height: 1px;
  background-color: red;
}

.cat {
  width: auto;
  height: auto;
}

#ball>div {}

Babel + JSX

(function() {
  Matter.use('matter-collision-events');
  Matter.use('matter-dom-plugin');
  console.log(Matter);
  var Engine = Matter.Engine;
  var Runner = Matter.Runner;
  var RenderDom = Matter.RenderDom;
  var Body = Matter.Body;
  var DomBodies = Matter.DomBodies;
  var MouseConstraint = Matter.MouseConstraint;
  var DomMouseConstraint = Matter.DomMouseConstraint;
  var Mouse = Matter.Mouse;
  var Events = Matter.Events;
  var World = Matter.World;
  var Vector = Matter.Vector;
  var Vertices = Matter.Vertices;
  var Bounds = Matter.Bounds;

  var engine = Engine.create();
  var world = engine.world;
  var runner = Runner.create();
  Runner.run(runner, engine);


  var render = RenderDom.create({
    engine: engine
  });
  RenderDom.run(render);

  var worldWidth = render.mapping.WORLD.width;
  var worldHeight = render.mapping.WORLD.height;
  var worldCenter = render.mapping.WORLD.center;
  var viewHeight = render.mapping.VIEW.height;
  var viewWidth = render.mapping.VIEW.width;
  var viewCenter = render.mapping.VIEW.center;
  console.log('cats here');
  console.log(render);


  /**
   * Add components
   */


  var ceiling = DomBodies.create({
    Dom: {
      render: render,
      element: document.querySelector('.cat')
    },
    el: '#ceiling',
    render: render,
    position: {
      x: viewCenter.x,
      y: 0
    },
    bodyType: 'block',
    isStatic: true,
    restitution: 0,
    friction: 0,
    airFriction: 0,
  });
  var leftWall = DomBodies.create({
    Dom: {
      render: render,
      element: document.querySelector('.cat')
    },
    el: '#left-wall',
    render: render,
    position: {
      x: 0,
      y: viewCenter.y
    },
    bodyType: 'block',
    isStatic: true,
    restitution: 0,
    friction: 0,
    airFriction: 0,
  });
  var rightWall = DomBodies.create({
    Dom: {
      render: render,
      element: document.querySelector('.cat')
    },
    el: '#right-wall',
    render: render,
    position: {
      x: viewWidth,
      y:...