Tetris − LX

General thoughts:
For this game I used two different containers: one complete container including the walls and an inner container without the walls (this is the space where the bricks can be moved around). The latter one is used for the graphical display (see the HTML table at the bottom) and the first one for internal processing (see the Spielfeld[] array).
Also in this game I tried to compress everything in one file. There is not a single external graphic needed since everything works with changing background colors of table cells. In this game I used black as the background color of empty cells and other colors for the bricks. Of course you can change these colors as you like but remember to change every occasion of it in the code below.

---

This array describes the bricks. If you have a 4×4 matrix and name the elements from the lower left to upper right with the formula row×10 + column you can get the four parts of one brick by putting a mark into the element you come to, when you substract one of the numbers of a quartet from the upper left element (33). The four quartets stand for the 4 positions a brick can have.

XXXX

XX
XX

XX
  XX

  XX
XX

XXX
X

X
XXX

XXX
  X

This array describes the container. It's a matrix of 12 columns and 17 rows. The 1s say an element is set and the 0s say it is empty. You have to turn that matrix upside down and mirror it to get the container, so the lowest row and the first and the last column are already set (these are the walls of the container).

Now to the general variable definitions. First we need some counter variables for loops.

Now a variable that contains how a brick is rotated. If it's 0 then the brick lays like the first quartet of the Bricks[] array shows, if it is 3 then look at the last quartet.

This is the variable that contains the number of the current brick. This number represents the row in the Bricks[] array (remember, it begins with 0).

This variable is the position where the brick is thrown in. It marks the upper right corner of the brick's 4×4 matrix in the inner container.

Position holds the current cell of the upper right corner of the brick's matrix.

Those variables contain the positions of the 4 parts of the current brick. The ones below are 4 temporary variables for the same purpose.

blah is for recalling a function (you'll see below) and unten is a flag whether a brick reached the ground/another brick or not.

This is the color of the current brick, lost checks if the game is over (or paused), Leerzeile is a flag if there was a line to clear and 1 / Speed is the current rate of the stones falling down in seconds.

next contains the next brick, Level is the current level (go figure), Linien is the amount of lines that were cleared in one turn and finally Punkte is the current amount of points.

Now to the game's functions. This one displays the current brick. At first it determines the positions of the four parts of the brick and stores them in the appropriate variables. Then it checks if it would overlap a brick which is already in the container because then the game is lost (the check if the brick hits the ground comes further below). However if that isn't the case the 4 parts are displayed in the current color.

Contrary to the function above this one hides the last drawn brick. Of course you have to delete the last frame before you can draw the next one.

This function calculates the cell of the outer part of the container which belongs to Zelle in the inner container. The parameter was is submitted because the inner container doesn't include the walls. So if you need to check if you hit a wall with your brick you also have to submit a value for was so that it returns the (outer container) cell left, right or below the inner container one.

This function is called when the brick is rotated. At first it sets the current Modus variable. Afterwards it puts the new position of the current brick in 4 temporary variables.

This part checks if there is already another brick in the way when you turn the current one or if you would hit the wall by turning. If so the function quits without doing anything, if not it finally rotates the brick, hides the last frame and displays the next one.

The next function is either called automatically (when one cycle is over and the brick falls one level) or when the user presses the DOWN key. It only checks if the brick hits another one or he ground (note the use of the was parameter of the NiS() function) and if not is descends it one level.

The following two functions work basically the same. They are for left/right movement of the current brick.

Now this part is for the key detection. Internet Explorer does this different than other browsers so at first there is abrowser check (IE is the only browser that returns true if you call document.all).

This function lets the bricks fall. If the game is lost of course it does nothing. If this is not the case it checks if the brick hits the ground with the next movement.

Now if the brick would hit the ground the current amount of points is increased, Position, Modus and unten are reset and a new random brick is created.

Also this is the part where the outer container (the Spielfeld[] array) is updated. Then it is checked if this brick completed a line (the Zeilen() function call). Finally the current amount of points is submitted and the next frame is drawn. Afterwards the function calls itself after a certain amount of time to create an endless loop of falling bricks.

This function selects a random brick. At first it is checked if next is 11 (which is only the case when the game just started). Then it must create a next brick at first, otherwise next would already contain a value for the next brick.

Now the next brick becomes the current one stored in temp and a new random next brick is created.

This part selects the color for the next brick and afterwards draws it into the smaller preview container which in the game is right of the bigger one.

Now the color for the current brick is determinated and the current brick is returned.

Every game must be initialized. This happens here. This function is called every time you press the New Game button. It hides this button, resets all values, clears the container and starts the game by calling the appropriate functions.

This function seeks for complete lines and clears them.

This loads the first element of a row into temp. Afterwards it's checked if every element in this row is the same in the outer container (since the walls are set to 1 all inner elements have to be 1, too).

Now the line counter is increased (for calculating the points later) and the correct output is created. Then all elements of this row are replaced with the elements of the row above (in the inner and outer container).

This part is needed for the last row which has no row above. So its background color is just replaced with the blank color and the appropriate Spielfeld[] elements are reset to 0.

Now the points are calculated like explained in the description.

If the game is over the New Game button has to be displayed...

Now to the HTML part of the game. As I said before the game doesn't use any graphics. Everything works with the change of background colors in the following table:

This is the left wall cell (of course you can choose another color but grey for it), the first row of inner container cells and the right wall:

As you can see each cell has it's own ID representing the inner container cell. Now for the rest of the inner container cells:

... and the floor:

This is the small preview table which shows the next brick to come:

These are the buttons for movement for browsers which don't support keyboard detection (such as Opera). The spacebar is used to rotate bricks but it also hits the button which is currently in focus, so to cause no side effects I remove focus from the button with the this.blur() function.

The Pause button (it toggles the lost variable because when this is 1 the Verlauf() function stops):

The output fields for the amount of cleared rows, the level number and the current amount of points:

The New Game button:

Now finally the code that detects if a key is pressed: