<button id="force">Apply Horizontal Force</button>

<button id="vforce">Apply Vertical Force</button>

<br>

body {

  text-align: center;

  margin: 0px;

}

​

canvas {

  margin: 0px 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;

}

const Engine = Matter.Engine,

  Render = Matter.Render,

  World = Matter.World,

  Bodies = Matter.Bodies,

  Body = Matter.Body;

​

const engine = Engine.create();

​

const render = Render.create({

  element: document.body,

  engine: engine,

  options: {

    width: 800,

    height: 300,

    wireframes: false

  }

});

​

const topWall = Bodies.rectangle(400, 10, 800, 20, { isStatic: true });

const leftWall = Bodies.rectangle(10, 150, 20, 300, { isStatic: true });

const rightWall = Bodies.rectangle(790, 150, 20, 300, { isStatic: true });

const bottomWall = Bodies.rectangle(400, 290, 800, 20, { isStatic: true });

​

const ball = Bodies.circle(90, 280, 20);

​

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

​

Engine.run(engine);

​

Render.run(render);

​

document.querySelector('#force').addEventListener('click', function () {

    Body.applyForce( ball, {x: ball.position.x, y: ball.position.y}, {x: 0.05, y: 0});

});

​

​

document.querySelector('#vforce').addEventListener('click', function () {

    Body.applyForce( ball, {x: ball.position.x, y: ball.position.y}, {x: 0, y: -0.05});

});

​

​

​