Tetris for Intro/Intermediate Programmers (CS Scholars update)

Tetris for Intro/Intermediate Programmers (CS Scholars update)
Step 2: Creating and Drawing the Board

Let's get started:
Download the starter file from the course website. Note that we've added two functions - gameDimensions() and playTetris().

gameDimensions() returns a four-element list containing the dimensions of the game. These are:
- rows: the number of rows in the Tetris board. The default value is 15.
- cols: the number of columns in the Tetris board. The default value is 10.
- cellSize: the size of a cell in the Tetris board. The default value is 20.
- margin: the size of the margin around the board. The default value is 25.

By changing the dimensions returned by this function, you can change the size and shape of your board.

playTetris() will call gameDimensions(), calculate the width and height of the board, and call runSimulation() to start the game

Writing the init(data) function:
First, we'll set up the game state. Call gameDimensions() in your init(data) function to set data.rows, data.cols, data.cellSize, and data.margin to the appropriate values.

For our purposes, a "board" is a 2-dimensional list of color names (strings like "red"). Our goal here is to allocate the board in the init function, and then to draw the board in our draw functions (which will be called by redrawAll).

Now we need to allocate our board as a 2-dimensional list of names of colors, and fill it with our emptyColor ("blue"), as all cells are empty to start the game. We also need to store this board, and the emptyColor, in the data object (data.board, data.emptyColor).

To set up an empty board, use a loop to construct each row of the board, and add each row to the board variable as you go. The repetition operator (*) is useful for generating a row containing a specific number of "blue" strings. Use data.rows and data.cols to get the 2D list size!

To help us test our code, we will add a few lines in the init function (init) to pre-load a few cells in the board with some colors. This code will be removed later on. In particular, we will paint the top-left cell red, the top-right cell white, the bottom-left cell green, and bottom-right cell gray. Here is our temporary code:

    # pre-load a few cells with known colors for testing purposes
    data.board[0][0] = "red" # top-left is red
    data.board[0][data.cols-1] = "white" # top-right is white
    data.board[data.rows-1][0] = "green" # bottom-left is green
    data.board[data.rows-1][data.cols-1] = "gray" # bottom-right is gray

Writing the drawBoard() and drawCell() functions:
Our main draw function, redrawAll, will draw the background of the entire game (orange). Note that width and height have already been stored in the data object for you. Then it will use top-down design and call a new function, drawBoard(canvas, data), to draw the board.

To draw the board in the drawBoard function, we simply iterate over every cell (with two variables running over every row and column) and repeatedly call the drawCell(canvas, data, row, col) function, which takes 4 parameters: the canvas, the data, the row of the cell, and the col of the cell.

Finally, the drawCell function must draw the given cell using the color stored in the board corresponding to that cell (that is, in board[row][col]). We'll draw the cell with a rectangle in the cell's color and an extra-large outline. Make sure to account for the margin on the outside of the board!

Here is how our code should draw the board at the end of this step. If your code does not run, or if your board does not look like this, it's better to stop and fix this now before going any further! Make sure that the colors are located in the correct corners, and that the board is centered in the window. Now would also be a good time to try changing the dimensions in gameDimensions() to make sure that the board adapts as we expect.

David Kosbie
Carnegie Mellon University
koz@cmu.edu