Java实现拼图小游戏（4）—— 打乱图片（含二维数组知识点）

一、前言

在上一篇文章中讲述了如何添加图片，本文将实现将十六个格子中的小图片打乱的效果，并且会提到有关于二维数组的知识点

二、思路

在上文就提到了，这个看起来完整的大图片，实际上是十六张小图片按照一定顺序放在4×4的格子当中的，那么我们不妨 用一个二维数组来表示每一个格子，每个格子内再放入不同的图片；由于要求打乱图片，所以二维数组内的图片序号随机，具体的思路如下

• 定义一个一维数组 tempArr，存放0-15（图片编号）

int[] tempArr = {0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15};

• 定义一个随机数，用来表示索引值（范围是0-15）

Random r = new Random();

• 遍历数组，让每个数都与随机索引所对应的数值交换

for (int i = 0; i < tempArr.length; i++) {

			//随机生成索引值
            int index = r.nextInt(tempArr.length);
            
            //交换
            int temp = tempArr[i];
            tempArr[i] = tempArr[index];
            tempArr[index] = temp;
        }

• 创建一个二维数组data[i][j]来表示4×4的方格

int[][] data = new int[4][4];

• 定义一个索引，用来提取一维数组内的值

int tempIndex = 0;

• 遍历二维数组，为二维数组依次赋值为一维数组内的值

for (int i = 0; i < data.length; i++) {
    for (int j = 0; j < data[i].length; j++) {
        System.out.print(data[i][j] + " ");
    }
    //每行输出后要换行
    System.out.println();
}

测试一下代码

三、改写GameJFrame类

1.注意事项

• 此处要注意，由于二维数组在打乱图片和加载图片中都会用到，所以我们把初始化二维数组的代码写在成员位置上
  
• 打乱图片界面要放在初始化界面前面，否则无法实现打乱效果
• 要用一个数去接收二维数组中的每个数（图片编号）
• 重新定义一个方法来实现打乱图片的效果

2.完整代码

 private void initdata() {
        //初始化一维数组
        int[] tempArr = {0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15};
        //定义一个随机变量（索引）
        Random r = new Random();
        //遍历数组，将每个数与随机索引对应数值交换
        for (int i = 0; i < tempArr.length; i++) {
            int index = r.nextInt(tempArr.length);
            int temp = tempArr[i];
            tempArr[i] = tempArr[index];
            tempArr[index] = temp;
        }
        //定义索引，用来提取一维数组中的数
        int tempIndex = 0;
        //遍历二维数组，填入数值
        for (int i = 0; i < data.length; i++) {
            //将每一行看作是一个一维数组，遍历一次
            for (int j = 0; j < data[i].length; j++) {
                data[i][j] = tempArr[tempIndex];
                //遍历完成后提取一维数组中下一个值
                tempIndex++;
            }
        }
    }

    private void initImage() {
        for(int i = 0; i < 4; i++){
            for(int j = 0; j < 4; j++){
                int number = data[i][j];
                JLabel jLabel = new JLabel(new ImageIcon("F:\\IDEA\\PuzzleGame\\image\\image\\animal\\animal3\\"+ number +".jpg"));
                jLabel.setBounds(105 * j, 105 * i,105,105);
                this.getContentPane().add(jLabel);
            }
        }

    }

四、测试代码

五、结语

本文中的二维数组实现方法还有另外一种，感兴趣的读者可以自己思考一下，具体的方法会在下一篇文章的文末写出来以供参考