JavaScript – Matter.js the 2D physics engine . – free-tutorials.org news free tutorials source code development scripts

The tutorial today is about Matter.js – 2D physics engine for the web.
Let’s try one simple example.
You need a folder named project with index.html file and a js folder with the index.js file.
The content of index.html is:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>A Basic Matter.js Example</title>
</head>
<body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.11.0/matter.min.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

<!DOCTYPE html>

<html >

<head>

<title>A Basic Matter.js Example</title>

</head>

<body>

</body>

</html>

The content of the index.js file from js folder is:

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 boxA = Bodies.rectangle(400, 200, 20, 20);
var ballA = Bodies.circle(400, 250, 30, 10);
var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

World.add(engine.world, [boxA, ballA, ground]);

Engine.run(engine);

Render.run(render);

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 boxA = Bodies.rectangle(400, 200, 20, 20);

var ballA = Bodies.circle(400, 250, 30, 10);

var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

World.add(engine.world, [boxA, ballA, ground]);

Engine.run(engine);

Render.run(render);

Let’s see the result of this script with codepen.io web tool.
You can try all demos.

Leave a Reply Cancel reply