1
🇨🇴
Game Development with ReactJS, CSS, and React Three Fiber
2
Agenda.
3
1. ReactJS
4
ReactJS
React is an open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies
With React it is possible to create encapsulated components that handle their own state, and turn them into complex user interfaces.
5
2. Types of games that I have developed with ReactJS and css
6
Puzzle Games
8
A puzzle game is a type of interactive entertainment that challenges players to solve various mental challenges, often involving logic, pattern recognition, and critical thinking. These games present players with puzzles or problems that need to be solved in order to progress.
Puzzle Games
9
Isometric Games
10
An isometric game is a type of video game that employs an isometric projection for its graphics, presenting a three-dimensional environment in a two-dimensional plane.
This perspective creates the illusion of depth and allows players to navigate and interact with the game world from a fixed, diagonal viewpoint.
Board Games
12
A board game is a tabletop game typically played on a flat surface, often with a pre-designed board and pieces.
Board games offer the opportunity to engage in strategic gameplay, often involving dice rolls and card management.
Board Games
13
ThreeJS
14
ThreeJS
15
Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL
React Three Fiber
16
React Three Fiber
17
React Three Fiber is what is referred to as a React renderer. The concept behind a renderer is that we write code in JSX, and then the data is transformed into something else (in our case, a Three.js scene).
R3F was created by Paul Henschel, also known as 0xca0a:
Paul is the founder and manager of Poimandres (PMNDRS), a collective of open-source developers
4. Games with R3f
18
This site up
19
The world spins when you fall off the edge! And the boxes must be placed on the green tiles!
Color IT
20
Move the cube by swiping your finger (or using arrow keys on desktop). The cube has one side to color the blocks and another to turn them white. Color all the blocks to win!
5. DEMO - Bowling 🎳
21
Bowling R3F
22
Conclusions.
23
Resources.
24
25
🇨🇴