Aug 30, 2021

How To Build A Game Using React Native

React Native + Matter.js
Anurag Garg
Anurag GargSoftware Engineer

In matter.js, by applying isStatic we can make the floor and ceiling a static body that can never change position or angle and is completely fixed. With the help of this, we can now prevent the plane from falling down or going above our game area.

Now, we should make the game more interesting by adding obstacles and increase the difficulty level.



We will use Math.random for producing different sizes for every obstacle.


Update src/entities/index.js

But creating obstacles is not enough, we need to move these obstacles and create never-ending obstacles. To achieve this goal we need to use matter.js.


Update src/systems/index.js :

Matter.js has a feature called translate through which we can change the position by a given vector relative to its current position, without imparting any velocity. Due to this, we get an illusion of moving obstacles.

If the x-axis position of an obstacle body becomes negative of its width than it means it has left the screen. At that time we can set the position of that body to 2 times its original position and so on this cycle will repeat, making it a never-ending loop.

Last we want to check when a collision is made so that we can stop the game and announce the score.

Matter.Events.on help to pass a callback function whenever a particular event occurs. We can easily add a collision event with the help of this method.

Update src/systems/.js :

Update App.js :

Hire our Development experts.