SLIDING TETRIS

Moves:

Note: This is still a work in progress and may contain bugs.

Instructions

This game is similar to the Soviet classic Tetris, except that rows of blocks move up from the bottom of the screen rather than falling one at a time from the top. Your goal is to clear blocks by making complete rows without any gaps. You can slide blocks left and right by clicking and dragging them, and they will fall due to gravity when you let go. You get more points for clearing more lines in one move, so setting up chains is a good strategy. When the blocks reach the top of the board you lose.

About

I made this game in a day, basically to see if I could. Most of the other games on this site involve an HTML5 canvas that I draw on with JavaScript to create the game graphics. In Sliding Tetris, however, everything is pure HTML elements. Each block is just a colored div, and the animations come from CSS3 transition properties. This was a different and confusing way of making a game, and probably led to a lot of the bugs that are still present in the game, but it taught me a lot about manipulating the DOM with JavaScript.