Play Tetris
Parker has taken multiple classes which have included an assignment to "build a website". Already having a good grasp on developing with HTML, CSS, and JavaScript, Parker decided to make one of these sites as complicated as possible by building a recreation of the video game Tetris. For your enjoyment, it has been included directly below this text.
Note that JavaScript Tetris does not work on mobile devices.
How to Play
Tetris is a puzzle game in which you must move random selections of tetrominoes onto a grid and complete horizontal lines in order to clear them and make more space. As more lines get cleared, the tetrominoes will go down faster, requiring quicker thinking in order to get them in good positions. The player is scored based on the number of lines they clear before the board overflows with tetrominoes.
This game controls using the arrow keys and the space bar.
Use the left and right arrow keys to move the active tetromino left and right.
Use the up arrow key to rotate the active tetromino, if possible.
Use the down arrow key to move the active tetromino downward.
Use the space bar to hard drop the active tetromino to the position designated by its shadow.
You may also use W, A, S, D in place of the arrow keys.
How Does it Work?
JavaScript Tetris takes advantage of the canvas object as well as the CanvasRenderingObject2d interface in order to draw the game board to the screen.
The game board is represented as a 21x10 array of (initially null) values. As the game goes on, this array will be filled with color values. At the start of the game, a current tetromino and a next tetromino will be selected. These could be the same. Each tetromino is represented internally as four arrays of 0's and 1's representing the shape and each rotational state.
The tetrominoes are then drawn onto the screen. The active tetrominoes are drawn over the board, but collision checks are in place to ensure they can only go to valid locations. A shadow tetromino is also drawn at the same horizontal position, but as far down as possible before failing a collision check. Once the active tetromino fails a vertical collision check, then it will be locked into place and its color values are entered into the game board array at the corresponding positions. If at any point a color value is entered into the 21st (or top) row, the game will end.
After a tetromino is set, the game not only checks if the game is over, but also checks for any full lines. If a row has no null values, then it must be full, so all of the values in that row are set to null, and the color values above it gets moved downward. The cleared line counter also goes up. Then, the tetrominoes reset, as the next tetromino becomes the active tetromino, and a new tetromino by random becomes the next tetromino.
Cheat Code
If you find JavaScript Tetris too easy, you can turn on the top speed by pressing the right bracket key ( ] ) while the game is paused. The game automatically gets slightly faster every time 20 lines are cleared, but this is the speed achieved after clearing 200 lines.
Atwood's Law
Any application that can be written in JavaScript, will eventually be written in JavaScript