Create a 2048 Game using React-Native

Create a Snake Game in React

Last Updated : 25 Jul, 2024

Snake Game using ReactJS project implements functional components and manages the state accordingly. The developed Game allows users to control a snake using arrow keys or touch the buttons displayed on the screen to collect food and grow in length. The goal of the game is to eat as much food as possible without colliding with the walls or the snake's own body.

Preview of Final Output: Let us have a look at what our final project will look like.

Technologies Used and Pre-requisites in Snake Game:

Approach to create the Snake Game:

The given code represents a Snake Game project using ReactJS. It involves setting up components for the snake, food, buttons, and menu. The game initializes with an initial state, handles user input for snake movement, detects collisions, and updates the game board accordingly. The rendering and user interface are implemented to display the game elements. The game flow includes a menu and transitions to gameplay.

Steps to create Snake Game:

Step 1: Set up the React project using the below command in VSCode IDE.

npx create-react-app <<name of project>>

Step 2: Navigate to the newly created project folder by executing the below command.

cd <<Name_of_project>>

Step 3: Create a folder named Components. We will create various components and their styling files in this components folder such as Button.js, Food.js, Menu.js, Snake.js, Menu.css, and Button.css.

Project Structure of Snake Game:

The updated dependencies in package.json will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Insert the below code in the App.js ad index.css files mentioned in the above directory structure.

CSS

/* index.css */
body {
    background-color: #1e1e1e;
}

.game-area {
    position: relative;
    width: 600px;
    height: 500px;
    border: 2px solid #dc042c;
    border-radius: 10px;
    margin: 50px auto;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 0 10px #abbfc0;
}

@media only screen and (max-width: 800px) {
    .game-area {
        position: relative;
        width: 350px;
        height: 300px;
    }

    .snake {
        width: 12px;
        height: 12px;
    }
}

.snake {
    position: absolute;
    width: 2%;
    height: 2%;
    background-color: #dc042c;
    border: 1px solid white;
    z-index: 2;
}

.food {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: white;
    border-radius: 20px;
    z-index: 1;
}

JavaScript

// App.js
import React, { Component } from "react";
import Snake from "./Components/Snake";
import Food from "./Components/Food";
import Button from "./Components/Button";
import Menu from "./Components/Menu";
import "./App.css";
const getRandomFood = () => {
    let min = 1;
    let max = 98;
    let x = Math.floor((Math.random() * (max - min + 1) + min) / 2) * 2;
    let y = Math.floor((Math.random() * (max - min + 1) + min) / 2) * 2;
    return [x, y];
};

const initialState = {
    food: getRandomFood(),
    direction: "RIGHT",
    speed: 100,
    route: "menu",
    snakeDots: [
        [0, 0],
        [0, 2],
    ],
};

class App extends Component {
    constructor() {
        super();
        this.state = initialState;
    }

    componentDidMount() {
        setInterval(this.moveSnake, this.state.speed);
        document.onkeydown = this.onKeyDown;
    }

    componentDidUpdate() {
        this.onSnakeOutOfBounds();
        this.onSnakeCollapsed();
        this.onSnakeEats();
    }

    onKeyDown = (e) => {
        e.preventDefault();
        e = e || window.event;
        switch (e.keyCode) {
            case 37:
                this.setState({ direction: "LEFT" });
                break;
            case 38:
                this.setState({ direction: "UP" });
                break;
            case 39:
                this.setState({ direction: "RIGHT" });
                break;
            case 40:
                this.setState({ direction: "DOWN" });
                break;
        }
    };

    moveSnake = () => {
        let dots = [...this.state.snakeDots];
        let head = dots[dots.length - 1];
        if (this.state.route === "game") {
            switch (this.state.direction) {
                case "RIGHT":
                    head = [head[0] + 2, head[1]];
                    break;
                case "LEFT":
                    head = [head[0] - 2, head[1]];
                    break;
                case "DOWN":
                    head = [head[0], head[1] + 2];
                    break;
                case "UP":
                    head = [head[0], head[1] - 2];
                    break;
            }
            dots.push(head);
            dots.shift();
            this.setState({
                snakeDots: dots,
            });
        }
    };

    onSnakeOutOfBounds() {
        let head = this.state.snakeDots[this.state.snakeDots.length - 1];
        if (this.state.route === "game") {
            if (
                head[0] >= 100 ||
                head[1] >= 100 ||
                head[0] < 0 ||
                head[1] < 0
            ) {
                this.gameOver();
            }
        }
    }

