🚨 Big Announcement! 🚨 Hey everyone! I've made a big decision for this channel-I've turned off ads on all my videos! That's right, you can now enjoy all my content ad-free! This means I'm earning $0 from ad revenue, but I believe this is the right move to make your viewing experience better. If you find my content valuable and want to support my work, there are several ways you can help: Like & Share: Simply liking the video and sharing it with friends helps a lot! Subscribe & Hit the Bell: Stay updated and never miss a new video. RUclips Thanks: Use the "Thanks" button below to send a one-time donation. Join the Channel Community: Get exclusive perks and behind-the-scenes content. Buy Me a Coffee: buymeacoffee.com/CodeExplained PayPal Donation: www.paypal.com/paypalme/CodeExplained Every little bit counts and goes directly to creating more high-quality content for you all. Thank you so much for your continued support! Let’s keep growing and learning together! 🌟
Thank you so much for this enlightening video. I much appreciated you going step by step, deciphering the algorithm, to THEN put it in code. You’re a natural Teacher.
Thank you for the very well explained, in depth tutorial. This very much helped me gain more understanding on working on 'canvas' . No complaints, much appreciated!
You're an amazing teacher. You made me make my mind to challenge this project and feel confident since I think I could understand what this is about thoroughly for the first time. I might be studying hard the formidable JavaScript monster thanks to you.
Thanks for your very good game in js. Question: in lock(), please recheck that adding drawBoard() at last might break the game so that the first tetrimino from top will go down through the bottom wall then disappear.
Very interesting tutorial! At the moment i'm converting this game to React hooks, learned a lot about x and y coordinates. I like the way you explaining, firts what you trying to archieve and only then go to code. Genius. P.S. the way you use for loops its just incredible, you must be experience game developer.
31:30 You didn't actually have to define each rotated piece because if you took the rows top to bottom, and wrote it as columns from right to left, you would get the rotated piece. For example, you can see 1 1 0 in Z[0] as the third column in Z[1], and 0 1 1 in Z[0] as the second column in Z[1]. I just know that's how programs like MS Paint do it.
Yeah that's a way of doing it, but I choose to do it the easy way. Still your way of doing it is the right way, cause you won't have to repeat yourself. Thanks.
Can you do these sorts of tutorials with algorithms and data structures in mind? I really appreciate that you really do break down all the logic in your videos.
The result and the process is really good, i would only change the way how you rotate pieces, by replacing consts Z,O by a function that rotates a matrix
Code Explained You're the only one who first explains the logic and then proceeds to the actual coding process. I'm looking forward to more tutorials from you!
@@CodeExplained First of all, a very big thank you. Then, I think your concept is very powerful. Your project has a lot of future if you continue to post regularly. By the way, are you thinking about posting other videos?
How to solve if there is ball of tetris instead of tetris then how to remove three ball if the three ball touches each other of same color either horizontally or vertically
Thank You. You are explaining very well all the details. Could you make another project about how to make a multiple choice test? Please share more project or Javascript Lessons with real-life project like that, memory game, multiple choice test. Thanks again.
I am sorry I could not answer immediately. Something like that multiple choice, the user will pick the answer and continue next question. Each time after the answer or end of the test will calculate the correct answers. If We understand the logic we can increase the question. You are explaining very well. Thanks a lot. QUESTION 1 of 10 Which of the following is a valid HTML tag? O) h1 O) O) O) >h1< the user will click Button to Continue maybe next page or same page. QUESTION 2 of 10 Which of the following is an example of metadata about a webpage? A) The title of the webpage B) The body of the webpage C) An tag on the webpage D) All of the above the user will click Button to Continue maybe next page or same page.
If you learn a framework like Vue.js (which sounds perfect for what your trying to build). You could make something like that really easily. You could have a javascript object array with with two things in each object: question and a letter (a,b,c,d) corresponding to the correct answer. And when the user gets it correct, you could keep +1'ing a variable to keep track of the score. Of course I dont know how much expericne you have with JS but I highly suggest learning vue.js
Greetings. Im enjoying your videos so far but there is one problem. I get an error message saying that "Z is not defined". Since im a noob i do not know how to advance. This happens if i copy paste your code from Github aswell. Any ideas on how to tackle this issue? Regards
It works finally, thanks a lot! By the way, i want to show the next tetromino on the screen, but i have no idea how to do it. Could you give me some advice?
Create another canvas next to the first one. so you can draw the tetromino on it with the same old functions. After the first tetromino appears. go and choose one randomly. save its index. draw it to the 2nd canvas. Repeat the process.
const pieces = [ [Z, "red"], [S, "green"], [T, "yellow"], [O, "blue"], [L, "purple"], [I, "cyan"], [J, "orange"], ]; hw come the shapes arent quoted in a string and they work,here,i am getting error Z undefined,S undefined
What are you doing))))? canvas => id => tetris. And you are write => document.getElementById( // tetris =>this Id , it is not Id => 'canvas'); cvs.getContext('2d'); => output => null let cvs = document.getElementById('tetris'); cvs.getContext('2d');=>it is working!!!
So not sure what I am doing wrong that no one else seems to have a problem with at least no one in the comments. I followed you all the way up to making a red square using brackets live preview. I can not seem to get a red square to appear at all. I have checked and rechecked to make sure that the codes are identical and I still have nothing. I even started a new project and copied everything exactly as the links using github. I have my index.html, tetris.js, and tetrominoes.js. When I do live preview after copying the files I get, This Game was created by code explained and score: 0. Which I understand is written in the index.html. Still new to coding but this leads me to believe that something is not connecting my tetris.js to me index.html. Sorry for long winded description. Hope this is descriptive enough to help fix my problem.
After a while of searching i found out that i needed install brackets-eslint through the extension manager. I am still new to this program so i am not sure if this was the best way to fix my problem. But it has seemed to fix it, for anyone else having this issue.
Hello, I have actually enjoyed your teaching so much because it is the best I have seen on youtube. But there is a problem I have been battling with, the array for the PIECES keeps showing me an error ("Uncaught ReferenceError: Z is not defined") so I can see my piece on the game board. Could you please guide me through the solution? Thanks
When a row is cleared, we move down all the rows to the bottom one by one, if we do this the very top row will be empty (not exists) so we need to create it.
Hello! I'm begginer, and make a game simple Dr. Mario, same the game tetris. Please help me, how to creat pill and remove pill when 4 pill same color with virus (3 dot pill with 1 virus same color > remove them) Thanks a lot!
@@CodeExplained nop :/ i don't now where is it. I have seen the code and moveDown is a function. I will do this again to see if I have the same problem.
How do you do movement I do document.addeventlistner(). (There is stuff in parenthesis) and I get it is not a function Also good tutorial, this is the closest to movement I got
Did you download the starter template from Our Repo on Github? The tetriminoes code is inside a file called: tetriminoes.js The video has two parts, the first when we explain the logic behind the game, and the second part when type the code. there is no other part any where.
you can remove the grid if you want, but that would make the game hard to play, especially when you move down fast a piece and you don't know exactly where the piece will be locked.
when i go to browser and inspect element and console i can see the tetris.js but then its says this: SyntaxError: missing ) after argument list[Learn More]
🚨 Big Announcement! 🚨
Hey everyone! I've made a big decision for this channel-I've turned off ads on all my videos! That's right, you can now enjoy all my content ad-free! This means I'm earning $0 from ad revenue, but I believe this is the right move to make your viewing experience better.
If you find my content valuable and want to support my work, there are several ways you can help:
Like & Share: Simply liking the video and sharing it with friends helps a lot!
Subscribe & Hit the Bell: Stay updated and never miss a new video.
RUclips Thanks: Use the "Thanks" button below to send a one-time donation.
Join the Channel Community: Get exclusive perks and behind-the-scenes content.
Buy Me a Coffee: buymeacoffee.com/CodeExplained
PayPal Donation: www.paypal.com/paypalme/CodeExplained
Every little bit counts and goes directly to creating more high-quality content for you all. Thank you so much for your continued support!
Let’s keep growing and learning together! 🌟
Finally someone explaining how to create Tetris the proper way, thank you!
Thank you so much for this enlightening video. I much appreciated you going step by step, deciphering the algorithm, to THEN put it in code. You’re a natural Teacher.
This looks awesome, shared this with some friends who want to try JS but fear a big time commitment.
Thank you for the very well explained, in depth tutorial. This very much helped me gain more understanding on working on 'canvas' . No complaints, much appreciated!
Thank you.
You're an amazing teacher. You made me make my mind to challenge this project and feel confident since I think I could understand what this is about thoroughly for the first time. I might be studying hard the formidable JavaScript monster thanks to you.
Happy to help ❤
wow , such a useful lesson and amazing explanation , i love how you break it down into pieces .bravoo
Happy to hear that, thanks a lot ❤
Thanks for your very good game in js. Question: in lock(), please recheck that adding drawBoard() at last might break the game so that the first tetrimino from top will go down through the bottom wall then disappear.
Very interesting tutorial! At the moment i'm converting this game to React hooks, learned a lot about x and y coordinates. I like the way you explaining, firts what you trying to archieve and only then go to code. Genius. P.S. the way you use for loops its just incredible, you must be experience game developer.
Happy to hear that, thanks a lot ❤
Awesome tutorial. I like that you did explain all the game logic before diving into the code.
Happy to hear that
31:30 You didn't actually have to define each rotated piece because if you took the rows top to bottom, and wrote it as columns from right to left, you would get the rotated piece. For example, you can see 1 1 0 in Z[0] as the third column in Z[1], and 0 1 1 in Z[0] as the second column in Z[1]. I just know that's how programs like MS Paint do it.
Yeah that's a way of doing it, but I choose to do it the easy way.
Still your way of doing it is the right way, cause you won't have to repeat yourself.
Thanks.
@@CodeExplained Cool, just wanted to let you know.
This is so good,my hope of learning is back,thank you👏
You are the best at explaining stuff. I love your videos.
Thank you.
Awesome video! Well animated and colorful! I will definitely go through this video and teach myself very soon as soon as I get my next chance !
Take your time.
Wasn't even using javascript, but this still helped me!
It works! Thanks for explaining the logic behind the game before writing the whole code. This is really useful. Thanks a bunch!
You're welcome
very good bro. Thank you very much for this tutorials. I watched many tutorials before but they don't explain like this. Thank u
Happy to hear that, thanks a lot ❤
Damn. Gonna watch this when I get the time.
of course, Any time you want :)
Awesome! Keep up the good work. Will share with all my friends.
You are the best of the best. The best tuto ever. You are a killer.
Thanks a lot, I appreciate that.
The best explaination on building tetris.. Thx!
happy to hear that, thanks
Can you do these sorts of tutorials with algorithms and data structures in mind? I really appreciate that you really do break down all the logic in your videos.
Happy to hear that, thanks a lot ❤
I'll try to
The result and the process is really good, i would only change the way how you rotate pieces, by replacing consts Z,O by a function that rotates a matrix
Yeah that's a good way of doing it.
const canvas = document.getElementById("tetris");
const context = canvas.getContext("2d");
const ROW = 20;
const COL = COLUMN = 10;
const SQ = squareSize = 20;
const VACANT = "WHITE"; // color of an empty square
// draw a square
function drawSquare(x, y, color) {
context.fillStyle = color;
context.fillRect(x*SQ, y*SQ, SQ, SQ);
context.strokeStyle ="BLACK";
context.strokeRect(x*SQ, y*SQ, SQ, SQ);
}
// create the board
let board = [];
for (r = 0; r < ROW; r++) {
board[r] = [];
for (c = 0; c < COL; c++) {
board[r][c] = VACANT;
}
}
// draw the board
function drawBoard() {
for (r = 0; r
O meu também apresenta o erro (function Piece):
This constructor function may be converted to a class declaration.
Help!
@@iprih I don't understand. I am completely new to this and it's my first time building a game app. Please help!!!
const PIECES = [
[Z, "red"],
[S, "green"],
[T, "yellow"],
[O, "blue"],
[L, "purple"],
[I, "cyan"],
[J, "orange"]
];
[S, "green"], I think you didn't define S tetromino,, Where Z, T ... J are defined.
Amazing tutorial and great example of a class construct object... thank you sir
Glad you liked it!
Dude, make more. Thanks for your detailed tutorials!
You're welcome.
Code Explained You're the only one who first explains the logic and then proceeds to the actual coding process. I'm looking forward to more tutorials from you!
happy to hear that, and I appreciate what you said, and of course I will make more videos.
Your channel is underrated
I think it's because I don't post often. you know the youtube algorithm takes that in mind.
@@CodeExplained First of all, a very big thank you. Then, I think your concept is very powerful. Your project has a lot of future if you continue to post regularly. By the way, are you thinking about posting other videos?
Best Tetris tutorial. Thank you
you are awosome for beginner level boom . i love it superrrrrrrrrrr
Thanks
How to solve if there is ball of tetris instead of tetris then how to remove three ball if the three ball touches each other of same color either horizontally or vertically
Gonna go through this really soon
Thank You. You are explaining very well all the details. Could you make another project about how to make a multiple choice test? Please share more project or Javascript Lessons with real-life project like that, memory game, multiple choice test. Thanks again.
More tutorials are coming.
Thanks a lot. I hope soon I can see multiple choice test with HTML and Javascript.
do you have an example of the test ?
I am sorry I could not answer immediately. Something like that multiple choice, the user will pick the answer and continue next question. Each time after the answer or end of the test will calculate the correct answers. If We understand the logic we can increase the question. You are explaining very well. Thanks a lot.
QUESTION 1 of 10
Which of the following is a valid HTML tag?
O) h1
O)
O)
O) >h1<
the user will click Button to Continue maybe next page or same page.
QUESTION 2 of 10
Which of the following is an example of metadata about a webpage?
A) The title of the webpage
B) The body of the webpage
C) An tag on the webpage
D) All of the above
the user will click Button to Continue maybe next page or same page.
If you learn a framework like Vue.js (which sounds perfect for what your trying to build). You could make something like that really easily. You could have a javascript object array with with two things in each object: question and a letter (a,b,c,d) corresponding to the correct answer. And when the user gets it correct, you could keep +1'ing a variable to keep track of the score. Of course I dont know how much expericne you have with JS but I highly suggest learning vue.js
This video is amazing and explains everything very well. Thank you
Happy to hear that, thanks.
This really helped for my final year project! Thanks!
Happy to hear that.
Greetings. Im enjoying your videos so far but there is one problem. I get an error message saying that "Z is not defined". Since im a noob i do not know how to advance. This happens if i copy paste your code from Github aswell. Any ideas on how to tackle this issue? Regards
You have to link your HTML file to two external JS files. the first is for the tetrominos and the second is for the general code.
It works finally, thanks a lot! By the way, i want to show the next tetromino on the screen, but i have no idea how to do it. Could you give me some advice?
Create another canvas next to the first one. so you can draw the tetromino on it with the same old functions.
After the first tetromino appears. go and choose one randomly. save its index. draw it to the 2nd canvas.
Repeat the process.
We need more videos 👏👏👏
thanks 😊
Just a heads up on the title
Pure !== Vanilla
Pure = Functional non-mutating code
Vanilla = Without any dependencies
I avoid using Vanilla, because people may think it's kind of a framework.
Pure != Functional non-mutating code, do not put PureScript idea on this "Pure",
en.wikipedia.org/wiki/Purely_functional_programming
This was not a reference to Purescript.
const pieces = [
[Z, "red"],
[S, "green"],
[T, "yellow"],
[O, "blue"],
[L, "purple"],
[I, "cyan"],
[J, "orange"],
]; hw come the shapes arent quoted in a string and they work,here,i am getting error Z undefined,S undefined
Thanks. This is my first go at javascript. How would I replace the colour fills with image files?
Yes you can, you need to load the image first, and then draw the image to your canvas, google that and you will know how.
Great work , you explain steps very good way , any courses on udemy ?
thanks
and no courses on Udemy.
Thank you so much
What are you doing))))?
canvas => id => tetris.
And you are write => document.getElementById( // tetris =>this Id , it is not Id => 'canvas');
cvs.getContext('2d'); => output => null
let cvs = document.getElementById('tetris');
cvs.getContext('2d');=>it is working!!!
Sorry that was a mistake.
So not sure what I am doing wrong that no one else seems to have a problem with at least no one in the comments. I followed you all the way up to making a red square using brackets live preview.
I can not seem to get a red square to appear at all. I have checked and rechecked to make sure that the codes are identical and I still have nothing. I even started a new project and copied everything exactly as the links using github. I have my index.html, tetris.js, and tetrominoes.js. When I do live preview after copying the files I get, This Game was created by code explained and score: 0. Which I understand is written in the index.html. Still new to coding but this leads me to believe that something is not connecting my tetris.js to me index.html. Sorry for long winded description. Hope this is descriptive enough to help fix my problem.
After a while of searching i found out that i needed install brackets-eslint through the extension manager. I am still new to this program so i am not sure if this was the best way to fix my problem. But it has seemed to fix it, for anyone else having this issue.
Good you fixed it
Very cool explanation! 👍🏽
Thank you! 👍
Hello, I have actually enjoyed your teaching so much because it is the best I have seen on youtube. But there is a problem I have been battling with, the array for the PIECES keeps showing me an error ("Uncaught ReferenceError: Z is not defined") so I can see my piece on the game board. Could you please guide me through the solution?
Thanks
Hey Umar,
Did you link the script file where all the tetrominoes ( L, Z, O, ... ) are defined with your html file?
pls where can i get the script file?
@@CodeExplained
thx so much👍
nice
Thanks
45:42 please what do you mean that the top row has no rows above it? do u mean: if the above row is full then it will be cleared ?
When a row is cleared, we move down all the rows to the bottom one by one, if we do this the very top row will be empty (not exists) so we need to create it.
where is the pieces define in the codes (how to know the shape of the pieces (the 0 and arrays) ,you didn't write this in codes)????
It's there, the code is inside a separate js file, called, tetrominoes.js
github.com/CodeExplainedRepo/Tetris-JavaScript/blob/master/tetrominoes.js
Thanks bro
Sweet Video! Is there a way to remove the black lines in the game board but keep the outer black lines?
For the stroke of the board squares, make it white, and the ones for the pieces make it black.
Excellent!!! Thank you!!!
You're welcome :)
Why is the O piece a 4x4 Matrix? There is no point in rotating the O piece
🙈
Best tutorials! May I know the software you use for the slides?
Thanks, it's PowerPoint by Microsoft.
@@CodeExplained thank you
Great tutorial!
Glad you think so!
28:55
??
I'm getting the error " SyntaxError: expected expression, got '
Ok, I figured it out, and i feel stupid lol. the "
Heya! He's posted a link to github on the description. Once you're there you can compare you codes with his and sort it out.
51:22
??
Hello!
I'm begginer, and make a game simple Dr. Mario, same the game tetris.
Please help me, how to creat pill and remove pill when 4 pill same color with virus (3 dot pill with 1 virus same color > remove them)
Thanks a lot!
Did you figure out how to do it?
Thanks you very match!
You're welcome
adds: Как инвестировать на Бали? + fireblocks
so good !!
Happy to hear that, thanks a lot ❤
🤩😍😍🥰🥰🥰🥰🥰😍😍😍🤩😍😍🥰🥰🥰🥰🥰
Mine isn't working. There is this message on thé console : moveDown is not a function on game line 274
did you fix the problem?
@@CodeExplained nop :/ i don't now where is it. I have seen the code and moveDown is a function. I will do this again to see if I have the same problem.
How do you do movement
I do document.addeventlistner(). (There is stuff in parenthesis) and I get it is not a function
Also good tutorial, this is the closest to movement I got
Thanks.
when you added the first piece, after the p.draw thing, it pops up a error on inspect, that .length of undefined cannot be read, at line 73
andno piece aswell
It means you want to get a length of an array which is not defined yet.
check if you typed right the name of the array.
Ive checked that dozens of times, and checked and i have the exact same script
Checked everything again, all similar
Show me your code.
Please post a video where the tetriminoes exist.
My game has no display.
Thank you please notice this.
And where the hell is the part 2 of the video? Everytime i click the link the browser goes to this previous video. >.
Did you download the starter template from Our Repo on Github?
The tetriminoes code is inside a file called: tetriminoes.js
The video has two parts, the first when we explain the logic behind the game, and the second part when type the code. there is no other part any where.
isnt ctx.scale(20,20) better?
I think it won't work, did you try that ?
at line 191 138 and 97 . it says length undefined
the length of what ?
@@CodeExplained piece.collision piece.movedown and drop
Show me your code
@@CodeExplained const cvs = document.getElementById('tetris');
const ctx = cvs.getContext('2d')
const ROW = 20;
const COL = COLUMN = 10;
const SQ = squareSize = 20;
const VACANT = 'White';
//color of empty square
//draw square
function drawSquare(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x * SQ, y * SQ, SQ, SQ);
ctx.strokeStyle = 'Black'
ctx.strokeRect(x * SQ, y * SQ, SQ, SQ);
}
drawSquare(0, 0, 'red');
//create the board
let board = [];
for (r = 0; r < ROW; r++) {
board[r] = [];
for (c = 0; c < COL; c++) {
board[r][c] = VACANT;
}
}
//draw the board
function drawBoard(){
for (r = 0; r < ROW; r++) {
for (c = 0; c < COL; c++) {
drawSquare(c,r,board[r][c]);
}
}
}
drawBoard();
//pieces and their color
const PIECES = [
[Z,'red'],
[S,'green'],
[T,'yellow'],
[O,'blue'],
[L,'pruple'],
[I,'cyan'],
[J,'orange']
];
//initiate piece
let p = new Piece(PIECES[0][0], PIECES[0][1]);
//The Object Piece
function Piece(tetromino,color){
this.tetromino = tetromino;
this.color = color;
this.tetrominoN = 0; //we start from first pattern
this.activeTetromino = this.tetromino[this.tetrominoN]
//control the piece
this.x = 3;
this.y = 0;
}
//fill function
Piece.prototype.fill = function(color){
for (r = 0; r < this.activeTetromino.length; r++) {
for (c = 0; c < this.activeTetromino.length; c++) {
//we only draw occupied squares
if( this.activeTetromino[r][c]){
drawSquare(this.x + c,this.y + r,color);
}
}
}
}
//draw piece to board
Piece.prototype.draw = function(){
this.fill(this.color);
}
//undraw a piece
Piece.prototype.unDraw = function(){
this.fill(VACANT);
}
//move piece down
Piece.prototype.moveDown = function(){
if(!this.collision(0,1,this.activeTetromino)){
this.unDraw();
this.y++;
this.draw();
}else{
//we lock piece and place new
}
}
//move piece to right
Piece.prototype.moveRight = function(){
if(!this.collision(1,0,this.activeTetromino)){
this.unDraw();
this.x++;
this.draw();
}
}
//move piece left
Piece.prototype.moveLeft = function(){
if(!this.collision(-1,0,this.activeTetromino)){
this.unDraw();
this.x--;
this.draw();
}
}
//rotate the piece
Piece.prototype.rotate = function(){
let nextPattern = this.tetromino[(this.tetrominoN + 1)%this.tetromino.length];
if(!this.collision(0,nextPattern)){
this.unDraw();
this.tetrominoN = (this.tetrominoN + 1)%this.tetromino.length;//(0+1)%4 => 1
this.activeTetromino = this.tetromino[this.tetrominoN];
this.draw();
}
}
// collision function
Piece.prototype.collision = function(x,y,piece){
for (r = 0; r < piece.length; r++) {
for (c = 0; c < piece.length; c++) {
//if square empty skip it
if(!piece[r][c]){
continue;
}
//coordinates of piece after move
let newX = this.x + c + x;
let newY = this.y + r + y;
//conditions
if(newX < 0 || newX >= COL || newY >= ROW){
return true;
}
// skip newY < 0; board[-1] will crash game
if(newY < 0){
continue;
}
//check if there is already locked piece on board
if(board[newY][newX] != VACANT){
return true;
}
}
}
return false;
}
//control piece
document.addEventListener('keydown',CONTROL);
function CONTROL(event){
if(event.keyCode == 65){
p.moveLeft();
dropStart = Date.now();
}else if(event.keyCode == 87){
p.rotate();
dropStart = Date.now();
}else if(event.keyCode == 68){
p.moveRight();
dropStart = Date.now();
}else if(event.keyCode == 83){
p.moveDown();
}
}
//drop the piece down every 1sec
let dropStart = Date.now();
function drop(){
let now = Date.now();
let delta = now - dropStart;
if(delta > 1000){
p.moveDown();
dropStart = Date.now();
}
requestAnimationFrame(drop);
}
drop();
I need help the pieces are not moving down or spawning
Did you fix the issue? if not take a look on your console, and say what errors did you got.
Смотрю рекламму, кликаю по ссылке.
I'm getting an error saying that z is undefined, which is why I cannot draw the z shape. Anyone know how to fix that?
did you type in Z or z ?
@@CodeExplained it's ok I figured it out thanks anyways
good
I'm getting this same problem, can you remember how you fixed it?
Awesome!
One bug: in both your version and mine - if I hold 'down' - the piece can get locked in midair.
Any idea why?
omg. It's just my 'night mode' filtering out yellow to 'whiteish' colors lol!
No problems!
Happy to hear you fixed the problem.
Can I pay for the source code by subscribing to it?
You don't have to pay for anything.
Thank you
Fenkshin!
Old videos :D
didn't know tetris had a visible grid
you can remove the grid if you want, but that would make the game hard to play, especially when you move down fast a piece and you don't know exactly where the piece will be locked.
14:16 I thought JavaScript was case sensitive?
??
@@CodeExplained never mind at this point
okay
Why I couldn't run it? everytime I tried to run it this error came up, "the keyword 'const' is reserved.
Did you use const as a name of a variable?
SSO add
💕💓💓💓💓💕💕💓💓💓💓💕💓😍💕
I watch ads and click on links.
It's not working my phone
You need a physical keyboard.
:)
:)
1:16:06 what happaned
What do you mean ?
@@CodeExplained how one of the purple tetromino pieces are at right corner.
I think cut the video there, that's why you might have seen something strange.
get context of null what the heck JS.
Make sure you don't have a typo in your canvas id.
my bad it should be 2d lowercase not 2D uppercase
i dont know why but i never saw a single thing in my browser...
did you link your HTML file with your JS file.
when i go to browser and inspect element and console i can see the tetris.js but then its says this: SyntaxError: missing ) after argument list[Learn More]
it means you're missing a ")" somewhere in your code.
*js*
JS
for no reason u r making it complicated.