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

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

<button id="red-friction">Reduce Friction</button>

<button id="res-friction">Restore Friction</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, {

  render: {

    sprite: {

      texture: "https://opengameart.org/sites/default/files/styles/medium/public/SoccerBall_0.png",

      xScale: 0.4,

      yScale: 0.4

    }

  }

});

​

​

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.04, y: 0});

});

​

​

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

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

});

​

document.querySelector('#red-friction').addEventListener('click', function () {

  ball.friction = 0.05;

  ball.frictionAir = 0.0005;

  ball.restitution = 0.9;

});

​

document.querySelector('#res-friction').addEventListener('click', function () {

  ball.friction = 0.1;

  ball.frictionAir = 0.001;

  ball.restitution = 0;

});

​

​

​