A Coding Noob Makes Tetris in Javascript

I started off by making the random bag system by randomizing the order of 7 items in an array. Modern versions of Tetris use a bag system to generate their random pieces to avoid common issues such as an I piece drought. I used three separate 10x20 arrays to mark the position of the pieces on the board.(I made this before I knew about grids) One array was colored and was actually used for the display, while the others were used to check for collisions. I had each individual piece saved as a 4x4 array, and to move the piece, I had another 4x4 array called pieceArrayPos that determined the position of the piece on the board.

To rotate the pieces, I hardcoded an array mapping tool that checks each value in a piece array and moves it to where it needed to be inside the same array. However, this did result in a problem where a piece could be rotated at the edge of the board and clipped through it. To load the next piece, I copied the current piece to the position on all three boards, swapped the piece out for the next one, and moved it to the top of the screen. 

As of right now, there is nothing to stop pieces from continuing to clip through other pieces on the board. I added a check into the function that moves the piece to first see if the space it wants to move to is clear, and only move if it is. When a piece locks into place, it is written to permArray, a large screen sized array, and all piece movements now check squares on permArray to see if they are clear.

At the start of this project, line clearing logic was something I was worried about, and it influenced how I made this game. However, with the array system I used for previous stages, it wasn't a problem at all. I simply added the values in each row of the array and cleared all the ones that were full. The remaining lines were moved down, then this process is repeated 3 more times to clear all potential lines.

The game is now only missing the mechanic to hold pieces to be saved for future use, and I added that today. The function simply swaps the position of the current and hold piece, resets the position to the top, and updates a variable to prevent stalling. I also patched the wall rotation bug that was introduced on day 3, which allowed pieces to rotate through walls.

If I ran the project for long enough time, it would inevitably begin to lag due to me not deleting old objects from the screen and simply drawing over them. This was an easy fix with the use of a single removeAll() at the start of the writeToScreen function. I also added UI improvements with text displaying the score, level, and a next piece queue showing 6 next pieces.

I spent the last day of the project fixing various bugs with my implementation, such as a false perfect clear triggered by holding the first piece (this was an easy fix), the game's rotation randomly breaking (this was not an easy fix), and issues with line clearing allowing the whole board to clear at once (this one took me forever to find). The game mostly works now and my teacher kept his promise of letting me play Tetris in class!