React Three Fiber Game Tutorial: Learn React Three Fiber while coding a Crossy Road clone скачать в хорошем качестве

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