Making a simple game engine with React Native

Introduction
Get started
A brief introduction to the React Native game engine
Let's build a snake game in React Native
Creating Game Entities
Game Logic

Move the snake head
"Game Over!" Condition
Food
Controlling the Snake
Tail function

Conclusion

Introduction

Today we will learn how to make a game using React Native. Because we are using React Native, the game will be cross-platform, meaning you can play the same game on Android, iOS, and the web. However, today we will focus only on mobile devices. So let's get started.

Get started

To make any game, we need a loop that updates our game as we play. This loop is optimized to run the game smoothly, and for this we will use the React Native game engine.

First let's create a new React Native app using the following command.

npx react-native init ReactNativeGame

Once the project is created, we need to add a dependency so we can add the game engine.

npm i -S react-native-game-engine

This command will add the React Native game engine to our project.

So, what kind of game are we going to make? To keep it simple, let's make a game of a snake that eats scraps of food and grows in length.

A brief introduction to the React Native game engine

React Native Game Engine is a lightweight game engine. It includes a component that allows us to add arrays of objects as entities so that we can operate on them. To write our game logic, we use an array of System Props, which allows us to manipulate entities (game objects), detect touches, and many other awesome details that help us make a simple, functional game.

Let's build a snake game in React Native

To make a game, we need a canvas or container into which we will add our game objects. To make a canvas, we simply add a view component with a style, like this.

// App.js     
<View style={styles.canvas}>
</View>

We can add our styles like this.

const styles = StyleSheet.create({
  canvas:
    flex: 1,
    backgroundColor: "#000000",
    alignItems: "center",
    justifyContent: "center",
  }
});

In the canvas, we'll use the GameEngine component and some styles from the React Native Game Engine.

import { GameEngine } from "react-native-game-engine";
import React, { useRef } from "react";
import Constants from "./Constants";


export default function App() {
  const BoardSize = Constants.GRID_SIZE * Constants.CELL_SIZE;
  const engine = useRef(null);
  return (
    <View style={styles.canvas}>
      <GameEngine
              ref={engine}
              style={{
                width: BoardSize,
                height: BoardSize,
                flex: null,
                backgroundColor: "white",
              }}
            />
    </View>
);

We also use the useRef() React Hook to add a ref to the game engine for later use.

We also created a Constants.js file at the root of the project to store our constant values.

// Constants.js
import { Dimensions } from "react-native";
export default {
  MAX_WIDTH: Dimensions.get("screen").width,
  MAX_HEIGHT: Dimensions.get("screen").height,
  GRID_SIZE: 15,
  CELL_SIZE: 20
};

You'll notice that we're making a 15 by 15 grid where our snake will move.

At this point our game engine is set up to display the snake and its food. We need to add entities and props to the GameEngine, but before we do that, we need to create a snake and food component to render on the device.

Creating Game Entities

Let's make the snake first. Snakes are divided into two parts, the head and the body (or tail). Now we will make the snake's head, and we will add the snake's tail later in this tutorial.

To make the snake's head, we will make a Head component in the components folder.

As you can see, we have three components: Head , Food , and Tail . We will look at the contents of each of these files one by one in this tutorial.

In the Head component, we'll create a view with some styles.

import React from "react";
import { View } from "react-native";
export default function Head({ position, size }) {
  return (
    <View
      style={{
        width: size,
        height: size,
        backgroundColor: "red",
        position: "absolute",
        left: position[0] * size,
        top: position[1] * size,
      }}
    ></View>
  );
}

We'll pass some props to set the size and position of the head.

We use the position: "absolute" property to easily move the head.

This will render a square, we are not going to use anything more complex; a square or rectangular shape to represent the body of the snake and a circular shape to represent the food.

Now let's add the snake's head to the GameEngine.

To add any entity, we need to pass an object in the entities prop in GameEngine.

//App.js
import Head from "./components/Head";


 <GameEngine
        ref={engine}
        style={{
          width: BoardSize,
          height: BoardSize,
          flex: null,
          backgroundColor: "white",
        }}
        entities={{
          head: {
            position: [0, 0],
            size: Constants.CELL_SIZE,
            updateFrequency: 10,
            nextMove: 10,
            xspeed: 0,
            yspeed: 0,
            renderer: <Head />,
          }
        }} 
/>

We passed an object in the entities prop, the key of which is the head. These are the properties it defines.

position is a set of coordinates used to place the snake head.
size is the value to set the size of the snake head.
xspeed and yspeed are values that determine the movement and direction of the snake and can be 1, 0, or -1. Note that when xspeed is set to 1 or -1, yspeed must be 0, and vice versa.
Finally, renderer is responsible for rendering the component
updateFrequency and nextMove will be discussed later.

After adding the Head component, let's add other components.

//commponets/Food/index.js
import React from "react";
import { View } from "react-native";
export default function Food({ position, size }) {
  return (
    <View
      style={{
        width: size,
        height: size,
        backgroundColor: "green",
        position: "absolute",
        left: position[0] * size,
        top: position[1] * size,
        borderRadius: 50
      }}
    ></View>
  );
}

The Food component is similar to the Head component, but we changed the background color and border radius to make it a circle.

Now create a Tail component. This one can be tricky.

// components/Tail/index.js

import React from "react";
import { View } from "react-native";
import Constants from "../../Constants";
export default function Tail({ elements, position, size }) {
  const tailList = elements.map((el, idx) => (
    <View
      key={idx}
      style={{
        width: size,
        height: size,
        position: "absolute",
        left: el[0] * size,
        top: el[1] * size,
        backgroundColor: "red",
      }}
    />
  ));
  return (
    <View
      style={{
        width: Constants.GRID_SIZE * size,
        height: Constants.GRID_SIZE * size,
      }}
    >
      {tailList}
    </View>
  );
}

When the snake eats the food, we will add an element to the snake's body so that our snake will grow. These elements will be passed into the Tail component, which will indicate that it must grow.

We'll loop through all of the elements to create the entire snake body, attach it, and then render it.

After making all the needed components, let's make these two components as GameEngine.

// App.js

import Food from "./components/Food";
import Tail from "./components/Tail";


// App.js
const randomPositions = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min);
  };


