如何检测其他物体的状态

Question

我正在使用P5.js。我正在尝试制作一个程序，允许用户单击正方形，而最靠近底部但尚未变黑的块将变黑。我正在使用的代码将第一列中的所有正方形都变为黑色。我试过使用return（false），但这只会导致底部方块变成黑色。

let squares = []
let squareNum = 0
let rows;

function setup() {
  createCanvas(900, 900)
  background(100)
  for (let i = 0; i < 6; i++) {
    rows = i + 1
    for (let j = 0; j < 6; j++) {
      let x = i * 150
      let y = j * 150
      squares[squareNum] = new Square(x, y, 'gray');
      squareNum++
    }
  }
}

function mousePressed() {
  for (let i = 0; i < squares.length; i++) {
    if (mouseX > squares[i].x && mouseX < squares[i].x + squares[i].size && mouseY > squares[i].y && mouseY < squares[i].y + squares[i].size) {
      if (i < 6) {
        for (let j = 0; j < 6; j++) {
          if (squares[5 - j].colour = 'gray') {
            squares[5 - j].colour = 'black'
            print(5 - j + ' is now black')
          }
        }
      }
    }
  }
}

function draw() {
  for (let i = 0; i < squares.length; i++) {
    squares[i].show();
  }
}

class Square {
  constructor(x, y, colour) {
    this.x = x
    this.y = y
    this.size = 150
    this.colour = colour
  }
  show() {
    fill(this.colour)
    rect(this.x, this.y, this.size, this.size);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Answer 1

您是这样说的吗？

let squares = []
// Added variables to avoid fixed numbers in the code.
// Note: This was 150 originally. Changed to be able to print it on the screen.
let squareSize = 30;
let rowCount = 6;
let columnCount = 6;

function setup() {
  createCanvas(squareSize * columnCount, squareSize * rowCount);
  background(100)
  for (let i = 0; i < columnCount; i++) {
    for (let j = 0; j < rowCount; j++) {
      let x = i * squareSize
      let y = j * squareSize
      squares.push(new Square(x, y, 'gray'));
    }
  }
}

// Check whether the mouse is currently within a specific square.
function isMouseInSquare(square, mouseX, mouseY) {
  // NOTE: brackets help a lot to understand logical expressions and to avoid bugs.
  return (mouseX > square.x && mouseX < (square.x + square.size)) && (mouseY > square.y && mouseY < (square.y + square.size))
}

// Returns the squares for a given column based on their x postion - starting with the one closest to the bottom.
function getSameColumnSquares(square) {
  return squares.filter(s => s.x === square.x).reverse();
}

function mousePressed() {
  let pressedSquare = squares.find(square => isMouseInSquare(square, mouseX, mouseY));
  let squaresInColumn = getSameColumnSquares(pressedSquare);
  let firstNonBlackSquare = squaresInColumn.find(square => square.colour !== "black");
  if (firstNonBlackSquare) {
    firstNonBlackSquare.colour = "black";
  }
}

function draw() {
  for (let i = 0; i < squares.length; i++) {
    squares[i].show();
  }
}

class Square {
  constructor(x, y, colour) {
    this.x = x
    this.y = y
    this.size = squareSize;
    this.colour = colour
  }
  show() {
    fill(this.colour)
    rect(this.x, this.y, this.size, this.size);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>