Tucker Dooley

Software Engineer

Tetris

Play in Browser


I love playing Tetris, so I decided to program it for fun. I decided to use HTML/JavaScript just so I could play it in the browser. For some reason I decided to not use the Canvas element. Everything in this uses divs and css to display the game. I also use setTimeout for the delays.

The board is just a 2d array. I have a shape class, and an array of all the differently used shapes. Which one could easily add their own shapes if they wish. The shape class has an array of points which create the shape. It also has a pivot property which is used to rotate the shape. I use the rotate a point about a point equation to rotate all of the points in a shape about that shapes pivot point. I also programmed in shadows, so the shape class also has a generate shadow function which makes a temporary copy of the shape and moves it down until it hits something, then just renders a greyed out shape there. I also programmed in hard/fast drop, which does the same thing as the shadow function where it just moved down until it collides with something. I also programmed in the classic tetris random selection method. This method generates a bag of all the shapes randomly, and when all of those shapes have been used, it generates a new shape. There is also a score counter which prioritizes tetrises and increases the speed as you play. Programming in the clear line feature was tricky but fun. Everytime a block has been dropped it loops through the points of the shape, and checks the full row for each point ( not repeating points in the same row ), and it checks to see if that row is full, if it is, then it is deleted, and all rows above it are shifted down by 1.

Also upon request from my friends, I have added mobile swiping controls.

Contact