Code Tetris: JavaScript Tutorial for Beginners
video description
Date: 2022-03-14
Related videos
Comments and reviews: 10
BeezCoding
This is a great tutorial -- fun way to practice/review JS. One part I am having trouble with is fully understanding how our freeze function works around 49 min. Even that first line (79 in vid). I understand the .some() method checks if any square of the current tetromino has the classname 'taken' ....and I understand that 'taken' class applies to the invisible row of divs right below the bottom of our playing area. Otherwise I'm lost on what's inside the parens for the .some and the .forEach, and how index works in there. I am not able to figure out how this function is getting the tetromino to stay at the bottom and then allow subsequent ones to stack. Can you walk through what's happening in more detail on lines 79-80 ?
reply
This is a great tutorial -- fun way to practice/review JS. One part I am having trouble with is fully understanding how our freeze function works around 49 min. Even that first line (79 in vid). I understand the .some() method checks if any square of the current tetromino has the classname 'taken' ....and I understand that 'taken' class applies to the invisible row of divs right below the bottom of our playing area. Otherwise I'm lost on what's inside the parens for the .some and the .forEach, and how index works in there. I am not able to figure out how this function is getting the tetromino to stay at the bottom and then allow subsequent ones to stack. Can you walk through what's happening in more detail on lines 79-80 ?
reply
MaterialKnight
1:35:54 A little observation about that variable (displayIndex). Correct me if I'm wrong:
Its value is always 0 (bc:
1. There is nothing to change its initial value of 0 (initialized at the same time of its declaration, in line 154) and...
2. It was changed from a let-variable to a const-variable
)
The thing is: This variable (displayIndex) is only used twice (in lines 174 & 175), for a sum in both cases. But given that its value is 0, and 0 + x = x, the variable displayIndex seems to have no purpose, so I removed it from all lines where it is used (lines 174 & 175), and the game seems to work the same.
reply
1:35:54 A little observation about that variable (displayIndex). Correct me if I'm wrong:
Its value is always 0 (bc:
1. There is nothing to change its initial value of 0 (initialized at the same time of its declaration, in line 154) and...
2. It was changed from a let-variable to a const-variable
)
The thing is: This variable (displayIndex) is only used twice (in lines 174 & 175), for a sum in both cases. But given that its value is 0, and 0 + x = x, the variable displayIndex seems to have no purpose, so I removed it from all lines where it is used (lines 174 & 175), and the game seems to work the same.
reply
Creepercraft
Ok, too much people have this problems, its common, --uhum-- --cough-- there are 7 PIECES, not 5, also, the pieces don't immediatly place when they touched another piece or the base of the board, u have always 1 second to move the piece and avoid it to place, when u do this that 1 second counter resets and u can still moving and rotating, but not forever, u can rotate the piece about 6 times until it places and u have 3 seconds of crazy moving until it places
reply
Ok, too much people have this problems, its common, --uhum-- --cough-- there are 7 PIECES, not 5, also, the pieces don't immediatly place when they touched another piece or the base of the board, u have always 1 second to move the piece and avoid it to place, when u do this that 1 second counter resets and u can still moving and rotating, but not forever, u can rotate the piece about 6 times until it places and u have 3 seconds of crazy moving until it places
reply
CHad
that sure is a nice CONSOLE panel at the bottom of atom. Sure would like to know how to get one of those. After some googling I was able to figure out how to get a command prompt terminal on atom, but not a console panel like in the video. Not sure if they don't exist for windows or I need to download some other package or what...
reply
that sure is a nice CONSOLE panel at the bottom of atom. Sure would like to know how to get one of those. After some googling I was able to figure out how to get a command prompt terminal on atom, but not a console panel like in the video. Not sure if they don't exist for windows or I need to download some other package or what...
reply
Laura
Hi guys, I'm on Windows 10 home and after installing ATOM I don't have Atom menu on the left hand side. I'm stuck now because I can't install shell commands. Has anyone had this issue? Does anyone know how to make this work? I searched in Command Palette for Window: Install Shell Commands and there was no results found. Thanks :)
reply
Hi guys, I'm on Windows 10 home and after installing ATOM I don't have Atom menu on the left hand side. I'm stuck now because I can't install shell commands. Has anyone had this issue? Does anyone know how to make this work? I searched in Command Palette for Window: Install Shell Commands and there was no results found. Thanks :)
reply
Sent1nel101
Hello Ania! Where can we look up more info on what you were doing to draw the tetrominoes? I have no idea how you were getting the numbers or algorithms to create the shapes. Thanks!
P.S. Windows users: User 'cd.>' no quotes to create files. 'Touch' is not a windows program.
reply
Hello Ania! Where can we look up more info on what you were doing to draw the tetrominoes? I have no idea how you were getting the numbers or algorithms to create the shapes. Thanks!
P.S. Windows users: User 'cd.>' no quotes to create files. 'Touch' is not a windows program.
reply
TheEdge92
Can someone please explain why we get what we get with this logic? Like here -[1, width+1, width-2+1, 2]-. more sense would make something like this
position1: Index 1
position2: Index 1+width2
position3: index 2
position4: i 3-1
reply
Can someone please explain why we get what we get with this logic? Like here -[1, width+1, width-2+1, 2]-. more sense would make something like this
position1: Index 1
position2: Index 1+width2
position3: index 2
position4: i 3-1
reply
RDNKS
45:15 Note to self: add 'draw()' back into the js file before the closing -). Save yourself a lot of time rewatching to figure out why nothing appears at the end of the function.undraw section.
reply
45:15 Note to self: add 'draw()' back into the js file before the closing -). Save yourself a lot of time rewatching to figure out why nothing appears at the end of the function.undraw section.
reply
Maria
I dropped some tears from emotion. Thank you so much for this tutorial. I have always being fan of this game, so I am so happy to was able to code it!. Greetings from Argentina
reply
I dropped some tears from emotion. Thank you so much for this tutorial. I have always being fan of this game, so I am so happy to was able to code it!. Greetings from Argentina
reply
DepressedPenguyn's
What do you guys recommend is the best way to take this all in. For me it is very overwhelmin and wanted what you guys reccommend to understand it a little better?
reply
What do you guys recommend is the best way to take this all in. For me it is very overwhelmin and wanted what you guys reccommend to understand it a little better?
reply
Add a review, comment
Other channel videos
