JavaFX creating a game board with GridPane

问题

When the application is run the game board shows fine, although when a tile is clicked the text always shows in the top left corner of the board [0][0].

Also I am struggling with the logic. I have a int board matrix with a function makeMove which to add a players move to the matrix, although I can't get the player to make a move on the matrix and also print a corresponding "O" on the tile index.

How would I create a function that can be passed a row, col index and alter the board matrix and print the player piece on the GUI (e.g.for AI move)

And also when the GUI tile is clicked by the player to then make the corresponding move.

So far I have created a GridPane and added Rectangle with text at each index for the GUI.

I have created a Board class which constructs an int board matrix to hold player moves (P1, P2, empty).

public class Board {

    private int[][] board_matrix;
    private int board_size;
    private int win_length;

    public Board(int board_size, int win_length) {
        this.board_matrix = new int[board_size][board_size];
        this.board_size = board_size;
        this.win_length = win_length;

        for (int i = 0; i < board_size; i++) {
            for (int j = 0; j < board_size; j++) {
                this.board_matrix[i][j] = 0;
            }
        }
    }

    public void make_move(int player, int x_pos, int y_pos) {
        if (player == 1) board_matrix[x_pos][y_pos] = 1;
        else board_matrix[x_pos][y_pos] = 2;
    }

public class BoardGUI_ extends Application {

    private final int BOARD_SIZE = 15;

    public Parent createBoard() {
        GridPane gameBoard = new GridPane();
        gameBoard.setPrefSize(755, 755);

        for (int i = 0; i < BOARD_SIZE; i++) {
            for (int j = 0; j < BOARD_SIZE; j++) {

                Rectangle tile = new Rectangle(50, 50);
                tile.setFill(Color.BURLYWOOD);
                tile.setStroke(Color.BLACK);

                Text text = new Text();
                text.setFont(Font.font(40));


                GridPane.setRowIndex(tile, i);
                GridPane.setColumnIndex(tile, j);

                tile.setOnMouseClicked(event -> drawMove(text));

                gameBoard.getChildren().addAll(tile, text);
            }
        }
        return gameBoard;
    }

    public void drawMove(Text text) {
        text.setText("O");
        text.setFill(Color.BLACK);
    }

回答1:

If you want to add a Text object on top of a Rectangle object wrap both in a StackPane:

public Parent createBoard() {

    GridPane gameBoard = new GridPane();
    gameBoard.setPrefSize(755, 755);

    for (int i = 0; i < BOARD_SIZE; i++) {
        for (int j = 0; j < BOARD_SIZE; j++) {

            Rectangle tile = new Rectangle(50, 50);
            tile.setFill(Color.BURLYWOOD);
            tile.setStroke(Color.BLACK);

            Text text = new Text();
            text.setFont(Font.font(40));
            gameBoard.add(new StackPane(tile, text), j, i);

            //GridPane.setRowIndex(tile, i);
            //GridPane.setColumnIndex(tile, j);   
            //gameBoard.getChildren().addAll(tile, text);
            tile.setOnMouseClicked(event -> drawMove(text));
        }
    }
    return gameBoard;
}

回答2:

In your loop you are setting the row and column of the 'tile' node, but not the 'text' node. So you have all of your text nodes at 0,0.

It seems you want the tiles to be StackPanes as c0der suggests. With the Text node on top of the tile.

I think makes sense to create a Tile object, possibly derived from StackPane, and use it to manage the each tile. It would be responsible for the background color and text shown. It's not clear at this point if the Rectangle is even needed. You could just set the background and border of the StackPane.

来源：https://stackoverflow.com/questions/57742682/javafx-creating-a-game-board-with-gridpane

标签

java

javafx