JavaFX: Snakes And Ladders-Représenter des images de serpents et d'échelles dans un GridPane

Question

JavaFX: Snakes And Ladders-Représenter des images de serpents et d'échelles dans un GridPane

Je crée le jeu Snakes And Ladders. La matrice 10x10 que vous voyez est un GridPane où chaque cellule contient un volet coloré.

PROBLÈME: je veux mettre des images à la place des flèches que vous voyez ci-dessus qui représentent , les serpents et les échelles.

Enjamber plusieurs colonnes est-il une solution? Parce que par exemple à la cellule 3 37 l'échelle doit être un peu tourné.

Edit: Voici mon code concernant le GridPane:

<GridPane fx:id="gameGrid" alignment="CENTER" hgap="2.0" style="-fx-background-color:#000" vgap="2.0" BorderPane.alignment="CENTER">
    <columnConstraints>
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    </rowConstraints>
    <children>
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="0" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="1" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="2" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="3" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="4" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="5" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="6" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="7" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="8" GridPane.rowIndex="9" />

        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="0" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="1" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="2" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="3" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="4" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="5" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="6" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="7" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="8" />
        <Pane onMouseClicked="#onCellClick" style="-fx-background-color:#966F33" GridPane.columnIndex="9" GridPane.rowIndex="9" />
    </children>
    <BorderPane.margin>
       <Insets bottom="5.0" top="5.0" />
    </BorderPane.margin>
  </GridPane>

Le design FXML est: http://prntscr.com/k8fpys

0

French javafx gridpane

Author: A.Tressos, 2018-07-19

Source

1 answers

score 0 · Accepted Answer

J'ai trouvé la solution !!! La hiérarchie est:

, j'ai utilisé un BorderPane comme base.
- Au CENTER j'ai placé un volet normal (Les volets n'ont aucune contrainte, donc c'est très utile dans mon cas).
  1. , j'ai utilisé un GridPane, chaque cellule contient un Volet.
  2. j'ai redimensionné mes images partout où je voulais et disabled et de l'ensemble mouseTransparent pour vrai .

Comme vous le voyez, les images sont au-dessus du GridPane et j'ai utilisé des volets dans chaque cellule du GridPane afin que je puisse appliquer un onMouseClick gestionnaire.