# Create Game using Matter.JS with React


**Matter.JS** is a 2D rigid body physics engine written in JavaScript. helps in easily simulating 2D physics in the browser. It is supported in almost all browsers. We can create 2D games very easily using this lib.

***Following Properties are must create a Matter js game***

**Engine** \= Matter.Engine, //it is a physics engine that needs to run create the layout by combining all bodies

**Render** \= Matter.Render, //it is used to render your canvas layout inside your div/element

**World** \= Matter.World, //it is the whole area where your rendered game/canvas will show

**Bodies** \= Matter.Bodies // it is used to create a different kind of elements inside the canvas

#### **Steps to create a simple demo with React**

Step 1. In Your React App Install package

```
npm install matter-js
```

Step 2. Create a component and import Matter.JS

import Matter from 'matter-js'

Steps 3. Create an Element/div where you want to show the game/layout like below


```
render() {

return (

<div ref={this.simDivObj} >

</div>

)

}

``` 


Step 4. Create ref of this div like


```
simDivObj = React.createRef();

``` 


Step 5. Inside componentDidMount life cycle create


```
componentDidMount() {

var Engine = Matter.Engine,

Render = Matter.Render,

World = Matter.World,

Bodies = Matter.Bodies

var engine = Engine.create({

});

//*create renderer on screen*

var render = Render.create({

element: this.simDivObj.current,

engine: engine,

options: {

width: 800,

height: 400,

wireframes: false,

}

});

var boxA = Bodies.rectangle(200, 60, 80, 80);

var ballA = Bodies.circle(180, 100, 40, 10);

var ballB = Bodies.circle(230, 40, 40, 10);

var ballC = Bodies.rectangle(260, 60, 80, 70, {

//*isStatic: true,*

restitution: 1,

render: { fillStyle: 'blue' }

})

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

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

Engine.run(engine);

Render.run(render);

}

``` 


Now Run NPM START.

Ref- [m](https://brm.io/matter-js)atter.js website

Code is available [https://codepen.io/anilvermaspeaks/pen/LYbxyKY](https://codepen.io/anilvermaspeaks/pen/LYbxyKY)

Happy Coding….