Processing开发Tic-Tac-Toe游戏：符号放置与鼠标点击异常求助

问题分析与修复方案 #

1. 符号放置错位问题 #

错误原因：创建TicTacToeBox对象时，行（row）和列（col）的参数顺序传递错误，导致绘制时坐标计算混乱，符号位置与点击网格不匹配。

修复方式：
在displayGrid函数中，创建对象时将参数顺序从row, col改为col, row，确保列对应水平X轴，行对应垂直Y轴：

// 修改前
grid[row][col] = new TicTacToeBox(row, col, boxSize, ' ');
// 修改后
grid[row][col] = new TicTacToeBox(col, row, boxSize, ' ');

2. 鼠标点击逻辑异常问题 #

错误原因：原代码将鼠标按键与当前玩家绑定过死，仅当玩家回合与对应按键完全匹配时才会放置符号，无法实现“左键放X、右键放O”的基础逻辑。

修复方式：
调整mousePressed中的判断逻辑，只要点击空格子，左键直接放置X并切换到O玩家回合，右键直接放置O并切换到X玩家回合：

// 修改前
if (mouseButton == LEFT && currentPlayer == 1) {
  grid[row][col].symbol = 'X';
  currentPlayer = 2;
} else if (mouseButton == RIGHT && currentPlayer == 2) {
  grid[row][col].symbol = 'O';
  currentPlayer = 1;
}
// 修改后
if (mouseButton == LEFT) {
  grid[row][col].symbol = 'X';
  currentPlayer = 2;
} else if (mouseButton == RIGHT) {
  grid[row][col].symbol = 'O';
  currentPlayer = 1;
}

修改后的完整代码 #

// Declare a 3x3 grid of TicTacToeBox objects
TicTacToeBox[][] grid = new TicTacToeBox[3][3];

// gameStatus:
// 0 - Display Home screen
// 1 - Display Tic Tac Toe grid
// 2 - Display Game over screen
int gameStatus = 0;

// Determine which player's turn it is 
int currentPlayer = 1;

void setup() {
  size(600, 600);
  displayHomeScreen();
}

void draw() {
  // Draw the appropriate screen based on gameStatus
  if (gameStatus == 1) {
    background(255);
    displayGrid();
  } else if (gameStatus == 2) {
    background(0);
    displayGameOver();
  }
}

void mousePressed() {
  // Check the gameStatus and respond to mouse clicks accordingly
  if (gameStatus == 1) {
    float boxSize = width / 3.0;
    int col = floor(mouseX / boxSize);
    int row = floor(mouseY / boxSize);

    // Check if the box is valid and empty
    if (isValidBox(row, col) && grid[row][col].symbol == ' ') {
      // Place X or O based on the mouse button
      if (mouseButton == LEFT) {
        grid[row][col].symbol = 'X';
        currentPlayer = 2;
      } else if (mouseButton == RIGHT) {
        grid[row][col].symbol = 'O';
        currentPlayer = 1;
      }
    }
  } else if (gameStatus == 0 && mouseX > 250 && mouseX < 350 && mouseY > 250 && mouseY < 300) {
    // Transition to the game screen when PLAY is clicked
    gameStatus = 1;
  }
}

void displayGrid() {
  float boxSize = width / 3.0;

  // Loop through the grid and draw each TicTacToeBox
  for (int row = 0; row < 3; row++) {
    for (int col = 0; col < 3; col++) {
      if (grid[row][col] == null) {
        // 修改：调整参数顺序为col, row，匹配坐标逻辑
        grid[row][col] = new TicTacToeBox(col, row, boxSize, ' ');
      }
      grid[row][col].draw();
    }
  }
}

// Check if the row and column are clear to place
boolean isValidBox(int row, int col) {
  return row >= 0 && row < 3 && col >= 0 && col < 3;
}

void displayHomeScreen() {
  // Display the home screen with instructions
  background(255);
  fill(0);
  textAlign(CENTER, TOP);
  textSize(50);
  text("Tic-Tac-Toe", width/2, 100);
  textSize(25);
  fill(0);
  text("Click PLAY to start", width/2, 200);
  noFill();
  rect(250, 250, 100, 50);
  textSize(20);
  fill(0);
  text("PLAY", width/2, 265);
}

void displayGameOver() {
  // Display the game over screen with a prompt to play again
  fill(255, 0, 0);
  textAlign(CENTER, TOP);
  textSize(50);
  text("GAME OVER!", width/2, 100);
  textSize(25);
  fill(0, 0, 255);
  text("CLICK TO PLAY AGAIN", width/2, 200);
}

class TicTacToeBox {
  float x;
  float y;
  float boxSize;
  char symbol = ' ';

  TicTacToeBox(float x, float y, float boxSize, char symbol) {
    this.x = x;
    this.y = y;
    this.boxSize = boxSize;
    this.symbol = symbol;
  }

  void draw() {
    stroke(0);
    noFill();
    rect(x * boxSize, y * boxSize, boxSize, boxSize);
    textAlign(CENTER, CENTER);
    textSize(32);
    fill(0);
    float symbolX = x * boxSize + boxSize/2;
    float symbolY = y * boxSize + boxSize/2;
    text(symbol, symbolX, symbolY);
  }
}

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