    onSnakeCollapsed() {
        let snake = [...this.state.snakeDots];
        let head = snake[snake.length - 1];
        snake.pop();
        snake.forEach((dot) => {
            if (head[0] == dot[0] && head[1] == dot[1]) {
                this.gameOver();
            }
        });
    }

    onSnakeEats() {
        let head = this.state.snakeDots[this.state.snakeDots.length - 1];
        let food = this.state.food;
        if (head[0] == food[0] && head[1] == food[1]) {
            this.setState({
                food: getRandomFood(),
            });
            this.increaseSnake();
            this.increaseSpeed();
        }
    }

    increaseSnake() {
        let newSnake = [...this.state.snakeDots];
        newSnake.unshift([]);
        this.setState({
            snakeDots: newSnake,
        });
    }

    increaseSpeed() {
        if (this.state.speed > 10) {
            this.setState({
                speed: this.state.speed - 20,
            });
        }
    }

    onRouteChange = () => {
        this.setState({
            route: "game",
        });
    };

    gameOver() {
        alert(`GAME OVER, your score is ${this.state.snakeDots.length - 2}`);
        this.setState(initialState);
    }

    onDown = () => {
        let dots = [...this.state.snakeDots];
        let head = dots[dots.length - 1];

        head = [head[0], head[1] + 2];
        dots.push(head);
        dots.shift();
        this.setState({
            direction: "DOWN",
            snakeDots: dots,
        });
    };

    onUp = () => {
        let dots = [...this.state.snakeDots];
        let head = dots[dots.length - 1];

        head = [head[0], head[1] - 2];
        dots.push(head);
        dots.shift();
        this.setState({
            direction: "UP",
            snakeDots: dots,
        });
    };

    onRight = () => {
        let dots = [...this.state.snakeDots];
        let head = dots[dots.length - 1];

        head = [head[0] + 2, head[1]];
        dots.push(head);
        dots.shift();
        this.setState({
            direction: "RIGHT",
            snakeDots: dots,
        });
    };

    onLeft = () => {
        let dots = [...this.state.snakeDots];
        let head = dots[dots.length - 1];

        head = [head[0] - 2, head[1]];
        dots.push(head);
        dots.shift();
        this.setState({
            direction: "LEFT",
            snakeDots: dots,
        });
    };

    render() {
        const { route, snakeDots, food } = this.state;
        return (
            <div>
                {route === "menu" ? (
                    <div>
                        <Menu onRouteChange={this.onRouteChange} />
                    </div>
                ) : (
                    <div>
                        <div className="game-area">
                            <Snake snakeDots={snakeDots} />
                            <Food dot={food} />
                        </div>
                        <Button
                            onDown={this.onDown}
                            onLeft={this.onLeft}
                            onRight={this.onRight}
                            onUp={this.onUp}
                        />
                    </div>
                )}
            </div>
        );
    }
}

export default App;

Write the following mentioned code in different files(The name of the files is mentioned in the first line of each code block).

Button.js: Button.js represents a React functional component that renders buttons for controlling the snake's movement in the Snake Game.
Menu.js: Menu.js file code renders a menu for the Snake Game. It displays a "Start Game" button and triggers the onRouteChange function when clicked. The menu is styled using CSS from the "Menu.css" file
Food.js: Food.js is a React component that renders the food item in a game based on the provided coordinates.
Snake.js: Snake.js file code is a React component that renders the snake in a game based on an array of coordinates representing its dots.

CSS

/* Button.css */
.upwards,
.downwards {
    display: flex;
    justify-content: center;
}

.sideways {
    display: flex;
    justify-content: center;
    margin: 10px;
}

.left,
.right {
    margin: 50px;
    padding: 20px;
    border: 0px solid;
    border-radius: 20px;
    border: 1px solid white;
    color: #dc042c;
    background: #1e1e1e;
    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.6);
}

.up,
.down {
    padding: 20px;
    border: 0px solid;
    border-radius: 20px;
    border: 1px solid white;
    color: #dc042c;
    background: #1e1e1e;
    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.6);
}

CSS

/* Menu.css */
.wrapper {
    position: relative;
    width: 200px;
    height: 250px;
    border: 2px solid #dc042c;
    /* border-radius: 10px; */
    margin: 50px auto;
    margin-top: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* box-shadow: 0 0 10px #abbfc0; */
}

.start {
    margin: 100px;
    background: #1e1e1e;
    color: white;
    border-radius: 7px;
    border: 0px;
    padding: 10px;
    font-size: 1.2em;
    box-shadow: 0 0 70px #abbfc0;
    font-family: "Courier New", Courier, monospace;
}

