Tetris in HTML5 for Noobs: Part 4 – Tetriminos

The drawBlock function we wrote last time lets us draw a block at any point on the screen, but it looks pretty flat. If you look at most Tetris games, the blocks have a beveled edge to make them appear three dimensional. We can add this purely stylistic effect to our game to make it look nicer, and it will introduce a few more drawing concepts as well. A beveled edge will have the same base color as the rest of the block, but will appear lighter or darker to simulate different lighting angles. Unfortunately, the RGB colorspace is not well-suited to adjusting the lightness of specific hues. For this, it is easier to use the HSL colorspace. This defines a hue as an angle on a color wheel in the range [0,360], a saturation value between 0 and 1, and a lightness value between 0 and 1. Luckily, we can easily define colors in the HSL colorspace. We’ll modify the drawBlock function to accept a third color hue parameter and use this as the basis for our drawing commands. The updated code looks like this:

The color of the center part of the block is set with the command

This uses the HSL colorspace, using the variable c for the hue, and 100% saturation and 50% lightness. Technically, we are constructing a string by using the + operator before and after c. If c = 0, this expression is equivalent to

After drawing the center square with the appropriate offsets, we draw each of the beveled edges with a different value for the lightness parameter. Each side is a trapezoid, which we define as a path of line segments. Each trapezoid starts with the command

followed by

to indicate the start point. Lines are added my moving the drawing cursor to new points with the command

finally, the polygon is closed and filled with the current color with the command

To draw individual tetriminos, we will create another function that takes a game coordinate, a tetrimino type, and an orientation, and draws it on the screen. Tetris has seven different tetriminos, each consisting of a different arrangement of four blocks.

In the game, tetriminos appear with various orientations, so our function needs to take that into account. Although there is probably an elegant mathematical way to define the tetriminos with their various orientations, I’m going to approach this problem in the simple and explicit way. Our function will use a series of conditional statements to determine which tetrimino to draw and in what orientation. The block locations and colors are explicitly defined relative to the supplied game coordinate. The full code listing is given below.

If you’ve never seen it before, this code introduces the if-else conditional statement. It’s central to all programming languages and allows the program to execute different blocks of code depending on certain conditions. Here, we have an outer layer of if-else statements that checks which tetrimino is being drawn. Note that we represent the tetrimino as a number between 0 and 6 and use the double equal ( ==) to check for equality with the input parameter. One of the blocks will be executed, where in most cases we repeat the process, checking the orientation. Finally, one set of four drawBlock statements will be executed, drawing the appropriate tetrimino. The initialize function draws several test tetriminos, that we can use to validate that our code is correct. The output should look something like this.

The code is getting pretty long now, and we haven’t even added any interactivity yet. You can probably start to see how complicated a complete game can be. I’ll try to keep things as simple as possible while still covering all of the necessary parts. Next time we’ll start working on adding controls to move the tetriminos around.