Write a Tetris game in JavaScript

In this episode I write a Tetris game in JavaScript from scratch.

We will look at
* Drawing on a canvas
* Rotating a matrix
* Rudimentary requestAnimationFrame listening
* Handling keyboard input

Since we are writing ES6 this code might not run on all browsers yet. I was running Chrome 53 when I wrote this and if you wish to follow I recommend you do too.

The initial HTML can be found here:

Source code with step-by-step commits:

Music:
Demoscene Time Machine

[macaronivirus]

That's an amazing quality of code, almost piece of art.

[DanielWilliamsThink]

I really enjoyed this video. There aren't many functional programming builds like this on YouTube. Very well produced and edited too! Keep it up

[markblais]

Your speed is just perfect. I use pause and research your actions if I don't understand them right away and a lot of other videos come with a lot of vocal pauses and uh's that I get bored and start to yawn. Thank you!

[JoshuaHeagleDev]

Wow, that was a really clever way of swapping two variables. I loved that, will start using that going forward.

[cheshire_cat_]

I didn't know so much about JS. Like list (matrix) for each, or floor with "... | 0", or continue having a goto property. Amazing channel, keep it up

[Trophonix]

If you want the original tetris colors, here:
const colors = [
null,
'purple',
'yellow',
'orange',
'blue',
'aqua',
'green',
'red'
];

[Jermaine_Jones]

This was fantastic! I did this in a day. Everything works from beginning to end. Great job!

[AkioAkemi]

Your stuff is so good. As a game designer in the industry for too many years who always wanted to code. I can't thank you enough for all the coffee you poured into your cup.

[demian]

Well done! Just in case someone is still watching, there is a bug if you try to rotate a piece in the moment when it hits the bottom, it will break! I solved it by adding two lines of code to your rotatePlayer function:

function playerRotate(dir){
const posX = player.pos.x;
const posY = player.pos.y;
let offset = 1;
rotateMatrix(player.matrix, dir);
while(collide(arena, player)){
player.pos.x += offset;
player.pos.y += offset;
offset = -(offset + (offset > 0 ? 1: -1));
if(offset > player.matrix[0].length){
rotate(player.matrix, -dir);
player.pos.x = posX;
player.pos.y = posY;
return;
}
}
}
Hope this is helpful!

[CuriousWithOscar]

This was really cool! Thank you for this cool experience in 2020!
I'm not sure how many people here actually learned of this but I just finished
my Lambda School course and I went about this video because I wanted to learn
how to build games on the web more. This has collisions, for loops, while loops matrix data-structures, and a lot more.
I actually took the time to really understand what was going on and you have an amazing talent with
the debugger tool! Thank you so much! Moving onto the multiplayer!

[oussamaladhari]

i clicked like even before start the coding because of coffee preparation which i appreciate so much ;)
great video thank you

[albertodeagostini]

Thanks for the tutorial, it's awesome!
A small "performance" improvement you can make (correct me if I'm wrong) if to call the draw function only on keypress and when a sec passes. that way you would repaint the canvas only once per user action or because the brick went down by 1

[mladjo]

I recently coded this along with your videos and after tried to improve it (only the single player mode). I have found some (3 so far) bugs.
- Rotation in a well makes the tetromino jump over the well wall (rotate() function logic is not completely correct)
- Next tetromino of the same type stays rotated in the same way as the last one (the new piece should be a clone, not a reference to the array of tetrominos element)
- Pieces should drop in slowly from the top, not just appear at the top right away (more of a feature to make it nicer than a bug)

I also added some more features to my app:
- Levels with increasing speeds (new level each 10 cleared lines, up to 12 levels, I tried to copy the speed from the NES version)
- Score, line counter and level counter are all on the canvas as well
- Next piece is shown to the side of the plying field, below level, line count and score
- Guide lines on the playing field for easier play
- etc

Later on I am thinking of adding more features to it:
- New tetromino pieces
- Variable size of the playing field
- Special pieces(eraser, filler, bomb, ... think the way super tetris plays but better)
- Different game mods
- Highscore table
- etc

I will put it up on my github when I polish it. I will be sure to credit you and this awesome series.

Thank you for the awesome videos.

[julescaneparilabib]

What do I have to say... I love MPJ, I love VideoGames, so I'm bound to love this channel! You are awesome!

[granumuse]

Man you are great! I'm new programmer in JS and I was struggling to find the way of Snake game coding! You helped me enough! And congratulations on your Super Mario coding! Brilliant job!

[KristoferJarl]

The Skånglish is strong with this one, but the dev skillz are stronger. Really nice work! Some of the tricks in here are really nice.
If, by "functional", you mean that your functions should not have side effects, then there are some obvious violations in here, but the code is clear and pretty, so it's no big deal.
Thanks for the inspiring video.

[ezwalduzumaki]

im also freaking happy i found this. i can now do your js projects and just try to implement it all within the time. i took a complete course in js on udemy tho.
you deserve more subs dude, like 1-2 millions or so, i was shocked only 13k. you deserve making a living of this bruh. you should create a js course on udemy. you can more than 100k followers and actually earn alot of money. but i guess youre working for a sick company now and making good money. so gl with life buddy

[xxthat]

many times i wanna give up cause i find it so hard to understand, but now i almost understand what's going on. thank you so much for your video. i learned a lot

[SoCreaty]

How you can dislike this? Its an Expert Video for professionals.
How you did this game is great! Wonderful done. You can learn a lot by watching and following it!

[josefcb]

Awesome. I'm a newbie programming in Javascript. I think is a good exercise to step into the Javascript environment. Thanks for your incredible Job!!!