9.1.6 — Checkerboard V1 Codehs
: Create a 2D list (an 8x8 grid) filled entirely with 0s.
: The create_rectangle function requires the top-left coordinate and the bottom-right coordinate
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
: Ensure your loops run from 0 to 7 (less than 8 ).
Iterate through every row and column. Use an if statement to identify the top three and bottom three rows. 9.1.6 checkerboard v1 codehs
. Use a loop to populate it with 8 rows, each initially filled with zeros to establish the basic structure. 2. Target Specific Rows for Pieces
(B = beeper, . = empty)
A nested loop is used to go through every single "cell" in the 8x8 grid. The outer loop (controlling the row ) goes from 0 to 7. The inner loop (controlling the column ) also goes from 0 to 7.
The for row in range(NUM_SQUARES): loop starts at row 0. Before moving to row 1, it triggers the inner for col in range(NUM_SQUARES): loop, which runs through columns 0 to 7. This ensures every single grid position is visited. Calculating : Create a 2D list (an 8x8 grid) filled entirely with 0s
if (frontIsClear()) move(); col++; else break;
The 9.1.6 Checkerboard V1 CodeHS is an engaging and challenging project that offers a wealth of learning opportunities for coders of all levels. By completing this project, users develop essential skills in game development, programming fundamentals, and problem-solving. Whether you're a seasoned developer or just starting out, the 9.1.6 Checkerboard V1 is an excellent way to enhance your coding skills and unlock new possibilities in the world of app development and game design.
# Mastering CodeHS 9.1.6 Checkerboard v1: A Complete Guide Building a checkerboard grid is a classic computer science problem. In the CodeHS JavaScript track, exercise **9.1.6 Checkerboard v1** challenges you to use nested loops and programming logic to draw a grid of alternating colored squares. This guide breaks down the concept, the logic, and the complete solution to help you understand how to write and optimize this code. ## Understanding the Goal The objective of Checkerboard v1 is to create an 8x8 grid of squares on the screen. The squares must alternate colors (usually black and red, or black and white) both horizontally and vertically, perfectly mimicking a real-life checkerboard. ### Key Technical Concepts * **Nested Loops:** Using a loop inside another loop to control rows and columns. * **Conditional Logic (If/Else):** Determining which color to paint a square based on its position. * **Coordinate Math:** Calculating the exact pixel coordinates $(x, y)$ for each square so they do not overlap. --- ## Breakdown of the Logic To build an 8x8 grid, you cannot just draw 64 squares manually. You need a system that loops through 8 rows, and inside each row, loops through 8 columns. ### 1. The Grid Math Assume the screen or grid width is divided equally. If each square is $40 \times 40$ pixels: * **Column 0** starts at $x = 0$ * **Column 1** starts at $x = 40$ * **Column 2** starts at $x = 80$ * Formula for X: `col * SQUARE_SIZE` * Formula for Y: `row * SQUARE_SIZE` ### 2. The Alternating Color Logic How do we know if a square should be Color A or Color B? We look at the grid coordinates `(row, col)`. If you add the current row index and column index together (`row + col`), a pattern emerges: * Row 0, Col 0 $\rightarrow 0 + 0 = 0$ (Even $\rightarrow$ Color A) * Row 0, Col 1 $\rightarrow 0 + 1 = 1$ (Odd $\rightarrow$ Color B) * Row 1, Col 0 $\rightarrow 1 + 0 = 1$ (Odd $\rightarrow$ Color B) * Row 1, Col 1 $\rightarrow 1 + 1 = 2$ (Even $\rightarrow$ Color A) By using the modulo operator (`% 2`), we check if `(row + col)` is divisible by 2. If the remainder is 0, it is an even position; otherwise, it is odd. --- ## CodeHS 9.1.6 Checkerboard v1 Code Solution Here is the complete JavaScript solution using the CodeHS graphics library. ```javascript // Constants for the checkerboard setup var NUM_ROWS = 8; var NUM_COLS = 8; var SQUARE_SIZE = 40; // Adjust based on your specific assignment window size function start() drawCheckerboard(); function drawCheckerboard() // Outer loop controls the rows (vertical movement) for (var row = 0; row < NUM_ROWS; row++) // Inner loop controls the columns (horizontal movement) for (var col = 0; col < NUM_COLS; col++) // Calculate coordinates for the current square var x = col * SQUARE_SIZE; var y = row * SQUARE_SIZE; // Create the square object var square = new Rectangle(SQUARE_SIZE, SQUARE_SIZE); square.setPosition(x, y); // Alternating color logic using row and column indices if ((row + col) % 2 === 0) square.setColor(Color.RED); else square.setColor(Color.BLACK); // Add the square to the screen add(square); ``` --- ## Detailed Code Step-by-Step Walkthrough ### Step 1: Defining Constants We define `NUM_ROWS`, `NUM_COLS`, and `SQUARE_SIZE` at the top. This makes the code adaptable. If you want to change it to a 10x10 board later, you only have to change the constants, not the core logic. ### Step 2: The Outer Loop (`row`) The outer loop runs 8 times. It starts at `row = 0` and stops when `row = 7`. This dictates the vertical $y$-axis progression. ### Step 3: The Inner Loop (`col`) For *every single iteration* of the outer loop, the inner loop runs 8 times. This draws 8 individual squares from left to right before moving down to the next row. ### Step 4: The `if/else` Condition The line `if ((row + col) % 2 === 0)` evaluates the mathematical rule we established earlier. * If true, it assigns `Color.RED`. * If false, it defaults to `Color.BLACK`. ### Step 5: Rendering `add(square)` places the fully configured rectangle object onto the canvas canvas at the calculated `(x, y)` coordinate. --- ## Common Mistakes to Avoid 1. **Mixing up X and Y coordinates:** Remember that columns move horizontally along the X-axis (`col * SQUARE_SIZE`), while rows move vertically down the Y-axis (`row * SQUARE_SIZE`). Swapping these will corrupt the grid rendering. 2. **Forgetting to update loop variables:** Ensure your loop conditions use `row++` and `col++` so you do not accidentally trigger an infinite loop that crashes the CodeHS browser tab. 3. **Using a single loop:** Trying to draw all 64 squares in a single loop using complex division math is messy. Always use nested loops for 2D grids. Use code with caution. If you want to customize this further, let me know:
| Mistake | Consequence | |---------|-------------| | Assuming world size is always odd/even | Wrong pattern on certain dimensions | | Not resetting direction after row end | Karel gets stuck or misplaces beepers | | Placing beepers without checking | Overwrites existing beepers (not harmful but inefficient) | | Using infinite loop incorrectly | Program never terminates | Use an if statement to identify the top
function start() // Define the size of the board var NUM_ROWS = 8; var NUM_COLS = 8; // Outer loop handles the rows for (var row = 0; row < NUM_ROWS; row++) // Inner loop handles the columns for (var col = 0; col < NUM_COLS; col++) // Check if the sum of row and col is even if ((row + col) % 2 == 0) drawSquare(row, col, Color.red); else drawSquare(row, col, Color.black); function drawSquare(row, col, color) var sideLength = getWidth() / 8; var x = col * sideLength; var y = row * sideLength; var rect = new Rectangle(sideLength, sideLength); rect.setPosition(x, y); rect.setColor(color); add(rect); Use code with caution. Key Components Explained 1. Nested Loops
if (row + col) % 2 == 0: evaluates the grid position. For example: Row 0, Col 0: →right arrow Row 0, Col 1: →right arrow Row 1, Col 0: →right arrow
: Colors must alternate both horizontally and vertically.