3 Hours Coding Tetris Condensed To 20 Minutes | React.js
Tetris holds the world record for the most ports of a video game ever. Let’s unofficially make that one higher by coding a version of Tetris in React!
Note that this video is intentionally very fast paced. The goal here is not for you to spend hours typing every key that I type. I just don’t think that’s an effective way to learn, because then I end up doing all of the critical thinking for you. And if you’re anything like me, by the time you finish a super long video, you have no mental energy left to actually practice.
Instead, if you want to follow along, then follow along with the overall thought process and actually challenge yourself to implement each portion of this application before watching exactly how I do it. Or alternatively, use this video as an explanation of the code and you can use that as starter code for your own larger project where you improve upon what I do in this video.
Completed Code:
https://github.com/ConnerArdman/tetri...
Prepping for your frontend interviews? Use code "conner" for a discount on my course FrontendExpert:
https://www.frontendexpert.io/conner
TikTok: / connerardman
LinkedIn: / connerardman
Video/Coding Gear: https://www.amazon.com/shop/connerardman
Timestamps:
0:00 The Gameplan
0:30 Vite Setup
1:39 Tetris Board
4:51 Custom React Hooks
11:07 Collision Detection
13:35 Keyboard Controls
15:30 Scoring System
16:19 Gameover State
16:36 Upcoming Blocks
17:15 Final CSS Magic
Business/brands 👉 [email protected]
