<button class="linear">Linear Velocity</button>
<button class="angular">Angular Velocity</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,
  Body = Matter.Body;

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, 50, 720, 20, { isStatic: true });
var leftWall = Bodies.rectangle(50, 210, 20, 300, { isStatic: true });
var rightWall = Bodies.rectangle(750, 210, 20, 300, { isStatic: true });
var bottomWall = Bodies.rectangle(400, 350, 720, 20, { isStatic: true });

var box = Bodies.rectangle(90, 120, 40, 40);

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

Engine.run(engine);

Render.run(render);

$('.linear').on('click', function () {
    Body.setVelocity( box, {x: 10, y: -10});
});

$('.angular').on('click', function () {
    Body.setAngularVelocity( box, Math.PI/6);
});


External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

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