mouseClicked函数异常：点击方块底部触发下方方块变色求助

Hey there! Let's get to the bottom of why clicking the bottom of a square is triggering the one below it. This is almost always caused by imprecise coordinate matching between your mouse position and the actual bounds of each grid cell. Let's break down how to fix this step by step.

Common Root Cause #

The most likely issue is that your code is calculating the clicked row/column incorrectly, or it's not checking the exact boundaries of each cell. For example, if you're using floor(mouseY / cellSize) to find the row, but your cell's actual y-position doesn't align perfectly with that calculation (or you have gaps between cells you aren't accounting for), clicking near the bottom edge of a cell can push the mouseY value into the range of the row below.

Fix: Use Precise Boundary Checks #

Instead of relying solely on row/column math, add a method to your cell class that checks if the mouse position falls exactly within the cell's rectangle. This eliminates any ambiguity about which cell was clicked.

Here's a complete, corrected example based on your described setup:

1. Cell Class & Initialization

let grid = [];
const cellSize = 50; // Adjust this to your square size

function setup() {
  createCanvas(400, 400);
  // Initialize grid of cells
  const rows = floor(height / cellSize);
  const cols = floor(width / cellSize);
  
  for (let row = 0; row < rows; row++) {
    grid[row] = [];
    for (let col = 0; col < cols; col++) {
      // Calculate exact position for each cell
      const x = col * cellSize;
      const y = row * cellSize;
      grid[row][col] = new Cell(x, y, cellSize);
    }
  }
}

class Cell {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.fillColor = color(255); // Start white
  }

  // Toggle between black and white
  colorFlip() {
    this.fillColor = this.fillColor.toString() === color(255).toString() 
      ? color(0) 
      : color(255);
  }

  // Draw the cell
  display() {
    fill(this.fillColor);
    stroke(0);
    rect(this.x, this.y, this.size, this.size);
  }

  // Check if mouse position is inside this cell
  isClicked(mouseX, mouseY) {
    return (
      mouseX >= this.x &&
      mouseX <= this.x + this.size &&
      mouseY >= this.y &&
      mouseY <= this.y + this.size
    );
  }
}

2. Corrected mouseClicked Function

function mouseClicked() {
  // Loop through all cells to find the clicked one
  for (let row of grid) {
    for (let cell of row) {
      if (cell.isClicked(mouseX, mouseY)) {
        cell.colorFlip();
        return; // Exit early once we find the clicked cell
      }
    }
  }
}

function draw() {
  background(220);
  // Draw all cells each frame
  for (let row of grid) {
    for (let cell of row) {
      cell.display();
    }
  }
}

Why This Works #

• The isClicked method checks the exact pixel bounds of each cell (x to x+size, y to y+size), so there's no overlap or misalignment between click areas.
• We exit early after finding the clicked cell, which prevents unnecessary checks and ensures only one cell toggles color per click.

If You Have Gaps Between Cells #

If your grid has spacing between squares, adjust the cell position calculation to include the gap. For example, with a gap = 5:

const x = col * (cellSize + gap);
const y = row * (cellSize + gap);

And update the isClicked method to use the same bounds (since the cell's size is still cellSize, the gap is just empty space between cells).

内容的提问来源于stack exchange，提问作者Popolok11