JSFiddle - React, Tailwind, and code Playground

by Ehsan Ziya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.8.0-alpha/matter.js"></script>
<div id='bla'></div>

JavaScript

// Matter.js module aliases
var Engine = Matter.Engine;
var World = Matter.World;
var Bodies = Matter.Bodies;
var Render = Matter.Render;

var render = Render.create({
    options: {
        width: 200,
        height: 200
    },
    element: document.body
});

var engine = Engine.create(document.body, {
    enableSleeping: false,
    render: render
});

// create two boxes and a ground

var boxC = Bodies.rectangle(100, 100, 90, 40, {
    render: {
        fillStyle: '#F0F8FF'
    }
});

console.log(boxC);
var floor = Bodies.rectangle(100, 180, 200, 1, {
    isStatic: true
});

engine.world.gravity.y = 0.08;

// add all of the bodies to the world
World.add(engine.world, [floor, boxC]);

// run the engine
Engine.run(engine);