@CLSChen 2019-10-06T14:49:50.000000Z 字数 7516 阅读 1062

JIGSAW PUZZLE难点总结

本游戏由上课所学的JavaFx实现，编译器是Eclipse，编译环境为JDK1.8，在Win10环境下运行。
本游戏新建在一个项目中，所需要的图片都导入在包内，可以直接调用。

实现功能

支持鼠标操作来移动图片
支持键盘操作来移动图片（难点）
支持三个难度选择：简单（3*3）、困难（4*4）、地狱（5*5）
支持与游戏界面分开的欢迎界面

项目构成

Start类：用于绘制开始界面
Game_1类: 游戏简单模式的实现
Game_2类: 游戏困难模式的实现
Game_3类: 游戏地狱模式的实现
application.css: 用于对开始界面进行渲染
开始界面的背景图，各个模式的原图

所做的工作

通过css重绘欢迎界面：鼠标移动到按钮上按钮会有变化
图片截取
图片存储
图片在九宫格中的摆放
图片摆放后必须有解：随机数组必须是逆序数为偶数的数列
图片的移动
1.鼠标移动
2.键盘移动
拼图成功的判断

游戏界面测试结果

运行Start类，会跳出开始菜单，可以有三种难度以供选择。
分别是简单难度（3*3）拼图，困难难度（4*4）拼图和地狱难度（5*5）拼图。
鼠标和键盘操作（方向键）都有效，拼图完成的界面如下。

151141.png-2488.7kB
1.png-2938.1kB

具体实现

开始界面的实现

开始菜单使用GridPane来将一个游戏名"JIGSAW PUZZLE"和三个难度选择按钮加入。点击三个按钮，都会关闭开始界面，并打开一个单独的游戏界面。

    // 使用GridPane来安放按钮和欢迎文字
    GridPane gridPane = new GridPane();
    gridPane.setAlignment(Pos.CENTER);
    gridPane.setHgap(5.5);
    gridPane.setVgap(5.5);
    // 显示难度选择按钮
    Button start_1 = new Button("简单模式");
    start_1.setOnAction(e -> {
        Game_1 game_1 = new Game_1();
        game_1.start(new Stage());
        // 关闭开始界面
        primaryStage.close();
    });
    ......
    // 设置按钮大小并调节位置
    start_1.setPrefSize(200, 100);
    start_2.setPrefSize(200, 100);
    start_3.setPrefSize(200, 100);
    Scene scene = new Scene(gridPane, 400, 400);
    // 添加css文件
    scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
    primaryStage.setTitle("CLSCHEN作品");
    primaryStage.setScene(scene);
    primaryStage.setResizable(false);
    primaryStage.show();

CSS文件部分内容

// 通过ID（clschen）定位到Start里定义的标签，并修改字体等
#clschen {
   -fx-font-size: 22.0px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0.0,0.0,0.0,0.7) , 6.0, 0.0 , 0.0 , 2.0 );
}
// 修改Start里的按钮样式，并增加按下后会变化的动态效果
.button {
    -fx-font-size:20.0px;
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0.0,0.0,0.0,0.6) , 5.0, 0.0 , 0.0 , 1.0 );
}

图片截取和存储的实现

imageView.setViewPort(new Rectangle2D(x,y,width,higth))方法
可以实现用一个矩形来切割图片的某一块并存入imageView中，因此我声明了一个ImageView[]的数组，并通过循环存储每块图片。
代码：

// 切割图片分配给图片数组
    for (int i = 0, k = 0; i <= 2; i++) {
        for (int j = 0; j <= 2; j++, k++) {
            imageViews[k].setViewport(
                new Rectangle2D(partImagewidth * j, partImagewidth * i, partImagewidth, partImagewidth));
            }
        }

图片在九宫格中的摆放以及排列顺序

游戏界面由一个GridPane实现，以简单模式为例，就是在GridPane中按照位置和设计好的顺序加入九个ImageView。其中前八张图都是原图的一部分，第九张图是一张空白图。
我们的拼图就通过空白图和其他图的不断交换来实现，最后拼成的是有一块是空白图，其他顺序正常的原图。空白图的位置一开始永远在右下角，但是拼好后它存在的位置随机。
此处有一点需要注意的是，并不是所有拼图都有解（N数码问题），把原图按照从左上到右下的顺序分为9块，以0到8编号的话，打乱后的数组必须是逆序数为偶数的一个排列，否则拼图无解。
为了摆放有解，此处分别实现了几个方法：

    // 生成8个不重复的逆序数为偶数的数字
    public int[] random() {}
    // 生成8个不重复数
    public int[] random_num() {}
    // 判断逆序数是否为偶数
    public boolean iso(int[] num) {}

使用数组n[]来存放前八个被打乱的逆序数为偶数的数，使用m来存放剩下的那一个数。ImageViews[m]就代表最后一张图。

    // 定义逆序数为偶数的随机数组
    int[] n = random();
    // 找出那个不在随机数组里面的数字
    m = findnum(n);
    // 定义一个数组来存储所有随机数（包括m）
    ncopy = new int[9];
    for (int i = 0; i < 9; i++) {
        if (i == 8) {
            ncopy[8] = m;
        } else {
            ncopy[i] = n[i];
        }
    }
    // 按照产生的随机数将imageView数组加入面板
    gridPane.add(imageViews[n[0]], 0, 0);
    gridPane.add(imageViews[n[1]], 1, 0);
    gridPane.add(imageViews[n[2]], 2, 0);
    gridPane.add(imageViews[n[3]], 0, 1);
    gridPane.add(imageViews[n[4]], 1, 1);
    gridPane.add(imageViews[n[5]], 2, 1);
    gridPane.add(imageViews[n[6]], 0, 2);
    gridPane.add(imageViews[n[7]], 1, 2);
    // 设定空白区域
    // 3.png为一个透明图，放在空格子中
    image image1 = new Image("application\empty.png"); 
    imageViews[m].setImage(image1);

ps：为了实现键盘操作，此处将n[]和m合并到一个数组里，命名为ncopy[],这点在键盘操作说明中会有提及。

拼图成功的判断

因为分块的时候是按顺序存入的，因此imageViews[0]就代表第一块图片，imageViews[1]就代表第二块图片…在每一步移动的时候，都判断每块图片有没有在相应的位置上。
GridPane有一个获取当前坐标的方法，因此我们可以得出每个图片当前的横纵坐标，而该图片的坐标就是横坐标*3+纵坐标。
公式：index = 3 * row + col
如果当前坐标等于图片的顺序，那么它就在正确的位置上，当所有的图片都在正确位置上时，拼图被复原。
用于判断成功的issucc方法：

// 判断是否拼图成功
    public boolean issucc(ImageView[] imageViews) {
        for (int i = 0; i <= 8; ++i) {
            if (i != 3 * GridPane.getRowIndex(imageViews[i]) + GridPane.getColumnIndex(imageViews[i])) {
                return false;
            }
        }
        return true;
    }

鼠标移动的实现

当鼠标点击一张图片时，系统可以获取它的x，y坐标（如123，123）默认采用图片左上角的点。
当我们点击一张图片，获取到它的坐标后与imageView[m]的坐标相比较，比如该图在m的左边，那么它的y坐标相同，x坐标比m小一个图片的像素大小。对上之后，就可以把两张图进行交换。

