cat bounce

custom 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>

CSS

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

Babel + JSX

Matter.use('matter-collision-events');
console.log(Matter);
var cats = [
"https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_1.png", 
"https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_2.png", 
"https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_3.png", 
"https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_4.png", 
"https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_5.png", 
"https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_6.png"
];

let Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies,
      MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse;
let engine = Engine.create();

// INIT
function init() {
  $("canvas").remove();
  let width = $(window).width();
  let height = $(window).height();
  let vmin = Math.min(width, height);
  World.clear(engine.world);
  Engine.clear(engine);
  engine = Engine.create()
  let render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      wireframes: false,
      background: 'transparent',
      width: width,
      height: height
    }
  });
  World.add(engine.world, [
    Bodies.rectangle(width / 2, height + 50, width, 100, {
      isStatic: true
    }),
    Bodies.rectangle(width / 2, -50, width, 100, {
      isStatic: true
    }),
    Bodies.rectangle(-50, height / 2, 100, height, {
      isStatic: true
    }),
    Bodies.rectangle(width + 50, height / 2, 100, height, {
      isStatic: true
    })
  ]);
  let cArr = [];
  cats.forEach((i, v) => {
    cArr[v] = Bodies.rectangle(width / v, height - height, 100, 100, {
    restitution: 0,
    friction: 0,
    airFriction: 0,
      render: {
        sprite: {
          texture: i,
          // xScale: 0.4,
          // yScale: 0.4
        }
     ...