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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.