// App.js

<GameEngine
        ref={engine}
        style={{
          width: BoardSize,
          height: BoardSize,
          flex: null,
          backgroundColor: "white",
        }}
        entities={{
          head: {
            position: [0, 0],
            size: Constants.CELL_SIZE,
            updateFrequency: 10,
            nextMove: 10,
            xspeed: 0,
            yspeed: 0,
            renderer: <Head />,
          },
          food:
            position: [
              randomPositions(0, Constants.GRID_SIZE - 1),
              randomPositions(0, Constants.GRID_SIZE - 1),
            ],
            size: Constants.CELL_SIZE,
            renderer: <Food />,
          },
          tail: {
            size: Constants.CELL_SIZE,
            elements: [],
            renderer: <Tail />,
          },
        }}

      />

To ensure the randomness of the food positions, we made a randomPositions function with minimum and maximum parameters.

In tail, we added an empty array in the initial state, so when the snake eats the food, it will store the length of each tail in the elements: space.

At this point, we have successfully created our game components. Now it's time to add the game logic to the game loop.

Game Logic

To make the game loop, the GameEngine component has a prop called systems which accepts an array of functions.

To keep everything structured, I'm creating a folder called systems and inserting a file called GameLoop.js.

In this file, we are exporting a function that takes certain parameters.

// GameLoop.js

export default function (entities, { events, dispatch }) {
  ...

  return entities;
}

The first argument is entities , which contains all the entities we passed to the GameEngine component, so we can manipulate them. The other argument is an object with properties, namely events and dispatch.

Move the snake head

Let's write code to move the snake's head in the right direction.

In the GameLoop.js function, we will update the position of the head, as this function will be called every frame.

// GameLoop.js
export default function (entities, { events, dispatch }) {
  const head = entities.head;
  head.position[0] += head.xspeed;
  head.position[1] += head.yspeed;
}

We use the entities parameter to access the head, and in each frame we have to update the position of the snake's head.

If you play the game now, nothing will happen because we set xspeed and yspeed to 0. If you set xspeed or yspeed to 1, the snake's head will move very fast.

To slow down the snake, we will play with the nextMove and updateFrequency values like this.

const head = entities.head;

head.nextMove -= 1;
if (head.nextMove === 0) {
  head.nextMove = head.updateFrequency;

  head.position[0] += head.xspeed;
  head.position[1] += head.yspeed;
}

We update the value of nextMove to 0 by subtracting 1 each frame. When the value is 0, the if condition is set to true and the nextMove value is updated back to the initial value, thus moving the snake's head.

Now, the snake should be moving slower than before.

"Game Over!" Condition

At this point, we haven't added the "Game Over!" condition yet. The first "Game Over!" condition is when the snake hits a wall, the game stops running and a message is displayed to the user indicating that the game is over.

To add this condition, we use this code.

