May 24th, 2008

In our last tutorial we created some tetrominoes for our Tetris game. Let’s write the code to draw them:

First, we need to know what the current tetromino is. That’s another variable that will go next to run_game:

# Remember the user's current tetro
current_tetro = tetro_s

run_game = True

Next we need another double for loop. As you should know by now, double for loops are used to draw grids, and all tetrominoes are just grids.

  for x in range(len(current_tetro[0])):
    for y in range(len(current_tetro)):
      if current_tetro[y][x] == 'x':
        screen.fill(red, ((x+current_location[0])*25, (y+current_location[1])*25, 25, 25))

There’s some new and new-ish stuff in here that I should probably go over again:

  for x in range(len(current_tetro[0])):
    for y in range(len(current_tetro)):
      ...

The len function tells us how long the list is. When drawing grids, the x coordinate needs to draw each column from 1 up to the number of columns in the grid. And the y coordinate needs to draw each row from 1 to the number of rows in the grid. This was pretty easy when we did the first grid, because that never changed and we just put a 5 in for both and everything worked:

# Draw the main grid
  for x in range(5):
    for y in range(15):
      ...

But now we have a problem. We have grids of different sizes and we’d like to draw them all with one block of code. We don’t want to have to write another block of code for each type of tetromino, do we? So instead we let the grid code adapt to the grid that we give it. That’s why we changed that.

The next line should seem familiar. We want to only draw the red square when we have an 'x' in our grid:

  for x in range(len(current_tetro[0])):
    for y in range(len(current_tetro)):
      if current_tetro[y][x] == 'x':
        ...

Now the next line is kind of complicated but I’ll explain it to you bit by bit:

screen.fill(red, ((x+current_location[0])*25, (y+current_location[1])*25, 25, 25))

The new part is adding x and current_location[0], and also, adding y and current_location[1]. What we’re saying here (mathematically) is this: “Draw the red square at this location in my grid, at this location on the screen”. After all that hard work, we finally get to test out our new functionality.

Success! We now have the very beginning of our tetris game. But there’s a problem. Watch what happens when you try to move:

The game isn’t updating properly. We need to fix this. We will do this by adding another line to the while loop, which will clear everything off.

# Add the color black
black = (0, 0, 0)

...

while run_game:
  # Clear off the screen                                                                                                                                                             
  screen.fill(black)

  # Draw the current tetro                                                                                                                                                           
  for x in range(len(current_tetro[0])):
    ...

The fill command clears off the screen for each loop of the game and lets us start new, so we don’t have that problem.

In the next tutorial we will do more player interaction and create the basic rules for our tetris game.