JavaScript

//Button.js
import React from "react";
import "./Button.css";

const Button = ({ onUp, onDown, onLeft, onRight }) => {
    return (
        <div className="buttons">
            <div className="upwards">
                <input className="up" onClick={onUp} type="button" value="UP" />
            </div>
            <div className="sideways">
                <input
                    className="left"
                    onClick={onLeft}
                    type="button"
                    value="LEFT"
                />
                <input
                    className="right"
                    onClick={onRight}
                    type="button"
                    value="RIGHT"
                />
            </div>
            <div className="downwards">
                <input
                    className="down"
                    onClick={onDown}
                    type="button"
                    value="DOWN"
                />
            </div>
        </div>
    );
};
export default Button;

JavaScript

//Food.js
import React from "react";

const Food = (props) => {
    const style = {
        left: `${props.dot[0]}%`,
        top: `${props.dot[1]}%`,
    };
    return <div className="food" style={style} />;
};

export default Food;

JavaScript

//Menu.js
import React from "react";
import "./Menu.css";

const Menu = ({ onRouteChange }) => {
    return (
        <div className="wrapper">
            <div>
                <input
                    onClick={onRouteChange}
                    className="start"
                    type="button"
                    value="start game"
                />
            </div>
        </div>
    );
};

export default Menu;

JavaScript

//Snake.js
import React from "react";

const Snake = (props) => {
    return (
        <div>
            {props.snakeDots.map((dot, i) => {
                const style = {
                    left: `${dot[0]}%`,
                    top: `${dot[1]}%`,
                };
                return <div className="snake" key={i} style={style} />;
            })}
        </div>
    );
};
export default Snake;

Steps to run the application:

Step 1: Execute the following command in the terminal.

npm start

Step 2: Open the web browser and type the following URL in the address bar.

http://localhost:3000/

Output:

Create a 2048 Game using React-Native

A

anjalibo6rb0

News

Improve

Article Tags :

Similar Reads

Create a Snake Game in React

Snake Game using ReactJS project implements functional components and manages the state accordingly. The developed Game allows users to control a snake using arrow keys or touch the buttons displayed on the screen to collect food and grow in length. The goal of the game is to eat as much food as pos

Create a 2048 Game using React-Native

In this article, we are going to implement a 2048 Game using React Native. The 2048 game is a popular sliding puzzle game that involves combining tiles with the same number to reach the tile with the number 2048. Players can move the tiles in four directions: up, down, left, or right. PrerequisiteRe

Snake and Ladder Game in C

Snake and Ladder game is a traditional game that involves two or more players and the winner is the guy who reaches the final square on the game board at the earliest. Components of the GameA square board with a series of numbered squares arranged in m x m grid.A dice to be rolled usually uses a six

How to create a table in ReactJS ?

When displaying data in an organized style, Table in React JS is a popular component. Using HTML tables and JavaScript, you can quickly construct dynamic and interactive tables in ReactJS. PrerequisitesThe pre-requisites for creating a Table in React: ReactFunctional ComponentsJavaScript ES6HTML Tab

Create a Memory Pair Game using React-Native

In this article, we will build the interactive Memory Pair Game using the React Native language. We are displaying the 12 boxes to the user, in the user has to click on each box, and when the user clicks on the box the random icon will be shown. Users have to guess or find its match by clicking on t

How to create a website in React JS ?

React JS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook. React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible. It designs simple vi

How are forms created in ReactJS ?

Form is a document that stores information of a user on a web server using interactive controls. A form contains different kinds of information such as username, password, contact number, email ID, etc. Creating a form in React is almost similar to that of HTML if we keep it simple and just make a s

Create a Spin the Bottle game using React-Native

React-Native is an open-source framework used to develop cross-platform applications i.e., you can write code in React-Native and publish it as an Android or IOS app. In this article, we will build a basic Spin the Bottle game in React-Native. This is a multi-player game. Usually, people sit in a ro

Create a meme generator by using ReactJS

In this tutorial, weâ€™ll create a meme generator using ReactJS. In the meme generator, we have two text fields in which we enter the first textÂ and last text. After writing the text when we click theÂ GenÂ button, it creates a meme with an image and the text written on it. Preview Image: PrerequisiteTh

Create a Reflex Game using JavaScript

A reflex game is a simple fun game that measures your responding speed. It is quite simple to make and understand. We will be designing a reflex game that will calculate your responding speed. The rules are simple just press the stop button when you see the change in background color, and the time y