if (head.nextMove === 0) {
  head.nextMove = head.updateFrequency;
  if (
        head.position[0] + head.xspeed < 0 ||
        head.position[0] + head.xspeed >= Constants.GRID_SIZE ||
        head.position[1] + head.yspeed < 0 ||
        head.position[1] + head.yspeed >= Constants.GRID_SIZE
      ) {
        dispatch("game-over");
      } else {
        head.position[0] += head.xspeed;
        head.position[1] += head.yspeed;
    }

The second if condition checks if the snake's head touches the wall. If this condition is true, we will use the dispatch function to send a "game-over" event.

Through the else, we are updating the snake's head position.

Now let's add the "Game Over!" functionality.

Whenever we dispatch a "game-over" event, we will stop the game and display an alert: "Game Over!" Let's implement this.

In order to listen for the "game-over" event, we need to pass the onEvent prop to the GameEngine component. To stop the game, we need to add a running prop and pass it into useState.

Our GameEngine should look like this.

// App.js
import React, { useRef, useState } from "react";
import GameLoop from "./systems/GameLoop";

....
....

const [isGameRunning, setIsGameRunning] = useState(true);

....
....

 <GameEngine
        ref={engine}
        style={{
          width: BoardSize,
          height: BoardSize,
          flex: null,
          backgroundColor: "white",
        }}
        entities={{
          head: {
            position: [0, 0],
            size: Constants.CELL_SIZE,
            updateFrequency: 10,
            nextMove: 10,
            xspeed: 0,
            yspeed: 0,
            renderer: <Head />,
          },
          food:
            position: [
              randomPositions(0, Constants.GRID_SIZE - 1),
              randomPositions(0, Constants.GRID_SIZE - 1),
            ],
            size: Constants.CELL_SIZE,
            renderer: <Food />,
          },
          tail: {
            size: Constants.CELL_SIZE,
            elements: [],
            renderer: <Tail />,
          },
        }}
        systems={[GameLoop]}
        running={isGameRunning}
        onEvent={(e) => {
          switch (e) {
            case "game-over":
              alert("Game over!");
              setIsGameRunning(false);
              return;
          }
        }}
      />

In GameEngine, we've added the systems prop and passed an array through our GameLoop function, along with a running prop and an isGameRunning state. Finally, we added the onEvent prop, which accepts a function with an event argument, so that we can listen for our event.

In this case, we listen for the "game-over" event in a switch statement, so when we receive that event, we display a "Game over!" alert and set the isGameRunning state to false, which stops the game.

Food

We have written the "Game Over!" logic, now let's write the logic for making the snake eat the food.

When the snake eats the food, the location of the food should change randomly.

Open GameLoop.js and write the following code.

// GameLoop.js

const randomPositions = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

