How to Build Tetris with JavaScript and React

[@RestfulCoder]

Let me know if you have any questions or topics you'd like to see me cover more in future videos. Thanks for watching!

[@fatemehfaraji3366]

Thanks again, sure I will do that

[@zelator29]

Pro: super inspiring journey through completion of a fabulous game, just the right amount of time and focus on different subjects. Didn't get lost in the woods or waste time needlessly.
Con: bg music

[@PATRICKCHUAD]

Thank you for this video. I'm learning react js and this is a big help for me to learn React. Please continue to have react js project.

[@RestfulCoder]

Thanks for watching!

[@suryaprakash-sh5bf]

Best thing I ever watched learned a lot

[@tarungupta8668]

suggest you to remove the bg music as it reduces the focus a lil......but awesome tutorial !!

[@MrMalinois12]

I loved this i coded along and learned a lot thank you so much!!! i will be theaking this to see what else i can come up with!

[@kevinhughes7575]

Thanks so much for that! Great video!!!

[@kevinhughes7575]

Just one thing: the speed of the piece dropping does not increase automatically by level.

[@twizt3dgaming33]

the issue that im running into is when dropping the pieces is counting the 0s of each tetromino as a piece that can be collided with so im getting space between pieces and when i move a piece left or right the ghost pushes any placed piece off the board if it ends up colliding with a piece ... im lost as fuck trying to figure it out with how you organized everything? a little guidance please?

[@aidanh4550]

Thank you for this!!

[@Blas-n4t]

There's a problem with the useDropTime hook: because setState is asynchronous, when setting dropTime it returns 'null', so you can't increase drop speed, it is always the initial speed

[@mici2567]

Thanks a lot for the tutorial It's very helpful !!

[@MrAlbinoPikachu]

Super awesome video!!

[@yousefo.8091]

Legend

[@i1i111i1ii]

Hi, Can you help me with this error?
Uncaught TypeError: Cannot set properties of undefined (setting '5')
Tetrominoes.js:94
It is exact same code!

[@RestfulCoder]

The code is trying to set a value on a missing/undefined object. You could trace why it is unsefined.

[@fatemehfaraji3366]

Hi I'm the first commenter, wish you the luck from Iran 🇮🇷

[@fatemehfaraji3366]

Actually I'm going to make this game with you, that's what I was searching for. Thanks so much

[@erichComDesespero]

Excellent tutorial, not finished yet, but close.
On the pause button, to avoid mixing up the logic with the auto drop interval, I've created a separated usePause hook, where it uses the pause and resume drop time functions, but it's easier to see if it's paused by the user itself (it has an isPaused boolean) and I cant prevent the user to move the pieces when the game is paused. With only the dropTime, pauseDropTime and resumeDropTime would be harder, because when you press a down command (slow or fast drop) it would stop the dropTime and it would be impossible to know if it was an actual pause or a down key.

[@tombonhomme8720]

Hey would it be possible to have the help of someone ? When I put the Tetris in FullScreen the board"s height is too big making the screen half purple half white and its not realy working unless the screen is in tablet size

[@RestfulCoder]

There's some minimal css for the board preview containers. You could try changing that CSS to a more fixed layout.

[@tombonhomme8720]

@@RestfulCoder how so ?

[@Jerry-e7p]

thank you~~

[@YumiKoizumi]

Can I import the project in VS Code?

[@RestfulCoder]

Yes. Just download the zip, unzip, and open the folder from vscode.

[@muscaiu]

Fix for bug - input losing focus when clicking anywhere on the page.
In useInterval.js inside the tick() function add this: (or you can useRef, but it's too long for a youtube comment )
const gameControllerInput = document.querySelector(".GameController");
gameControllerInput.focus();

[@kevinhughes7575]

Does this still work when the game is paused?

[@Blas-n4t]

It doesn't work because when the game is paused tick() function stops. To prevent this, instead changing tick() you could add
onBlur={({ target }) => target.focus()}
on the
@@kevinhughes7575

[@tthehappiness]

how create game over text

[@emrebasar3129]

is this a little bit hard to understand or am I too stupid :D, tell me

[@dioencantado7642]

why there is so many ads

[@andycouto7688]

Thanks for the video, I found this to be a great tutorial for a beginner to learn React.
It took me a moment to figure out why if I fast dropped quickly to a game over it allowed me to keep placing pieces until a slow drop brought the game to a game over state (with a warning in the console).
By also incrementing the delta.row by 1 in the fast drop case in AttemptMovement I was able to fix the issue.
if (action === Action.FastDrop) {
isFastDropping = true;
delta.row += 1;
}

[@RestfulCoder]

Good catch!

[@anubhavsinghdev]

38:20

[@임병욱-k7c]

so difficult..🤣

[@RestfulCoder]

Sorry. Maybe start with the working code and make adjustments or copy bit by bit.