Code a Minecraft Clone with JavaScript, React, Three.js – Tutorial
By freeCodeCamp.org
Published: Sep 20, 2022“
Learn how to code a playable Minecraft clone using React, JavaScript, and Three.js. You will learn about many React concepts such as useState, useEffect, useRef, custom Hooks for State management, and more. And you will be able to apply the principles to create other 3d games in JavaScirpt.
Course created by Daniel Bark. Check out his channel: https://www.youtube.com/c/barelycoding
Finished Code: https://github.com/danba340/minecraft…
Starting Code: https://github.com/danba340/minecraft…
Demo: https://minecraft-freecodecamp.vercel…Contents
- (0:00:00) Boilerplate
- (0:03:56) Sky
- (0:05:46) Textures
- (0:07:48) Ground
- (0:15:11) Player
- (0:25:43) Keyboard input
- (0:32:03) Movement
- (0:41:26) First person camera
- (0:46:25) State management
- (0:49:55) Cube component
- (0:58:02) Add/Remove Cubes
- (1:09:34) Texture Selector
- (1:21:34) Save world
- (1:27:31) Hover cubes
- (1:30:28) Outro
”
Tag: useEffect
[#Webdesign #Coding] Code a Game Using React + Data Fetching with useEffect
Code a Game Using React + Data Fetching with useEffect
By LearnWebCode
Published: Jul 19, 2022“
Let’s build a dog guessing game that fetches data from an API. My premium courses and coupons: https://learnwebcode.com/courses/
GitHub starter link: https://github.com/LearnWebCode/vite-…
GitHub Finished Product Reference: https://github.com/LearnWebCode/react…CONTENTS:
- 0:00 Intro
- 1:42 Starter Setup
- 3:05 Fetching Dog API Data
- 7:36 useEffect Data Fetching / Strict Mode
- 16:22 Getting Data Ready for Questions
- 24:36 State with Immer Reducer
- 36:52 Creating Questions
- 41:46 The JSX Game Interface
- 48:32 Game Logic
- 53:48 Time Clock & Hearts UI
- 1:02:38 Game Over Screen
- 1:11:07 Actually Counting Down Time
- 1:17:01 Preload Images
- 1:19:58 High Score Local Storage
Follow LearnWebCode for updates on new videos or projects:
- Instagram: https://www.instagram.com/javaschiff/
- Twitter: https://twitter.com/learnwebcode
- Facebook: https://www.facebook.com/Brad-Schiff-…
- Twitch: https://www.twitch.tv/learnwebcode
”
