tic tac toe in java processing

php editor Strawberry brings you the latest java question and answer column. This issue will explore related issues in processing the tic tac toe (tic-tac-toe) game in java. Whether you are a beginner or an experienced developer, you will find here practical tips and solutions for handling Tic-Tac-Toe game in Java. Let's learn more about this interesting topic and improve your skills in the field of Java programming!

Question content

I'm currently working on a simple tic-tac-toe game, but I'm running into problems in two areas:

Placement issues: The x and o symbols are not placed correctly on the grid. The location seems to be random and I'm not sure why. Whenever I click on a box, it doesn't seem to be placed in that coordinated box

Mouse click problem: I've set up left click to place the x and right click to place the o, but it doesn't seem to be working as expected.

This is my current code:

// 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 and currentPlayer
      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;
      }
    }
  } 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) {
        grid[row][col] = new TicTacToeBox(row, col, 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);
  }
}

Solution

The following source code demonstrates using a rect class array to create a 3x3 grid to track mouse presses. Maybe a similar technique could be used in your game.

rect[] r;

final int _numcols = 3;
final int _numrows = 3;

final int _wndw = 400;
final int _wndh = 400;

class rect {
  int x, y, w, h;
  boolean leftpressed = false;
  boolean rightpressed = false;

  // constructor
  rect(int xpos, int ypos, int wide, int ht) {
    x = xpos;
    y = ypos;
    w = wide;
    h = ht;
  }

  void display(int id) {
    fill(255); // background color
    rect(x, y, w, h);
    fill(0); // text color
    textsize(18);
    text(str(id), x + w - 18, y + 18);
  }
}

void rectgrid(int left, int top, int w, int h, int vg, int hg) {
  int id = 0;
  // build by row
  for (int k = 0; k < _numrows; k++) {
    for (int j = 0; j < _numcols; j++) {
      int x = left + j*(w+vg);
      int y = top + k*(h+hg);
      r[id] = new rect(x, y, w, h);
      id++;
    }
  }
}

void setup() {
  size(_wndw, _wndh);
  background(0, 0, 245);
  r = new rect[_numrows*_numcols];
  rectgrid(0, 0, _wndw/_numcols, _wndh/_numrows, 0, 0);
}

void draw() {
  for (int i = 0; i < r.length; i++) {
    r[i].display(i); // display each object
    if (r[i].leftpressed == true) {
      text("x", r[i].x + r[i].w/2, r[i].y + r[i].h/2);
    }
    if (r[i].rightpressed == true) {
      text("o", r[i].x + r[i].w/2, r[i].y + r[i].h/2);
    }
  }
}

void mousepressed() {
  for (int i = 0; i < r.length; i++) {
    if ((mousex >= r[i].x) && (mousex <= r[i].x +r[i].w) && (mousey >= r[i].y) && (mousey <= r[i].y + r[i].h)) {
      println("id =", i);
      if (mousebutton == left) {
        r[i].leftpressed = true;
      }
      if (mousebutton == right) {
        r[i].rightpressed = true;
      }
    }
  }
}

suggestion: Your grid doesn't need a 2D array; a 1D array works just fine and is not too complex. I'll add two booleans (leftpressed and rightpressed) to the grid class and remove the symbolic parameter. The "draw()" method of the grid class should probably be renamed to something like "display()" since "draw" is a keyword in processing to avoid confusion. The methods displaygrid() and isvalidbox() can be safely removed using the technique shown below. The main code change should be in mousepressed() as it doesn't work properly. Looping through each box in the grid will correctly capture mouse button clicks, at which point you can check whether the right or left mouse button was clicked, and you can set the corresponding boolean to "true". The main "draw()" will then use this information to draw the "x" or "o". I know this sounds like a lot, but these changes are one way to solve your problem. Your modified source code looks like this:

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

// 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;

class Grid {
  float x;
  float y;
  float boxSize;
  boolean leftPressed = false;
  boolean rightPressed = false;

  Grid(float x, float y, float boxSize) {
    this.x = x;
    this.y = y;
    this.boxSize = boxSize;
  }

  void display() {
    stroke(0);
    noFill();
    rect(x, y, boxSize, boxSize);
  }
}

void setup() {
  size(600, 600);
  displayHomeScreen();
  // initialize array
  float boxSize = width / 3.0;
  int id = 0;
  for (int k = 0; k < 3; k++) {
    for (int j = 0; j < 3; j++) {
      float x = j*boxSize;
      float y = k*boxSize;
      g[id] = new Grid(x, y, boxSize);
      id++;
    }
  }
}

void draw() {
  // Draw the appropriate screen based on gameStatus
  if (gameStatus == 1) {
    background(255);
    for (int i = 0; i < g.length; i++) {
      g[i].display(); // Display each object
      if (g[i].leftPressed == true) {
        text("X", g[i].x + g[i].boxSize/2, g[i].y + g[i].boxSize/2);
      }
      if (g[i].rightPressed == true) {
        text("O", g[i].x + g[i].boxSize/2, g[i].y + g[i].boxSize/2);
      }
    }
  } else if (gameStatus == 2) {
    background(0);
    displayGameOver();
  }
}

void mousePressed() {
  // Check the gameStatus and respond to mouse clicks accordingly
  if (gameStatus == 1) {
    for (int i = 0; i < g.length; i++) {
      if ((mouseX >= g[i].x) && (mouseX <= g[i].x +g[i].boxSize) && (mouseY >= g[i].y) && (mouseY <= g[i].y + g[i].boxSize)) {
        println("id =", i);
        if (mouseButton == LEFT) {
          g[i].leftPressed = true;
        }
        if (mouseButton == RIGHT) {
          g[i].rightPressed = true;
        }
      }
    }
  } else if (gameStatus == 0 && mouseX > 250 && mouseX < 350 && mouseY > 250 && mouseY < 300) {
    // Transition to the game screen when PLAY is clicked
    gameStatus = 1;
  }
}

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);
}

The above is the detailed content of tic tac toe in java processing. For more information, please follow other related articles on the PHP Chinese website!