<button class="add-circle">Add a Circle</button>
<button class="add-square">Add a Square</button>
<button class="add-rect">Add a Rectangle</button>
<br>
body {
  text-align: center;
  margin: 10px;
}

canvas {
  margin: 20px auto;
}

button {
  color: white;
  background: orange;
  border: none;
  padding: 10px;
  font-weight: 300;
  font-size: 1.2em;
  font-family: 'Lato';
  margin: 10px;
  cursor: pointer;
  outline: none;
}
var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies;

var engine = Engine.create();

var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 400,
    wireframes: false
  }
});

var topWall = Bodies.rectangle(400, 0, 810, 30, { isStatic: true });
var leftWall = Bodies.rectangle(0, 200, 30, 420, { isStatic: true });
var ball = Bodies.circle(460, 10, 40, 10);
var bottomWall = Bodies.rectangle(400, 400, 810, 30, { isStatic: true });

World.add(engine.world, [topWall, leftWall, ball, bottomWall]);

Engine.run(engine);

Render.run(render);


var addCircle = function () {
 return Bodies.circle(Math.random()*400 + 30, 30, 30);
};

var addSquare = function () {
 return Bodies.rectangle(Math.random()*400 + 30, 30, 60, 60);
};

var addRect = function () {
 return Bodies.rectangle(Math.random()*400 + 30, 30, 100, 60);
};


$('.add-circle').on('click', function () {
    World.add(engine.world, addCircle());
});

$('.add-square').on('click', function () {
    World.add(engine.world, addSquare());
})

$('.add-rect').on('click', function () {
    World.add(engine.world, addRect());
})



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.11.0/matter.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js