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.

RELATED ARTICLES

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 😀

Description

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.

TODO

• 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

RepoWars

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.

Features

• 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 repowars.excalidevs.com.

Video Tutorial

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

Installation

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

1. Clone the repository: git clone https://github.com/username/repo-name.git
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:

• React and ReactDOM for building the UI
• TypeScript for typing and safer development
• Vite for fast development and production builds
• @octokit/core and axios for communication with the GitHub API
• react-icons for UI icons

Theme

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.

Usage

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.

Contributing

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

License

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

Credits

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 – https://mysterious-boa-kimono.cyclic.app/

Frontend – Tech-Stack

React | Typescript | Chakra UI | Vercel

Frontend Link – https://shooting-jet.vercel.app/

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 codesandbox.io 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

Battleship!

Click this link to open the game: Demo url

Motivation!

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: https://javascript.plainenglish.io/i-made-a-top-down-game-version-of-my-blog-with-phaser-and-react-faf5c28cf768

Try it out: https://blopa.github.io/pablo-gg-game/

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 Kenney.nl

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

 Project

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

Technologies

This project was developed with the following technologies:

• TypeScript
• React
• Vite
• Vitest
• Tailwind

 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 https://github.com/fellipeutaka/tic-tac-toe.git

# 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.

Features

• 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 socket.io. [Done]
• Improved styling and user interface. [Done]

Installation

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.

Contributions

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 github.com/dan-koller/minesweeper.git

• 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!

Stack

• Node.js 19
• React 18