setup()
setup() runs once when the sketch starts. Here it builds the entire grid structure, generates the maze layout, and initializes the player cube. Every variable needed during gameplay is set up here.
🔬 This double loop creates all the cells. What happens if you change the inner loop to start at 1 instead of 0? Will the grid still fill the canvas, or will something be missing?
// Initialize the grid with Cell objects
for (let j = 0; j < rows; j++) {
for (let i = 0; i < cols; i++) {
let cell = new Cell(i, j);
grid.push(cell);
}
}function setup() {
createCanvas(windowWidth, windowHeight);
// Calculate cols and rows based on canvas size and cellSize
cols = floor(width / cellSize);
rows = floor(height / cellSize);
// Initialize the grid with Cell objects
for (let j = 0; j < rows; j++) {
for (let i = 0; i < cols; i++) {
let cell = new Cell(i, j);
grid.push(cell);
}
}
// Start maze generation from the first cell (0,0)
current = grid[0];
current.visited = true;
// Generate the maze using Recursive Backtracker
generateMaze();
// Initialize cube's logical position at the top-left cell
cubeX = 0;
cubeY = 0;
// Initialize cube's display and target positions
displayCubeX = cubeX * cellSize + cellSize / 2;
displayCubeY = cubeY * cellSize + cellSize / 2;
targetCubeX = cubeX;
targetCubeY = cubeY;
isInterpolating = false;
currentHeldDirection = null;
gameWon = false;
// Define the maze end cell (bottom-right)
mazeEndX = cols - 1;
mazeEndY = rows - 1;
}Line-by-line explanation (11 lines)
🔧 Subcomponents:
for-loop
Grid Initialization Loop
for (let j = 0; j < rows; j++) {
for (let i = 0; i < cols; i++) {
let cell = new Cell(i, j);
grid.push(cell);
}
}
Creates a 2D grid of Cell objects by looping through rows and columns, storing them in a 1D array
calculation
Cube Position Initialization
displayCubeX = cubeX * cellSize + cellSize / 2;
Converts the logical grid coordinate (0) to a pixel screen coordinate by multiplying by cellSize and adding half a cell for centering
createCanvas(windowWidth, windowHeight);- Creates a canvas that fills the entire browser window, making the game responsive to window size
cols = floor(width / cellSize);- Calculates how many cell columns fit horizontally by dividing canvas width by cellSize and rounding down
rows = floor(height / cellSize);- Calculates how many cell rows fit vertically the same way
let cell = new Cell(i, j);- Creates a new Cell object with grid coordinates (i, j)—each cell stores its own wall configuration
grid.push(cell);- Adds the cell to the 1D grid array, storing 2D grid information linearly (easier for indexing)
current = grid[0];- Sets the starting point for maze generation to the top-left cell at array index 0
current.visited = true;- Marks the starting cell as visited so the Recursive Backtracker algorithm knows not to revisit it immediately
generateMaze();- Calls the maze generation function, which carves passages by removing walls between neighboring cells
cubeX = 0;- Sets the cube's logical grid position to column 0 (leftmost)
displayCubeX = cubeX * cellSize + cellSize / 2;- Converts logical grid coordinate to pixel screen position (0 * 40 + 20 = 20 pixels from left edge)
mazeEndX = cols - 1;- Sets the goal location to the rightmost column; mazeEndY = rows - 1 sets it to the bottom row
