Skip to content

15+ React.js Games Examples From Github To Learn React.js

    15+ React.js Games Examples From Github To Learn React.js

    If you have basic knowledge about Javascript, HTML and CSS then you can easily learn about this article. I’ve selected 10+React.js games examples from Github and I am sure it can be a good guide for you.


    1. JavaScript Memory Games
    2. JavaScript 2048 Games
    3. JavaScript Tetris Games
    4. JavaScript Sudoku Games
    5. Three.js Example Games
    6. Javascript Games Code
    7. JavaScript Snake Games
    8. JavaScript Pong Game
    9. JavaScript Tic Tac Toe Games

    1. Web App uses ML to add more fun to the Rock Paper Scissor Lizard Spock game

    Rock Paper Scissors Lizard Spock FUN 😀


    Using Tensorflow.js and Fingerpose library to detect Player’s hand gesture. The player will make their choice and play with the computer. Using React for front-end web dev.


    • change web title and icon
    • computer choice animation
    • freeze detection after the player set choices
    • UI/UX design

    2. No-Wallet-Confirmation Rock Paper Scissors with Sequence

    This tutorial demonstrates how to create a simple Rock Paper Scissors game using the Sequence Wallet and session keys for streamlined user interactions.

    Getting Started

    1. Clone the repository.
    2. Install the required dependencies: npm install.
    3. Start the development server: npm start.

    The application will open in your default web browser at http://localhost:3000.

    How to Use

    1. Connect to your Sequence Wallet by clicking the “Connect Sequence Wallet” button.
    2. Generate a session key or load an existing one from local storage.
    3. Authorize the session key by signing a message with your primary wallet.
    4. Play the Rock Paper Scissors game by choosing a move.

    The application uses the session key to sign each move without requiring confirmation from your primary wallet.

    Tutorial Overview

    The tutorial covers the following steps:

    • Setting up a basic React application
    • Connecting to the Sequence Wallet
    • Generating or loading a session key
    • Authorizing the session key
    • Playing the game using the session key for signing messages
    • Verifying session key signatures
    • Displaying the game results

    3. Simple tic tac toe game for ios and Android

    Build a Tic Tac Toe with React Native

    4. Tic Tac Toe game on React js

    Title:-Tic Tac Toe game on React js

    Made by:-Maxim Ivanov

    5. Checkers game & AI Opponent in react

    Title:-React Checkers & AI Opponent

    Made by Caleb OLeary

    6. A developer-driven guessing game with React


    This project is a web game created using React, Vite, and TypeScript and consuming the public API of GitHub. The game displays all the data of two randomly selected repositories and the user must choose which one has more stars. The design is made with CSS3 and custom hooks, and a dedicated client is used to utilize the GitHub API.


    • Functional Components in React
    • Project Organization using React and TypeScript
    • Responsive and Modern Design using CSS3
    • Flexbox and Layout Fundamentals
    • Usage of CSS Variables for Theme Creation
    • Custom Hooks Creation
    • Commits using Conventional Commits
    • Typing using TypeScript
    • Creation of Utilities

    Live Version

    You can play the game by visiting the live version hosted at

    Video Tutorial

    You can follow the step-by-step instructions on how to create this project by watching the video tutorial (in Portuguese).


    To use this project, you need to follow these steps:

    1. Clone the repository: git clone
    2. Install the dependencies: npm install
    3. Run the application: npm run dev

    Note: This project uses Vite to run locally. Make sure to run the project using npm run dev instead of npm start.

    Used Tools

    This project uses the following tools:


    This project uses CSS variables to set up the theme. Here are the variables used and their descriptions:

    • --color-primary: Primary color used for headings and buttons
    • --color-secondary: Secondary color used for background and borders
    • --color-highlight: Highlight color used for interactive elements
    • --color-danger: Color used to indicate errors or warnings
    • --color-light: Light color used for text and background
    • --color-shade: Darker shade used for text and background
    • --color-darkish: Darkish color used for text and background
    • --color-dark: Dark color used for text and background
    • --color-darkest: Darkest color used for text and background

    To customize the theme, simply modify the values of the variables in the src/app.css file.


    After the application is running, the game will start automatically. The user must choose between the two repositories presented on the screen, and the game will display the result. The user can play again by clicking the “Play Again” button.


    To contribute to this project, please follow these guidelines:

    1. Fork the repository
    2. Create a new branch: git checkout -b feature/your-feature-name
    3. Make your changes and commit them using Conventional Commits
    4. Push to the branch: git push origin feature/your-feature-name
    5. Submit a pull request


    This project is licensed under the MIT License – see the file for details.


    This project was created by arthur404dev.

    7. A classic Win98 Minesweeper written in React

    Minesweeper in React

    This is a project written for the internship contest at VK. Around 10 hours total was spent on making this project from scratch.

    Stuff used for this project:

    • TypeScript
    • Webpack
    • React
    • Redux
    • React Router

    Available Scripts

    In the project directory, you can run:

    npm start

    Runs the app in development mode.
    Open http://localhost:3000 to view it in the browser.

    The page will reload if you make edits.
    You will also see any lint errors in the console.

    npm run build

    Builds the app for production to the build folder.
    The build is minified and the filenames include the hashes.

    8. Shooting Ninja Game built with React

    Shooting Ninja Game

    Group Project

    Shooting Ninja is a game which is developed by 4 developers.

    Backend – Tech-Stack

    MongoDB | Express | Cyclic

    Backend Link –

    Frontend – Tech-Stack

    React | Typescript | Chakra UI | Vercel

    Frontend Link –

    About Game

    We created this game in two days with both frontend and backend.

    How to play this game

    • On the top left corner your score will be displayed.
    • On the top right corner you can see your registered Name.
    • When the game starts you have two types of target :-a). Ballon b). Man
    • You have to shoot only ballon using your mouse. if you shoot Man then your game will be over

    Coding Challenge#2 – Guess the color game

    Coded in mobile via because my laptop is being repaired at the moment 🥲

     The Problem

    Create a react app game titled “Guess the color”. It will shows a block of color and
    three (3) buttons below the color block it with random color text in Hexa-Decimal format ex: `#486def`.
    If the selected button is correct it will show a text “Correct” otherwise “Bad Guess”, the game
    will only start a new game (show a new random color block) if the selected button is correct with a one (1) second delay.

    The Solution

    Use a set of React hooks for the random colors and to start the game. Create a color generator function using Math method
    and String manipulation to randomly create three (3) different colors.

    – Use the useState hook to store the randomly generated colors and also to check if the selected button is correct or not.
    – Use the useEffect hook to start a new game (display a new color) with a delay of one (1) second using setTimeout method.

    The `README` on this page covers only the basic description for the challenge.


    9. A simple Battleship game built with React


    Click this link to open the game: Demo url


    This is a game I built when I was interviewing with a company as per their assessment requirement. These is just the basic things that works , but there are a lot of places the game can be improved. Feel free to fork and update and modify the game in your own way

    Build a simple React-based version of the game Battleship. Introduce other libraries for state management, styling, etc as you see necessary.

    In Battleship we have a board which is a 10×10 grid, where the rows are labeled with a letter (A-J), and the columns with a number (1-10). There are different types of ships which each take up a different number of spaces on this grid, and the number of spaces a ship takes up is equivalent to how many hits the ship can take before sinking. So for a battleship, it takes up 4 spaces on the board, and can be hit 4 times before sinking. The players place their ships on the board in a random configuration, and then in turns, announce a square (for instance C3) where they will attack. If any of the opponent’s ships are on that square, that ship will take one hit. Once a ship has a hit on each space it takes up, it will sink. Once a player’s ships are all sunk, they lose.

    We give you a basic board setup and an ‘inventory’ of 4 ships as follows for yourself and for the ‘computer’ player:

    • 1 carrier: size 5 spaces for hits
    • 1 battleship: size 4 spaces for hits
    • 1 cruiser: size 3 spaces for hits
    • 1 destroyer: size 2 spaces for hits

    Made with ♥ by Anamul Haque

    10. Tenzies Game built with React.js

    Technologies used:

    • React JS
    • Netlify (For Hosting)

    11. Top-Down Phaser Game with React UI Template

    This project is based on a Medium post:

    Try it out:

    Key Features

    • Built with Create React App
    • Uses Phaser 3 for game engine
    • State management with Zustand
    • UI with Material UI and React 18
    • CSS Modules
    • Uses functional programming style
    • Arcade physics
    • Automatically resizes game to fit browser window
    • Automatically loads Tilesets and assets
    • Generates atlas sheets with included script
    • Adjustable tile sizes
    • Integrates Phaser and React through Zustand
    • Dialog system (React-based)
    • Game menu (React-based)
    • Virtual Gamepad for mobile devices (React-based)
    • Includes 2D assets from

    12. A tic-tac-toe game made with React and Tailwind CSS


    An offline tic-tac-toe game made with React and TailwindCSS.


    This project was developed with the following technologies:

     How To Use

    To clone and run this application, you will need Git and Node.js installed on your computer.

    From your command line:

    # Clone this repository
    $ git clone
    # Install dependencies
    # If you are using NPM
    $ npm install
    # If you are using Yarn
    $ yarn install
    # If you are using PNPM (current package manager)
    $ pnpm install
    # Start server
    # If you are using NPM
    $ npm run dev
    # If you are using Yarn
    $ yarn dev
    # If you are using PNPM (current package manager)
    $ pnpm dev

    🤔 How to contribute

    1. Fork this repository.
    2. Create a branch: git checkout -b <branch_name> .
    3. Make your changes and commit them: git commit -m '<commit_message> '
    4. Push to the original branch:git push origin <project_name> / <local>
    5. Create the pull request. Or, see the GitHub documentation on how to create a pull request.

    📝 License

    This project is under the MIT license. See the LICENSE for details.

    Made with ♥ by Fellipe Utaka 👋 Get in touch!

    13. XO Game with React and Styled Components by Abderox

    This app is a simple, two-player XO game that is built using React and Styled Components. The goal of the game is to place three X or O symbols in a row, column, or diagonal, before your opponent. This app was created by Abderox as a personal project to refresh the mind and improve technical skills.


    • Two-player game where each player takes turns placing X or O symbols on the game board.
    • User-friendly interface with clear instructions and a visual representation of the game board.
    • Styled Components (CSS-in-JS) for styling.

    Upcoming Features

    • Multiplayer capability using [Done]
    • Improved styling and user interface. [Done]


    To run the app, follow these steps:

    1. Clone the repository to your local machine.
    2. Navigate to the root directory of the repository.
    3. Run npm install to install all dependencies.
    4. Run npm start to start the development server.
    5. The app should now be running on http://localhost:3000.


    If you would like to contribute to the development of this app, please fork the repository and submit a pull request. Abderox is open to suggestions and improvements to make this project the best it can be.

    14. Tenzies Game using React.Js

    Build an fun web-app game using ReactJs….

    Minesweeper web app built with React.js

    This is a Minesweeper game written in React. I built this application in order to learn more about React and component based architecture. There is also a live demo available here.

    Get started

    • Clone this repository:
    git clone
    • Navigate to the directory:
    cd minesweeper
    • Install the dependencies:
    npm install
    • Run the app locally:
    npm start

    Make sure to use the production build before deployment.

    How to play

    This game follows the basic principe of the original Minesweeper from Windows (except that you can land on a mine first try). You can clear, find and flag mines. To reset the field, just click onto the Emoji in the mid. Have fun playing!


    • Node.js 19
    • React 18

    Leave a Reply

    Your email address will not be published. Required fields are marked *