An example implementation of a top-down 2d game made with React and react-three-fiber

Last update: May 10, 2022

react-three-fiber Game Demo

Game Demo

This repo shows an example implementation of a top-down 2d game made with React and react-three-fiber.

I used the core functionality to create Colmen's Quest and wanted to give you an idea of how a game can be done with React.

This is by no means the best way to build a game, it's just my way. 😊

I suggest you use this code as an inspiration and not as a starting point to build your game on top of it. I also do not intend to maintain this code base in any way.

Get started

You can start the game by yarn && yarn start, then open your Browser.

To get a better understanding of the architecture I used, you may want to read this thread on Twitter.

👉 Also Florent Lagrede (@flagrede) did an amazing job in writing an in-depth walkthrough about this demo.
Make sure to check it out! 👀

I'm happy to answer your specific questions about this demo. Just @coldi me. 👋

Known issues

For this demo I used the current version of Colmen's Quest and stripped everything from it except my core "game engine" files. Some code, especially the player movement, might be buggy because there is no turn-based logic anymore.

I don't use a physics engine and the whole collision and movement logic solely relies on tile positions. Therefore you can only move full tiles in this demo.

There are great libraries like use-cannon that enable physics-based collisions with react-three-fiber. Check it out! I would love to hear what you made with it!

GitHub

https://github.com/coldi/r3f-game-demo
You might also like...

The game wordle made with ReactJS, without writing a line of CSS

The game wordle made with ReactJS, without writing a line of CSS

I made Wordle XD Hello everyone 👋 , I am glad to see you here I know it ain't much but this is the game wordle (popular in twitter recently!) I made

May 11, 2022

A small reddit client for browsing the top posts of r/all - built with typescript and react.

A small reddit client for browsing the top posts of r/all - built with typescript and react.

snoof A small reddit client for browsing the top posts of r/all - built with typescript and react. Desktop Mobile Features responsive infinite loading

Nov 14, 2021

Crypto-Expence-Tracker: keep an eye on the top trends on the market, crypto prices, and all their details

Crypto-Expence-Tracker: keep an eye on the top trends on the market, crypto prices, and all their details

The crypto is a capstone built with React/redux, SASS, and the coinbase API. It helps them to keep an eye on the top trends on the market, crypto prices, and all their details.

Mar 21, 2022

Peer-Learning-Platform - A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations

Peer-Learning-Platform - A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations

A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations. Facilitates students to look at solutions from the perspective of their peers. A platform that goes beyond learning and instils ethics and moral integrity within the community.

Apr 2, 2022

Microsite - a fast, opinionated static-site generator (SSG) built on top of Snowpack

Read the docs | See the live examples | Join our Discord microsite is a fast, opinionated static-site generator (SSG) built on top of Snowpack. It out

Apr 23, 2022

A plateform made for sharing static files with dynamic routing. Made using Express, React SSR, JWT, MySQL.

XeCours A plateform made for sharing static files with dynamic routing. Made using Express, React SSR, JWT, MySQL.

Apr 4, 2022

My React.js implementation of Netflix. Movie data was pulled from TMDB and trailer videos from Youtube.

My React.js implementation of Netflix. Movie data was pulled from TMDB and trailer videos from Youtube.

Roseflix: A Netflix Clone My React.js implementation of Netflix. Movie data was pulled from TMDB and trailer videos from Youtube. View Demo » Report B

May 6, 2022

An implementation of Nim with XState and React with a focus on the use of multiple actors

An implementation of Nim with XState and React with a focus on the use of multiple actors

Nim Game An implementation of Nim with XState and React with a focus on the use of multiple actors. Just want to play the game? Follow this link! Gett

May 3, 2022

A React & react-router-powered implementation of Hacker News using its Firebase API.

A React & react-router-powered implementation of Hacker News using its Firebase API.

react-hn A React & react-router-powered implementation of Hacker News using its Firebase API.

May 9, 2022
Comments
  • 1. Interesting game! I have a similar one

    I'm developing https://github.com/linonetwo/Eternity-Foundation

    Using react-pixi-fiber, and ECS, and capsulate it into electron so it can be published into steam.

    Your work is very nice, I may learn from it if I'm going to write a 2.5D game later!

    Reviewed by linonetwo at 2020-10-01 04:12
Yet another Mastermind game implementation
Yet another Mastermind game implementation

Mastermind Yet another Mastermind game implementation Play https://master-mind.surge.sh Tech Stack React, TypeScript, Tailwind CSS, Vite Development R

Apr 13, 2022
An implementation of Tic-tac-toe game in ReactJS
An implementation of Tic-tac-toe game in ReactJS

Tic Tac Toe An implementation of Tic-tac-toe game in ReactJS. For AI used the Minimax Algorithm. Deployed on Vercel. Play Introduction of Minimax Mini

Apr 27, 2022
Sudoku Game in React: This game is a logic-based, combinatorial number-placement puzzle.
Sudoku Game in React: This game is a logic-based, combinatorial number-placement puzzle.

Sudoku Sudoku is a logic-based, combinatorial number-placement puzzle. Try it here Screenshots 1 2 3 4 Demo Demo Video Contributors Ayan Dhara Grawish

Mar 16, 2022
Star-Wars-Memory-Game - Star Wars Memory Game Using React.js
Star-Wars-Memory-Game - Star Wars Memory Game Using React.js

Star-Wars-Memory-Game Um jogo da memória com tematica do Star Wars. O objetivo e

Feb 25, 2022
Memory-test-game - Memory Testing Game Built With React

Memmory Testing Game This game is currently live and hosted on verce , play it h

Feb 22, 2022
React-realtime-example - Example Demonstrating React with Realtime API Backend

Getting Started with React Realtime Example App This project contains two folder

Jan 6, 2022
Tic Tac Toe game made with React

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 3, 2021
👾 A small logo quiz game made with React
👾 A small logo quiz game made with React

?? Logosweeper A tech logo guess game made with React. Screenshots Build locally $ npm install $ yarn start Tech used Logos repository by gilbarbara'

Mar 6, 2022
Playsnake - A react application made from the classic Snake game
Playsnake - A react application made from the classic Snake game

PlaySnake Sobre | Tecnologias | Como Executar | Licença Sobre Está é uma aplicaç

Feb 3, 2022
A beginner tictactoe 2 player game made in React

Nano React App Default Javascript Template The default template project for nano-react-app. npm start — This will spawn a development server with a de

Mar 21, 2022