HTML Canvas and JS Tetris Clone

The following took me approximately two weeks, accounting for a few days off in the middle for mental health reasons. It’s not pretty, but it seems to do everything I would expect from a Tetris clone.

  • Different shaped bricks fall from top to bottom, stopping when they either hit the bottom of the game board or another brick
  • The falling brick can be moved left and right using corresponding arrow keys, stopping at the edges of the game board or when colliding with another brick
  • The falling brick can be rotated clockwise using the up arrow key, but only when not colliding with an edge or another brick
  • When the down arrow is pressed, the brick falls to the bottom of the game board or lands on top of the bricks below it
  • Score is kept and displayed in the top-right corner - 10 points per cleared line with each additional line worth ten more, so 1 line is 10 points, 2 is 30 (10 + 20), 3 is 60 (10 + 20 + 30), etc. A message is displayed indicating the number of lines cleared if it is more than one (i.e. “Combo x 2”).
  • The bricks fall slightly faster as the score increases, and the game ends when the bricks reach the top of the game board. At which point, a message is displayed showing the final score
  • There is a button at the bottom right that allows the player to pause and resume the game
  • There is a button at the bottom right that allows the player to reset the game, prompting them first, to be sure

Now, this is obviously a very bare-bones version of a falling blocks game, so I Know there are more bell and whistles that could be added. I don’t have any specific questions, but I would appreciate if someone would take the time to critique my code, looking at things like readability and best practices. I started out by watching the first half of this tutorial: Learn 2D Game Development with JavaScript - YouTube and I plan to watch the one here using React Hooks. Everything past the base structure, though, is my own work/research.

Sorry for writing a book, but I have to admit I’m a bit proud of myself. This is the second project I’ve completed in the last month or so that I’ve seen labeled as “intermediate”. I know in the real world I’m still very much a beginner with a sometimes overwhelming amount to learn. Still, it makes me feel like I have some idea what I’m doing.

Anyway, TL/DR this is my Tetris Clone written with HTML Canvas and Vanilla Javascript:

Any feedback is appreciated, especially as concerns best practice topics like readability and OOP principles.