export default function (entities, { events, dispatch }) {
  const head = entities.head;
  const food = entities.food;

  ....
  ....
  ....
  if (
        head.position[0] + head.xspeed < 0 ||
        head.position[0] + head.xspeed >= Constants.GRID_SIZE ||
        head.position[1] + head.yspeed < 0 ||
        head.position[1] + head.yspeed >= Constants.GRID_SIZE
      ) {
        dispatch("game-over");
      } else {

     head.position[0] += head.xspeed;
     head.position[1] += head.yspeed;

     if (
          head.position[0] == food.position[0] &&
          head.position[1] == food.position[1]
        ) {

          food.position = [
            randomPositions(0, Constants.GRID_SIZE - 1),
            randomPositions(0, Constants.GRID_SIZE - 1),
          ];
        }
  }

We added an if to check if the position of the snake's head and the food are the same (which would indicate that the snake has "eaten" the food). We then update the food's position using the randomPositions function, just as we did in App.js above. Note that we access the food through the entities parameter.

Controlling the Snake

Now let's add the snake's controls. We will use buttons to control where the snake moves.

To do this we need to add buttons to the screen below the canvas.

// App.js

import React, { useRef, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { GameEngine } from "react-native-game-engine";
import { TouchableOpacity } from "react-native-gesture-handler";
import Food from "./components/Food";
import Head from "./components/Head";
import Tail from "./components/Tail";
import Constants from "./Constants";
import GameLoop from "./systems/GameLoop";
export default function App() {
  const BoardSize = Constants.GRID_SIZE * Constants.CELL_SIZE;
  const engine = useRef(null);
  const [isGameRunning, setIsGameRunning] = useState(true);
  const randomPositions = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min);
  };
  const resetGame = () => {
    engine.current.swap({
      head: {
        position: [0, 0],
        size: Constants.CELL_SIZE,
        updateFrequency: 10,
        nextMove: 10,
        xspeed: 0,
        yspeed: 0,
        renderer: <Head />,
      },
      food:
        position: [
          randomPositions(0, Constants.GRID_SIZE - 1),
          randomPositions(0, Constants.GRID_SIZE - 1),
        ],
        size: Constants.CELL_SIZE,
        updateFrequency: 10,
        nextMove: 10,
        xspeed: 0,
        yspeed: 0,
        renderer: <Food />,
      },
      tail: {
        size: Constants.CELL_SIZE,
        elements: [],
        renderer: <Tail />,
      },
    });
    setIsGameRunning(true);
  };
  return (
    <View style={styles.canvas}>
      <GameEngine
        ref={engine}
        style={{
          width: BoardSize,
          height: BoardSize,
          flex: null,
          backgroundColor: "white",
        }}
        entities={{
          head: {
            position: [0, 0],
            size: Constants.CELL_SIZE,
            updateFrequency: 10,
            nextMove: 10,
            xspeed: 0,
            yspeed: 0,
            renderer: <Head />,
          },
          food:
            position: [
              randomPositions(0, Constants.GRID_SIZE - 1),
              randomPositions(0, Constants.GRID_SIZE - 1),
            ],
            size: Constants.CELL_SIZE,
            renderer: <Food />,
          },
          tail: {
            size: Constants.CELL_SIZE,
            elements: [],
            renderer: <Tail />,
          },
        }}
        systems={[GameLoop]}
        running={isGameRunning}
        onEvent={(e) => {
          switch (e) {
            case "game-over":
              alert("Game over!");
              setIsGameRunning(false);
              return;
          }
        }}
      />
      <View style={styles.controlContainer}>
        <View style={styles.controllerRow}>
          <TouchableOpacity onPress={() => engine.current.dispatch("move-up")}>
            <View style={styles.controlBtn} />
          </TouchableOpacity>
        </View>
        <View style={styles.controllerRow}>
          <TouchableOpacity
            onPress={() => engine.current.dispatch("move-left")}
          >
            <View style={styles.controlBtn} />
          </TouchableOpacity>
          <View style={[styles.controlBtn, { backgroundColor: null }]} />
          <TouchableOpacity
            onPress={() => engine.current.dispatch("move-right")}
          >
            <View style={styles.controlBtn} />
          </TouchableOpacity>
        </View>
        <View style={styles.controllerRow}>
          <TouchableOpacity
            onPress={() => engine.current.dispatch("move-down")}
          >
            <View style={styles.controlBtn} />
          </TouchableOpacity>
        </View>
      </View>
      {!isGameRunning && (
        <TouchableOpacity onPress={resetGame}>
          <Text
            style={{
              color: "white",
              marginTop: 15,
              fontSize: 22,
              padding: 10,
              backgroundColor: "grey",
              borderRadius: 10
            }}
          >
            Start New Game
          </Text>
        </TouchableOpacity>
      )}
    </View>
  );
}
const styles = StyleSheet.create({
  canvas:
    flex: 1,
    backgroundColor: "#000000",
    alignItems: "center",
    justifyContent: "center",
  },
  controlContainer: {
    marginTop: 10,
  },
  controllerRow: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  controlBtn: {
    backgroundColor: "yellow",
    width: 100,
    height: 100,
  },
});

In addition to the controls, we also added a button to start a new game when the previous one ends. This button only appears when the game is not running. When the button is clicked, we reset the game by using the game engine's swap function, passing in the entity's original object, and updating the game's running state.

Now let’s talk about control. We have added touchable objects that, when pressed, dispatch events that will be handled in the game loop.

// GameLoop.js
....
....
 export default function (entities, { events, dispatch }) {
    const head = entities.head;
    const food = entities.food;

  if (events.length) {
    events.forEach((e) => {
      switch (e) {
        case "move-up":
          if (head.yspeed === 1) return;
          head.yspeed = -1;
          head.xspeed = 0;
          return;
        case "move-right":
          if (head.xspeed === -1) return;
          head.xspeed = 1;
          head.yspeed = 0;
          return;
        case "move-down":
          if (head.yspeed === -1) return;
          head.yspeed = 1;
          head.xspeed = 0;
          return;
        case "move-left":
          if (head.xspeed === 1) return;
          head.xspeed = -1;
          head.yspeed = 0;
          return;
      }
    });
  }

....
....
});

In the code above, we added a switch statement to recognize the event and update the direction of the snake.

Are you still listening to me? Great! The only thing left is the tail.

Tail function

When the snake eats the food, we hope its tail will grow back. We also want to emit a "Game Over!" event when the snake bites its own tail or body.

