Implementing a grid-based graphics program is a classic milestone in learning computer science. In the CodeHS JavaScript Graphics curriculum, the assignment challenges you to combine loops, nested structures, and geometric math to draw a classic checkerboard pattern on the screen.
Algorithm (textual):
If you add the current row index ( r ) and column index ( c ), the sum alternates between even and odd numbers across the entire grid: Row 0, Col 0 Row 0, Col 1 Row 1, Col 0 Row 1, Col 1
this.size = size; board = new Rectangle[size][size];
The difficulty lies in alternating the starting position of the beeper on every row. If Row 1 starts with a beeper, Row 2 must start with an empty space, Row 3 with a beeper, and so on. 2. Breaking Down the Logic (Algorithm) 9.1.6 checkerboard v1 codehs
If you are getting this error, it means you likely printed the checkerboard, but did not use the assignment operator ( = ) to actually alter the list structure. Are you initializing the board = [] ? Are you using board[row][col] = 1 ?
Alternatively, you can think of it as: if the row is even, start with color A; if the row is odd, start with color B. The Code Implementation (Java/CodeHS Style)
To build the checkerboard, your program needs to solve two main problems: positioning the squares and determining their colors. 1. Grid Coordinate Math
If the of the row and column is odd , it gets the other color. Implementing a grid-based graphics program is a classic
for i in range(8): row = [] for j in range(8): if (i + j) % 2 == 0: row.append("R") # R for red else: row.append("B") # B for black board.append(row)
: The create_rectangle function requires the top-left coordinate and the bottom-right coordinate
Here is the complete JavaScript solution using the CodeHS graphics library. javascript
The while(frontIsClear()) loop moves Karel twice (if possible) to skip a spot. If Row 1 starts with a beeper, Row
# Determine the color based on the sum of row and col indices # If the sum is even, it's one color; if odd, it's the other. if (row + col) % 2 == 0: square.set_color(Color.black) else: square.set_color(Color.white)
To solve this efficiently, we cannot simply write code for one row and copy-paste it. We need a general algorithm that handles the pattern. Core Components of the Solution
If the remainder is 0 , the position is even, and it applies COLOR_ONE .
public class Checkerboard extends ConsoleProgram public void run() // 1. Create a 2D array of size 8x8 int[][] board = new int[8][8]; // 2. Nest loops to traverse rows and columns for (int row = 0; row < board.length; row++) for (int col = 0; col < board[0].length; col++) // 3. Logic: If (row + col) is even, it's a 0. If odd, it's a 1. if ((row + col) % 2 == 0) board[row][col] = 0; else board[row][col] = 1; // 4. Print the result using the provided grid printer printBoard(board); // Helper method to print the 2D array public void printBoard(int[][] board) for(int[] row : board) for(int el : row) System.out.print(el + " "); System.out.println(); Use code with caution. Copied to clipboard 1. Initialize the 2D Array