public void handle(MouseEvent arg0) {
        // 取得鼠标点击位置处图片的位置
        ImageView img = (ImageView) arg0.getSource();
        double sx = img.getLayoutX();
        double sy = img.getLayoutY();
        // 计算与空白图片位置的差值
        double dispx = sx - imageViews[m].getLayoutX();
        double dispy = sy - imageViews[m].getLayoutY();
        ......

之后就可以进行交换了。

if ((dispx == -partImagewidth) && (dispy == 0)) { // 点击的空格左边的格子
    swapimg(img, imageViews[m]); // 交换imageView
    if (issucc(imageViews)) { // 判断是否拼成功
        Alert alert = new Alert(AlertType.WARNING, "恭喜你，拼图成功！");
        alert.show();
    }
} else if ((dispx == 0) && (dispy == -partImagewidth)) { // 上面的格子
    swapimg(img, imageViews[m]);
    if (issucc(imageViews)) {
        Alert alert = new Alert(AlertType.WARNING, "恭喜你，拼图成功！");
        alert.show();
    }
} else if ((dispx == partImagewidth) && (dispy == 0)) { // 右边的格子
    swapimg(img, imageViews[m]);
    if (issucc(imageViews)) {
        Alert alert = new Alert(AlertType.WARNING, "恭喜你，拼图成功！");
        alert.show();
    }
} else if ((dispx == 0) && (dispy == partImagewidth)) { // 下面的格子
    swapimg(img, imageViews[m]);
    if (issucc(imageViews)) {
        Alert alert = new Alert(AlertType.WARNING, "恭喜你，拼图成功！");
        alert.show();
    }

键盘移动的实现（难点）

思路很简单，就是通过GridPane获取坐标的功能计算出上下左右的坐标，进行交换，但是交换方法必须获得两个源，而GridPane不支持通过坐标访问源，所以算出坐标后并不能直接访问来进行交换，所以如何通过坐标来联系上在那个位置的那张图片的源就是难点。
解决方法:n[]这个随机数组中值虽然是随机的，但是n[1],n[2]却是依次排列的，比如imageviews[n[5]]就代表第5张图，这样就可以通过以n[5]的值作为imageView[]的索引来实现访问第几张图了。然后就可以进行交换了。
比如现在m的位置在最右下角，坐标为（2,2），也就是第九张图，想把它向上交换，上面的图坐标为（1,2），也就是第五（1 * 3 + 2 = 5）张图，但是第五张图对应的不是imageView[5],而是imageView[n[5]]。因此要和后者进行交换才能成功。

// 由于n[]中的索引是和位置一一对应的，再将其值作为imageViews的索引
// 只要算出nindex，就能对应上相应的图片。将其交换
// ncopy拓展了n，将m作为第九个元素加入数组，否则就访问不到最后一张图片。
myevent1.swapimg(imageViews[m], imageViews[ncopy[nindex]]);

但是交换过去后有一个很严重的问题，比如在向上交换后再向下交换，就是把第九张图和第六张图交换之后想再换回去时，现在空白方块在地址5，通过计算下面的方块地址为8，应该和n[8]交换，但是imageViews[n[8]]其实还是刚刚的第九张图，因此就会一直和自己交换，程序看上去就一动不动。
其实我们交换的是图片的源，和n[]并没有关系，所以n[]还是原来的样子，并没有跟着一起交换，这样就导致算出来的新坐标对应的还是老的索引，因此我们应该把n[]也跟着一起交换，达到一致。
并且n[]中只有8个元素，我们要交换的话，需要九个元素都在，因此要创建一个新数组，前八个元素复制过来，把缺了的元素m补在最后。
实现：使用一个int[] ncopy = new int[9]来拓展随机数组n[8]。通过遍历将前八个元素复制，并将m添加到ncopy最后。在源图片交换后，将数组里的元素也交换。
实现键盘操作的类：

// 键盘操作的实现
    class myKeyEvent implements EventHandler<KeyEvent> {
        @Override
        public void handle(KeyEvent arg0) {
            myevent myevent1 = new myevent();
            int mrow = GridPane.getRowIndex(imageViews[m]);
            int mcol = GridPane.getColumnIndex(imageViews[m]);
            int mindex = mrow * 3 + mcol;
            // 针对不同的按键给出不同的反应
            switch (arg0.getCode()) {
            case DOWN:
                // 计算出需要交换的对象图片的位置nindex
                int nrow = mrow + 1;
                int ncol = mcol;
                int nindex = nrow * 3 + ncol;
                if (nindex >= 0 && nindex <= 8) {
                    // 由于n[]中的索引是和位置一一对应的，再将其值作为imageViews的索引
                    // 只要算出nindex，就能对应上相应的图片。将其交换
                    // ncopy拓展了n，将m作为第九个元素加入数组，否则就访问不到最后一张图片。
                    myevent1.swapimg(imageViews[m], imageViews[ncopy[nindex]]);
                    // 图片交换后，将数组值也交换，否则多次操作之后数据会混乱，导致胡乱交换。
                    int temp2 = ncopy[mindex];
                    ncopy[mindex] = ncopy[nindex];
                    ncopy[nindex] = temp2;
                    if (issucc(imageViews)) { // 判断是否拼成功
                        Alert alert = new Alert(AlertType.WARNING, "恭喜你，拼图成功！");
                        alert.setTitle("Congratulations!");
                        alert.setHeaderText(null);
                        alert.show();
                    }
                }
                break;
            case UP:
                nrow = mrow - 1;
                ncol = mcol;
                nindex = nrow * 3 + ncol;
                if (nindex >= 0 && nindex <= 8) {
                    myevent1.swapimg(imageViews[m], imageViews[ncopy[nindex]]);
                    int temp2 = ncopy[mindex];
                    ncopy[mindex] = ncopy[nindex];
                    ncopy[nindex] = temp2;
                    if (issucc(imageViews)) { // 判断是否拼成功
                        Alert alert = new Alert(AlertType.WARNING, "恭喜你，拼图成功！");
                        alert.setTitle("Congratulations!");
                        alert.setHeaderText(null);
                        alert.show();
                    }
                }
                break;
            case LEFT:
                nrow = mrow;
                ncol = mcol - 1;
                nindex = nrow * 3 + ncol;
                if (nindex >= 0 && nindex <= 8 && nindex != 2 && nindex != 5) {
                    myevent1.swapimg(imageViews[m], imageViews[ncopy[nindex]]);
                    int temp2 = ncopy[mindex];
                    ncopy[mindex] = ncopy[nindex];
                    ncopy[nindex] = temp2;
                    if (issucc(imageViews)) { // 判断是否拼成功
                        Alert alert = new Alert(AlertType.WARNING, "恭喜你，拼图成功！");
                        alert.setTitle("Congratulations!");
                        alert.setHeaderText(null);
                        alert.show();
                    }
                }
                break;
            case RIGHT:
                nrow = mrow;
                ncol = mcol + 1;
                nindex = nrow * 3 + ncol;
                if (nindex >= 0 && nindex <= 8 && nindex != 3 && nindex != 6) {
                    myevent1.swapimg(imageViews[m], imageViews[ncopy[nindex]]);
                    int temp2 = ncopy[mindex];
                    ncopy[mindex] = ncopy[nindex];
                    ncopy[nindex] = temp2;
                    if (issucc(imageViews)) { // 判断是否拼成功
                        Alert alert = new Alert(AlertType.WARNING, "恭喜你，拼图成功！");
                        alert.setTitle("Congratulations!");
                        alert.setHeaderText(null);
                        alert.show();
                    }
                }
                break;
            default:
                break;
            }
        }
    }

JIGSAW PUZZLE难点总结

实现功能

项目构成

所做的工作

游戏界面 测试结果

具体实现

开始界面的实现

图片截取和存储的实现

图片在九宫格中的摆放以及排列顺序

拼图成功的判断

鼠标移动的实现

键盘移动的实现（难点）

内容目录

游戏界面测试结果