Скачать или смотреть React Three Fiber Game Tutorial: Learn React Three Fiber while coding a Crossy Road clone

In this video, we are going to cover how to code Crossy Road again. We already covered this game with Three.js and vanilla JavaScript, so let's see how to make the same game with React Three Fiber. Of course, React Three Fiber also uses Three.js under the hood, but it gives us a different way to build up our game with React. If you haven't watched the previous video, don't worry. We are going to cover everything from the start.

The goal in this game is to move a character through an endless path of static and moving obstacles. We have to go around the trees and avoid getting hit by a car or a truck.

We start with the basic setup: we are setting up the scene, the camera, and the lights. We learn how to draw the player and the map with the trees, and the cars, and the trucks. We cover how to animate the vehicles, and we add event handlers to move the player through the map. Finally, we add hit detection to detect if there's a collision between the player and the car.

👉 You can find the whole game and its source code on
https://JavaScriptGameTutorials.com

0:00 Introduction
1:08 Setting up the Game
12:03 Rendering the Map
23:19 Adding Shadows
26:34 Animating the Vehicles
29:33 Moving the Player
38:05 Restricting Player Movement
40:39 Following the Player
46:01 Generating the Map
52:08 Score Indicator
53:51 Hit Detection and Result Screen
58:59 Next Steps

This game is based on the mobile game Crossy Road: https://en.wikipedia.org/wiki/Crossy_...

Website — http://javascriptgametutorials.com/
CodePen — https://codepen.io/HunorMarton
LinkedIn —   / hunor-marton-borbely  

#r3f #threejs #javascript #game #canvas #codepen