JavaFX creating a game board with GridPane

Question

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

All your text elements are placed in cell `(0,0)`. Note that you can use the `add` method to shorten the code required to assign the indices instead of using the `static` methods to assign indices one by one: `gameBoard.add(tile, j, i);` — fabian, Sep 01 '19 at 09:07
The code posted id not clear (what is the relation between the two classes ? ) Please post [mre]. Also focus your post on one question. — c0der, Sep 01 '19 at 14:17

score 3 · Accepted Answer · answered Sep 01 '19 at 14:30

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

score 0 · Answer 2 · answered Sep 01 '19 at 14:55

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.

JavaFX creating a game board with GridPane

2 Answers2

Linked