Building a Cross-Platform Snake Game with React Native

Getting Started

To build our game, we need a loop that updates our game while we play. We’ll use React Native Game Engine to optimize our game for smooth performance. Let’s create a new React Native app and add the game engine dependency:

npx react-native init SnakeGame
npm install react-native-game-engine

Creating the Game Canvas

Our game needs a canvas or container to hold our game objects. We’ll create a View component with styling and add the GameEngine component:

import React, { useRef } from 'eact';
import { View, StyleSheet } from 'eact-native';
import { GameEngine } from 'eact-native-game-engine';

const App = () => {
  const gameEngine = useRef(null);

  return (
    <View style={styles.container}>
      <GameEngine
        ref={gameEngine}
        style={styles.gameContainer}
        systems={[/* add game systems here */]}
      >
        {/* add game entities here */}
      </GameEngine>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  gameContainer: {
    width: 400,
    height: 400,
    borderWidth: 1,
    borderColor: '#000',
  },
});

Designing the Game Entities

Our game consists of a snake and food components. Let’s create these entities and add them to our game engine:

// Head component
import React from 'eact';
import { View, StyleSheet } from 'eact-native';

const Head = ({ size, position }) => {
  return (
    <View
      style={[
        styles.head,
        {
          width: size,
          height: size,
          left: position.x,
          top: position.y,
        },
      ]}
    ></View>
  );
};

const styles = StyleSheet.create({
  head: {
    backgroundColor: 'ed',
    borderRadius: 5,
    position: 'absolute',
  },
});

// Food component
const Food = ({ size, position }) => {
  return (
    <View
      style={[
        styles.food,
        {
          width: size,
          height: size,
          left: position.x,
          top: position.y,
        },
      ]}
    ></View>
  );
};

const styles = StyleSheet.create({
  food: {
    backgroundColor: 'green',
    borderRadius: 5,
    position: 'absolute',
  },
});

// Tail component
const Tail = ({ elements }) => {
  return (
    <>
      {elements.map((element, index) => (
        <View
          key={index}
          style={[
            styles.tail,
            {
              width: element.size,
              height: element.size,
              left: element.position.x,
              top: element.position.y,
            },
          ]}
        ></View>
      ))}
    </>
  );
};

const styles = StyleSheet.create({
  tail: {
    backgroundColor: 'blue',
    borderRadius: 5,
    position: 'absolute',
  },
});

Adding Game Logic

We’ll create a GameLoop function to update our game state:

import { GameEngine } from 'eact-native-game-engine';

const GameLoop = (entities, { events, dispatch }) => {
  // Update snake head position
  entities.head.position.x += entities.head.xspeed;
  entities.head.position.y += entities.head.yspeed;

  // Check for collisions with walls or self
  if (/* collision detected */) {
    dispatch('game-over');
  }

  // Check for food consumption
  if (entities.head.position.x === entities.food.position.x && entities.head.position.y === entities.food.position.y) {
    // Update food position and snake tail
  }

  return entities;
};

Implementing Game Over and Restart

We’ll add a “Game over!” alert and restart functionality:

import React, { useState } from 'eact';
import { Alert } from 'eact-native';

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

  const handleGameOver = () => {
    Alert.alert('Game over!');
    setIsGameRunning(false);
  };

  const handleRestart = () => {
    setIsGameRunning(true);
    // Reset game state
  };

  return (
    <>
      {isGameRunning? (
        <>
          {/* add game entities here */}
        </>
      ) : (
        <>
          <Text>Game Over!</Text>
          <Button title="Restart" onPress={handleRestart} />
        </>
      )}
    </>
  );
};