java - 交换 ArrayList 中的元素

Question

我正在尝试制作一款有点 slider 拼图的游戏，您可以单击一张图像，然后单击另一张图像，然后它们交换位置。由于某种原因，第一次执行此操作时可以正常工作，但是当您第二次交换图像时以及此后每次它都会选择与您单击的元素不同的元素。任何帮助都会得到帮助，谢谢。

public class test extends Application {
int click1 = -1, click2 = -1;

public static void main(String[] args) {
    Application.launch(args);
}

@Override
public void start(Stage primaryStage) throws Exception {
    //Create a GridPane
    GridPane pane = new GridPane();
    pane.setAlignment(Pos.CENTER);
    pane.setHgap(5);
    pane.setVgap(5);

    //create ArrayList and add imageList to ArrayList
    ArrayList<ImageView>imageList = new ArrayList<ImageView>();
    for (int i = 0; i < 9; i++) {
        imageList.add(new ImageView ((i) +".jpg"));
    }       

    addImages(imageList, pane);

    //add onClick listeners to each image
    imageList.get(0).setOnMouseClicked(e->{
        swap(0, imageList, pane);
    });
    imageList.get(1).setOnMouseClicked(e->{
        swap(1, imageList, pane);
    });
    imageList.get(2).setOnMouseClicked(e->{
        swap(2, imageList, pane);
    });
    imageList.get(3).setOnMouseClicked(e->{
        swap(3, imageList, pane);
    });
    imageList.get(4).setOnMouseClicked(e->{
        swap(4, imageList, pane);
    });
    imageList.get(5).setOnMouseClicked(e->{
        swap(5, imageList, pane);
    });
    imageList.get(6).setOnMouseClicked(e->{
        swap(6, imageList, pane);
    });
    imageList.get(7).setOnMouseClicked(e->{
        swap(7, imageList, pane);
    });
    imageList.get(8).setOnMouseClicked(e->{
        swap(8, imageList, pane);
    });

    //display the scene
    Scene scene = new Scene(pane, 650, 650);
    primaryStage.setScene(scene);
    primaryStage.setTitle("Test");
    primaryStage.show();
}

private void swap(int lastClick, ArrayList<ImageView> imageList, GridPane pane) {
    if (click1 == -1) {
        click1 = lastClick;
        System.out.println(imageList.get(click1).getImage().impl_getUrl()+ " ");

        imageList.get(click1).setScaleX(1.02);
        imageList.get(click1).setScaleY(1.02);
    } else {
        click2 = lastClick;
        System.out.println(imageList.get(click2).getImage().impl_getUrl()+ " ");

        //swap indexes in ArrayList
        Collections.swap(imageList, click2, click1);
        pane.getChildren().removeAll(imageList);
        addImages(imageList, pane);

        //reset everything for next swap
        imageList.get(click1).setScaleX(1.0);
        imageList.get(click1).setScaleY(1.0);
        imageList.get(click2).setScaleX(1.0);
        imageList.get(click2).setScaleY(1.0);           
        click1 = -1;
        click2 = -1;
    }
}

private void addImages(ArrayList<ImageView> imageList, GridPane pane) {
    //add imageList to the GridPane
    int i = 0;
    while (i < 9) {
        for (int j = 0; j <= 2; j++) {
            for (int k = 0; k <= 2; k++) {
                pane.add(imageList.get(i), k, j);
                i++;
            }
        }
    }   
}

}

Answer 1

更新新元素后，您需要更新鼠标单击监听器。最终发生的是一种陈旧的状态。已移动的项目会报告其初始位置而不是实际位置，从而导致您的项目移动到不应该在的位置。

基本状态。

0、1、2、3、4、5、6、7、8

假设我们点击3，然后点击5。请求是将图像5交换到图像3的槽位，将图像3交换到图像5的槽位。

0、1、2、5、4、3、6、7、8

目前看来这是正确的，但让我们尝试另一个交换。让我们将图像 1 与 5 交换。

0、3、2、5、4、1、6、7、8

发生什么事了？! 1 和 5 被点击，但是 3 和 1 交换了位置!

后端的此举实际上完全按照设计进行。单击图像 5 和图像 1，导致执行“将插槽 5 与 插槽 1 交换”操作，而不是将预期的插槽 3 与插槽 1 进行交换。问题在于插槽 5 中的图像实际上是图像 3。

对此的纠正是更新鼠标单击监听器以了解它们之后的位置，以便它们可以报告其新的更新位置。

修复方法是:

imageList.get(click1).setOnMouseClicked(e->{
    swap(click1, imageList, pane);
});
imageList.get(click2).setOnMouseClicked(e->{
    swap(click2, imageList, pane);
});

这告诉交换的项目“这是您移动的位置，从现在开始您应该报告这是您新移动的位置。”