Let's add the tail logic.

// GameLoop.js

const tail = entities.tail;

....
....

....

    else {
      tail.elements = [[head.position[0], head.position[1]], ...tail.elements];
      tail.elements.pop();

      head.position[0] += head.xspeed;
      head.position[1] += head.yspeed;

      tail.elements.forEach((el, idx) => {
        if (
          head.position[0] === el[0] &&
          head.position[1] === el[1] 
        )
          dispatch("game-over");
      });
      if (
        head.position[0] == food.position[0] &&
        head.position[1] == food.position[1]
      ) {
        tail.elements = [
          [head.position[0], head.position[1]],
          ...tail.elements,
        ];

        food.position = [
          randomPositions(0, Constants.GRID_SIZE - 1),
          randomPositions(0, Constants.GRID_SIZE - 1),
        ];
      }
    }

To make the tail follow the head of the snake, we need to update the tail element. We do this by adding the position of the head to the beginning of the elements array and then removing the last element on the tail elements array.

After this, we write a conditional so that if the snake bites its own body, we dispatch the "game-over" event.

Finally, every time the snake eats food, we append elements of the snake's tail with the current position of the snake's head to increase the length of the snake's tail.

Below is the complete code of GameLoop.js.

// GameLoop.js

import Constants from "../Constants";
const randomPositions = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};
  export default function (entities, { events, dispatch }) {
    const head = entities.head;
    const food = entities.food;
    const tail = entities.tail;
  if (events.length) {
    events.forEach((e) => {
      switch (e) {
        case "move-up":
          if (head.yspeed === 1) return;
          head.yspeed = -1;
          head.xspeed = 0;
          return;
        case "move-right":
          if (head.xspeed === -1) return;
          head.xspeed = 1;
          head.yspeed = 0;
          // ToastAndroid.show("move right", ToastAndroid.SHORT);
          return;
        case "move-down":
          if (head.yspeed === -1) return;
          // ToastAndroid.show("move down", ToastAndroid.SHORT);
          head.yspeed = 1;
          head.xspeed = 0;
          return;
        case "move-left":
          if (head.xspeed === 1) return;
          head.xspeed = -1;
          head.yspeed = 0;
          // ToastAndroid.show("move left", ToastAndroid.SHORT);
          return;
      }
    });
  }
  head.nextMove -= 1;
  if (head.nextMove === 0) {
    head.nextMove = head.updateFrequency;
    if (
      head.position[0] + head.xspeed < 0 ||
      head.position[0] + head.xspeed >= Constants.GRID_SIZE ||
      head.position[1] + head.yspeed < 0 ||
      head.position[1] + head.yspeed >= Constants.GRID_SIZE
    ) {
      dispatch("game-over");
    } else {
      tail.elements = [[head.position[0], head.position[1]], ...tail.elements];
      tail.elements.pop();
      head.position[0] += head.xspeed;
      head.position[1] += head.yspeed;
      tail.elements.forEach((el, idx) => {
        console.log({ el, idx });
        if (
          head.position[0] === el[0] &&
          head.position[1] === el[1] 
        )
          dispatch("game-over");
      });
      if (
        head.position[0] == food.position[0] &&
        head.position[1] == food.position[1]
      ) {
        tail.elements = [
          [head.position[0], head.position[1]],
          ...tail.elements,
        ];

        food.position = [
          randomPositions(0, Constants.GRID_SIZE - 1),
          randomPositions(0, Constants.GRID_SIZE - 1),
        ];
      }
    }
  }
  return entities;
}

Conclusion

Now that your first React Native game is complete, you can run it on your device to play it. I hope you learned something new and I hope you share it with your friends.

Thank you for reading and have a nice day.

The post How to build a simple game in React Native appeared first on LogRocket Blog .

That’s it for building a simple game with React Native. For more information on React Native games, check out other articles on 123WORDPRESS.COM!

You may also be interested in:

React native realizes the monitoring gesture up and down pull effect
VSCode builds React Native environment
Solve the problem of react-native soft keyboard popping up and blocking the input box
Detailed explanation of react-native WebView return processing (non-callback method can be solved)
React-native bridge Android native development detailed explanation
A brief discussion on React Native Flexbox layout (summary)
React Native react-navigation navigation usage details
Specific usage of FlatList in ReactNative
ReactNative FlatList usage and pitfalls package summary

<<: Detailed explanation of Nginx configuration required for front-end

>>: In-depth analysis of MySQL from deleting the database to running away_Advanced (I) - Data Integrity