Java项目2——拼图小游戏(上)

项目演示见：【黑马程序员Java零基础视频教程_上部(Java入门，含斯坦福大学练习题+力扣算法题和大厂java面试题）】https://www.bilibili.com/video/BV17F411T7Ao?p=144&vd_source=e3bea17ef4af71758701e41d1898dafd

一、图形化界面GUI

Java中有两套完整的GUI体系，AWT包和Swing包，最先出来的是AWT包，但是因为可能太久远了，会出现中文乱码的情况，所以最常用的是Swing。

在学习完之前的面向对象、包括集合、字符串、循环、判断等知识点现在都太零散了，不知道如何应用，那么今天这个小的项目将会帮助到我们综合利用起来这些知识点，形成一个初步的分析问题的思维方式。

今天通过这个GUI作为载体来综合利用我们的知识点，深入的GUI知识不需要太过多了解。主要锻炼的两个能力：

二、项目

2.1 游戏主界面分析

可以将主界面分为三个部分。他们可以通称为组件。

第一部分JFrame：J表示Java，Frame窗体界面，所有的文字和图片都是要放到这个窗体当中的。显然这是最先需要实现的载体逻辑。

第二部分JMenuBar：Menu菜单，Bar栏目。

第三部分JLabel: Label区域。是一个管理容器，包括文字和图片。用来创建一个可以存储文字和图片的对象，最后放到JFrame窗体中。

2.1.1 JFrame

package com.lkbhua.ui;import javax.swing.*;public class Test {public static void main(String[] args) {// 1、创建一个游戏的主界面// JFrame：一个用来创建窗体的类JFrame gameJFrame = new JFrame();gameJFrame.setSize(603, 680);// 默认窗体是隐藏的，需要通过setVisible方法显示窗体gameJFrame.setVisible(true);// 2、创建一个登入界面JFrame loginJFrame = new JFrame();loginJFrame.setSize(488, 430);loginJFrame.setVisible(true);// 3、创建一个注册界面JFrame registerJFrame = new JFrame();registerJFrame.setSize(488, 500);registerJFrame.setVisible(true);}
}

用继承改写以上的代码：

APP类：

import com.lkbhua.ui.GameJFrame;
import com.lkbhua.ui.LoginJFrame;
import com.lkbhua.ui.RegisterJFrame;public class App {public static void main(String[] args) {// 表示程序的启动入口// 如果我们想要开启一个界面，就创建谁的对象new LoginJFrame();new RegisterJFrame();new GameJFrame();}
}

GameJFrame类：

package com.lkbhua.ui;import javax.swing.*;public class GameJFrame extends JFrame {// JFrame: 界面 窗体// 其子类也表示窗体和界面// 规定：GameJFrame这个界面表示的就是游戏的主界面// 以后跟游戏相关的所有逻辑都写在这个类中public GameJFrame() {this.setSize(603, 680);this.setVisible(true);}
}

LoginJFrame类：

package com.lkbhua.ui;import javax.swing.*;public class LoginJFrame extends JFrame {// LoginJFrame: 登入界面// 以后所有跟登入相关的代码，都写在这个类public LoginJFrame() {// 在创建登录界面的时候，同时给这个界面去设置一些信息(初始化)// 比如：宽高、直接展示等this.setSize(488, 430);this.setVisible(true);}
}

RegisterJFrame类：

package com.lkbhua.ui;import javax.swing.*;public class RegisterJFrame extends JFrame {// RegisterJFrame：注册界面// 所有注册界面的代码的都写在RegisterJFrame类里面public RegisterJFrame() {this.setSize(488, 500);this.setVisible(true);}
}

以后就可以分类，分模块实现功能了。跟谁相关就写在哪个类中。

完善界面：包括窗口标题、置顶窗口、设置居中、关闭界面等。

setDefaultCloseOperation方法关闭模式简介：

GameJFrame类：

package com.lkbhua.ui;import javax.swing.*;public class GameJFrame extends JFrame {// JFrame: 界面 窗体// 其子类也表示窗体和界面// 规定：GameJFrame这个界面表示的就是游戏的主界面// 以后跟游戏相关的所有逻辑都写在这个类中public GameJFrame() {// 设置界面的宽高this.setSize(603, 680);// 设置界面的标题this.setTitle("拼图游戏单机版 V1.0");// 设置界面置顶this.setAlwaysOnTop(true);// 设置界面居中this.setLocationRelativeTo(null);// 设置游戏的关闭模式// 虚拟机会随之关闭// 3：关闭的模式之一 意思为：关闭任何一个窗体，虚拟机就会停止// 本游戏中的三个模式不会同时出翔，所有使用模式3即可this.setDefaultCloseOperation(3);// 让界面显示，建议写在最后this.setVisible(true);}
}

LoginJFrame类：

package com.lkbhua.ui;import javax.swing.*;public class LoginJFrame extends JFrame {// LoginJFrame: 登入界面// 以后所有跟登入相关的代码，都写在这个类public LoginJFrame() {// 在创建登录界面的时候，同时给这个界面去设置一些信息(初始化)// 比如：宽高、直接展示等this.setSize(488, 430);// 设置界面的标题this.setTitle("拼图 登入");// 设置界面置顶this.setAlwaysOnTop(true);// 设置界面居中this.setLocationRelativeTo(null);// 设置游戏的关闭模式// 虚拟机会随之关闭// 3：关闭的模式之一 意思为：关闭任何一个窗体，虚拟机就会停止// 本游戏中的三个模式不会同时出翔，所有使用模式3即可this.setDefaultCloseOperation(3);// 让界面显示，建议写在最后this.setVisible(true);}
}

RegisterJFrame类：

package com.lkbhua.ui;import javax.swing.*;public class RegisterJFrame extends JFrame {// RegisterJFrame：注册界面// 所有注册界面的代码的都写在RegisterJFrame类里面public RegisterJFrame() {this.setSize(488, 500);// 设置界面的标题this.setTitle("拼图 注册");// 设置界面置顶this.setAlwaysOnTop(true);// 设置界面居中this.setLocationRelativeTo(null);// 设置游戏的关闭模式// 虚拟机会随之关闭// 3：关闭的模式之一 意思为：关闭任何一个窗体，虚拟机就会停止// 本游戏中的三个模式不会同时出翔，所有使用模式3即可this.setDefaultCloseOperation(3);// 让界面显示，建议写在最后this.setVisible(true);}
}

2.2.2 菜单制作

在Java中有一个类专门用来描述菜单的，JMenuBar是表示整个的菜单，菜单中很多的选项，每一个选项都代表Menu类。对应的就需要创建三个Menu()对象。

点击功能，展示的所有的子功能都是一个Menu item的对象（item：条目）。

整体最大的是JMenuBar，在其中每一个选项都是JMenu的对象，其中又包括多个子条目JMenuItem的对象。他们三之间相互独立        

这里暂时不写更换图片，逻辑相对复杂，后续再写。

菜单逻辑：

    private void initJMenuBar() {// 1、创建整个菜单对象JMenuBar jMenuBar = new JMenuBar();// 2、创建菜单上面的两个选项的对象(功能、关于我们)JMenu functionJMenu = new JMenu("功能");JMenu aboutJMenu = new JMenu("关于我们");// 3、创建选项下面的条目对象JMenuItem replayItem = new JMenuItem("重新游戏");JMenuItem reLoginItem = new JMenuItem("重新登录");JMenuItem closeItem = new JMenuItem("关闭游戏");JMenuItem accountItem = new JMenuItem("公众号");// 将每一个选项下面的条目去添加到选项当中functionJMenu.add(replayItem);functionJMenu.add(reLoginItem);functionJMenu.add(closeItem);aboutJMenu.add(accountItem);// 将菜单里面的两个选项添加到菜单当中jMenuBar.add(functionJMenu);jMenuBar.add(aboutJMenu);// 给整个界面设置菜单this.setJMenuBar(jMenuBar);

2.2.3 添加图片

图片所对应的类叫做image icon，一张图片对应的一个image icon对象。需要给图片进行一个宽高位置、边框的设置。首先就需要先放到JLabel管理区域，它可以管理文字或者图片，就可以对这些属性进行设置，默认展示在窗体的正中央。

private void initImage() {// 创建一个图片ImageIcon对象ImageIcon icon = new ImageIcon("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\animal\\animal1\\3.jpg");// 创建一个JLabel对象JLabel jLabel = new JLabel(icon);// 把JLabel设置到界面中this.add(jLabel);
}

总不能每一张图片都是在正中央吧，这不是我们想要的排列效果，此时就需要了解坐标的概念。

坐标是以窗体的左上角为原点，如果图片的坐标的x，y都设置为0，就会按照像素的大小，将其从原点开始放置，切记：一定要在添加图片之前设置好图片的坐标。

细节：主窗体的三个部分，第一个部分是标题、第二个部分就是菜单、在其下面其实含一个隐藏的容器，用红色的部分框出。隐藏的容器不需要我们自己创建对象，因为它是JFrame界面里面的东西，当我们创建了JFrame窗体对象的时候，它随之被创建。直接通过getContentPane()方法就可以获取。我们添加图片呢，其实就是添加到了这个隐藏的容器，在没有特殊的要求它默认给你放到正中央，如何取消这个隐藏容器的默认放置机制，那么就需要用到setLayout(null)方法，即可取消这个默认机制，就可以完全按照我们的构想去放置图片。

    private void initImage() {// 创建一个图片ImageIcon对象ImageIcon icon1 = new ImageIcon("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\animal\\animal1\\3.jpg");// 创建一个JLabel对象JLabel jLabel1 = new JLabel(icon1);// 指定图片位置jLabel1.setBounds(0, 0, 105, 105);// 把JLabel设置到界面中this.getContentPane().add(jLabel1);}

添加第二张图片

利用双循环添加所有的图片

    private void initImage() {int number = 1;// 利用循环添加第一行图片// 外循环--- 把内循环循环4遍for(int i = 0; i < 4; i++){// 内循环--- 表示在一行中添加4张图片for (int j = 0; j < 4; j++) {// 创建一个图片ImageIcon对象ImageIcon icon1 = new ImageIcon("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\animal\\animal1\\"+number+".jpg");// 创建一个JLabel对象JLabel jLabel = new JLabel(icon1);// 指定图片位置jLabel.setBounds(105*j, 105*i, 105, 105);// 自增number表示：加载下一张图片number++;}}}

2.2.4 打乱图片顺序

用一个容器来管理这些数字，在容器中打乱数字，加载是加载这个容器的元素就可以了。

这里长度固定，我们首先想到集合。

两个问题：

① 处理器需要自己去数行数和列数，很麻烦。

解决办法：用二维数组

package com.lkbhua.test;import com.lkbhua.ui.RegisterJFrame;import java.util.Random;public class Test {public static void main(String[] args) {//  需求：//  把一个一位数组中的数据：0-15 打乱顺序//  然后再按照4个一组的方式添加到二维数组当中// 1、定义一个一维数组int []tempArr = {0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15};// 2、打乱数组中的数据顺序// 遍历数组，得到每一个元素，拿着每一个元素和随机索引进行交换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;}// 3、遍历数组for (int i = 0; i < tempArr.length; i++) {System.out.print(tempArr[i] + " ");}System.out.println();// 4、把数组中的数据添加到二维数组中int [][]data = new int[4][4];// 5、添加数据// case1：遍历一维数组，得到每一个元素，把每一个元素依次添加到二维数组当中/*for (int i = 0; i < tempArr.length; i++) {// 数组【0】--- 0/4 == 0 0%4 == 0 放置到第0行第0列// 数组【1】--- 1/4 == 0 1%4 == 1 放置到第0行第1列// 数组【2】--- 2/4 == 0 2%4 == 2 放置到第0行第2列data[i/4][i%4] = tempArr[i];}*/// case2：遍历二维数组，再给里面的每一位数据赋值int index = 0;for(int i = 0;i<data.length;i++){for(int j = 0;j<data[i].length;j++){data[i][j] = tempArr[index];index++;}System.out.println();}// 遍历二维数组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();}}
}

结合到项目逻辑代码中：

    // 初始化数据方法private void initData() {// 1、定义一个一维数组int []tempArr = {0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15};// 2、打乱数组中的数据顺序// 遍历数组，得到每一个元素，拿着每一个元素和随机索引进行交换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;}// 5、添加数据// case1：遍历一维数组，得到每一个元素，把每一个元素依次添加到二维数组当中for (int i = 0; i < tempArr.length; i++) {// 数组【0】--- 0/4 == 0 0%4 == 0 放置到第0行第0列// 数组【1】--- 1/4 == 0 1%4 == 1 放置到第0行第1列// 数组【2】--- 2/4 == 0 2%4 == 2 放置到第0行第2列data[i/4][i%4] = tempArr[i];}}

其中二维数组的创建需要当作类的成员变量，因为它的作用不止在初始化数据方法中，还在加载图片的方法中需要使用。

    // 初始化图片方法// 添加图片的时候，就需要按照二维数组中管理的数据添加图片private void initImage() {// 利用循环添加第一行图片// 外循环--- 把内循环循环4遍for(int i = 0; i < 4; i++){// 内循环--- 表示在一行中添加4张图片for (int j = 0; j < 4; j++) {// 获取当前要加载的图片的编号int number = data[i][j];// 创建一个图片ImageIcon对象ImageIcon icon1 = new ImageIcon("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\animal\\animal1\\"+number+".jpg");// 创建一个JLabel对象JLabel jLabel = new JLabel(icon1);// 指定图片位置jLabel.setBounds(105*j, 105*i, 105, 105);// 添加图片this.getContentPane().add(jLabel);// 自增number表示：加载下一张图片number++;}}}

2.2 操作游戏

2.2.1 事件

在Java中，事件（Event） 是图形用户界面（GUI）编程中的核心概念之一，用于实现用户操作与程序响应之间的交互。

简单来说，事件就是用户或系统对界面组件（如按钮、窗口、文本框等）执行的某种动作。当这个动作发生时，Java会自动创建一个“事件对象”并将其发送给对应的“监听器”，从而触发相应的处理代码。

事件的基本组成：事件源、事件、事件监听器

2.2.1.1 动作监听

创建按钮和调用的几种方式

①在类中直接创建该按钮对象，并在MyActionListener类中实现对接口方法的重写

package com.lkbhua.test;import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;public class MyActionListener implements ActionListener {@Overridepublic void actionPerformed(ActionEvent e) {System.out.println("按钮被点击了");}
}

public class Test3 {public static void main(String[] args){JFrame jFrame = new JFrame();// 设置界面的宽高jFrame.setSize(603,680);// 设置界面的标题jFrame.setTitle("事件演示");// 设置界面置顶jFrame.setAlwaysOnTop(true);// 设置界面居中jFrame.setLocationRelativeTo(null);// 设置关闭模式jFrame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);// 取消默认的居中放置，jFrame.setLayout(null);// 创建一个按钮对象JButton jtb = new JButton("点机");// 设置位置和宽高jtb.setBounds(0,0,100,50);// 给按钮添加动作监听// jtb:组件对象，表示你要给哪个组件添加事件// addActionListener： 表示我要给组件添加哪个事件监听（动作监听：鼠标左键点击，空格）// 参数：表示事件被触发后会执行的代码jtb.addActionListener(new MyActionListener());// 把按钮添加到界面jFrame.getContentPane().add(jtb);}
}

② 由于该类只被使用一次，可以利用匿名内部类进行简化

package com.lkbhua.test;import javax.swing.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;public class Test3 {public static void main(String[] args){JFrame jFrame = new JFrame();// 设置界面的宽高jFrame.setSize(603,680);// 设置界面的标题jFrame.setTitle("事件演示");// 设置界面置顶jFrame.setAlwaysOnTop(true);// 设置界面居中jFrame.setLocationRelativeTo(null);// 设置关闭模式jFrame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);// 取消默认的居中放置，jFrame.setLayout(null);// 创建一个按钮对象JButton jtb = new JButton("点机");// 设置位置和宽高jtb.setBounds(0,0,100,50);// 这里的类只会被用到一次，那么可以使用匿名内部类jtb.addActionListener(new ActionListener() {@Overridepublic void actionPerformed(ActionEvent e) {System.out.println("点击了");}});// 把按钮添加到界面jFrame.getContentPane().add(jtb);jFrame.setVisible(true);}
}

③ 开发中通用的方式，自己创建一个MyJFrame类继承JFrame和调用接口ActionListerner

对按钮实现相应的操作，并在测试类进行测试。

package com.lkbhua.test;import javax.swing.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.util.Random;public class MyJFrame extends JFrame implements ActionListener {// 创建一个按钮对象JButton jtb1 = new JButton("点机");JButton jtb2 = new JButton("点机");public MyJFrame(){// 设置界面的宽高this.setSize(603,680);// 设置界面的标题this.setTitle("事件演示");// 设置界面置顶this.setAlwaysOnTop(true);// 设置界面居中this.setLocationRelativeTo(null);// 设置关闭模式this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);// 取消默认的居中放置，this.setLayout(null);// 设置位置和宽高jtb1.setBounds(0,0,100,50);// 给按钮添加点击事件jtb1.addActionListener(this);jtb2.setBounds(100,0,100,50);jtb2.addActionListener(this);// 添加按钮到界面中this.getContentPane().add(jtb1);this.getContentPane().add(jtb2);// 显示整个界面this.setVisible( true);}@Overridepublic void actionPerformed(ActionEvent e) {// 获取当前被操作的那个按钮对象Object source = e.getSource();if(source == jtb1){System.out.println("点击了按钮1");jtb1.setSize(200,200);}else if(source == jtb2){System.out.println("点击了按钮2");Random random = new Random();jtb2.setLocation(random.nextInt(500),random.nextInt(500));}}
}

package com.lkbhua.test;public class Test4 {public static void main(String[] args) {new MyJFrame();}
}

2.2.1.2 鼠标监听

鼠标的动作进行拆分

package com.lkbhua.test;import javax.swing.*;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;public class MyJFrame2 extends JFrame implements MouseListener {// 创建一个按钮对象JButton jtb1 = new JButton("点我");public MyJFrame2() {// 设置界面的宽高this.setSize(603,680);// 设置界面的标题this.setTitle("事件演示");// 设置界面置顶this.setAlwaysOnTop(true);// 设置界面居中this.setLocationRelativeTo(null);// 设置关闭模式this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);// 取消默认的居中放置，this.setLayout(null);// 给按钮设置宽高和位置jtb1.setBounds(0,0,100,50);// 给按钮绑定鼠标事件jtb1.addMouseListener(this);// 给按钮添加界面this.getContentPane().add(jtb1);// 让整个界面显示出来this.setVisible(true);}@Overridepublic void mouseClicked(MouseEvent e) {System.out.println("点击了");}@Overridepublic void mousePressed(MouseEvent e) {System.out.println("按下了");}@Overridepublic void mouseReleased(MouseEvent e) {System.out.println("抬起了");}@Overridepublic void mouseEntered(MouseEvent e) {System.out.println("划入");}@Overridepublic void mouseExited(MouseEvent e) {System.out.println("划出");}
}

package com.lkbhua.test;public class Test4 {public static void main(String[] args) {new MyJFrame();new MyJFrame2();}
}

2.2.1.3 键盘监听

package com.lkbhua.test;import javax.swing.*;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;public class MyJFrame3 extends MyJFrame2 implements KeyListener {public MyJFrame3(){// 设置界面的宽高this.setSize(603,680);// 设置界面的标题this.setTitle("事件演示");// 设置界面置顶this.setAlwaysOnTop(true);// 设置界面居中this.setLocationRelativeTo(null);// 设置关闭模式this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);// 取消默认的居中放置，this.setLayout(null);// 给整个窗体添加键盘监听// 调用者this: 表示本类对象，当前的界面对象，我要给整个界面添加监听// addKeyListener：决定添加键盘监听// 参数this：当事件被触发之后，会执行本类中的代码this.addKeyListener(this);// 让整个界面显示出来this.setVisible(true);}// 建议英文状态下按键// 细节1：如果我们按一下一个按键不送，键盘会重复触发这个方法// 细节2：键盘如何具体区别ABC等不同按键?// ----每一个按键都有一个编号与之区分，注意不是ACSII码表@Overridepublic void keyTyped(KeyEvent e) {}@Overridepublic void keyPressed(KeyEvent e) {System.out.println("按下了按键");}@Overridepublic void keyReleased(KeyEvent e) {System.out.println("抬起了按键");// 获取按键上每一个按键的编号int code = e.getKeyCode();if(code == 65){System.out.println("按下了A");}if(code == 66){System.out.println("按下了B");}if(code == 67){System.out.println("按下了C");}}
}

2.3 完善代码逻辑

2.3.1 美化界面

①将随机图片放到界面中央偏下显示；

②给游戏添加一个背景图；

③给每一个小图片添加边框。

美化界面肯定是跟图片初始化有关，跟初始化界面、菜单、数据打乱等无关。这点要想好。

 

该接口写好的不同的实现类如图所示，我们使用的是BevelBorder类，是一种斜面的边框。

绝对路径：从盘符开始，一直到最后的目标文件的完整路径。

相对路径：相对本项目的目录开始，寻找目标文件。

    private void initImage() {// 利用循环添加第一行图片// 外循环--- 把内循环循环4遍for(int i = 0; i < 4; i++){// 内循环--- 表示在一行中添加4张图片for (int j = 0; j < 4; j++) {// 获取当前要加载的图片的编号int number = data[i][j];// 创建一个图片ImageIcon对象ImageIcon icon1 = new ImageIcon("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\animal\\animal1\\"+number+".jpg");// 创建一个JLabel对象JLabel jLabel = new JLabel(icon1);// 美化界面1：// 指定图片位置// 参数：进行图片偏移jLabel.setBounds(105*j+83, 105*i+134, 105, 105);// 美化界面2：// 给图片添加边框// BevelBorder: 创建一个边框// 其参数0（RAISED）：表示让图片凸起来// 其参数1(LOWERED)：表示让图片凹进去jLabel.setBorder(new BevelBorder(1));// 添加图片this.getContentPane().add(jLabel);// 自增number表示：加载下一张图片number++;}}// 美化界面3：// 添加背景图片// 一定要放在游戏图片外，先放到容器中的图片会占据的地方一直会占据在那显示。JLabel background = new JLabel("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\background.png");background.setBounds(40,40,508,560);// 把背景图片添加到界面当中this.getContentPane().add(background);}

2.3.2 移动操作

每一张图片都跟一个唯一的数字对应，而这些数字都是存放在二维数组当中。只需要找到空白图片和被操作图片对应的数字位置即可。如图所示，代码只需要将赋值给0，而13变成0即可。

监听上下左右代码逻辑：

public class GameJFrame extends JFrame implements KeyListener {// JFrame: 界面 窗体// 其子类也表示窗体和界面// 规定：GameJFrame这个界面表示的就是游戏的主界面// 以后跟游戏相关的所有逻辑都写在这个类中// 创建二维数组，模拟一个二维数组// 目的：把一位数组中的数据添加到二维数组中，用来管理数据，加载图片的的时候会根据二维数据中进行加载int [][]data = new int[4][4];public GameJFrame() {    
// 记录空白方块在二维数组位置的变量int x = 0;int y = 0;// 初始化数据方法private void initData() {// 1、定义一个一维数组int []tempArr = {0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15};// 2、打乱数组中的数据顺序// 遍历数组，得到每一个元素，拿着每一个元素和随机索引进行交换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;}// 5、添加数据// case1：遍历一维数组，得到每一个元素，把每一个元素依次添加到二维数组当中for (int i = 0; i < tempArr.length; i++) {// 数组【0】--- 0/4 == 0 0%4 == 0 放置到第0行第0列// 数组【1】--- 1/4 == 0 1%4 == 1 放置到第0行第1列// 数组【2】--- 2/4 == 0 2%4 == 2 放置到第0行第2列if(tempArr[i] == 0){x = i/4;y = i%4;}else{data[i/4][i%4] = tempArr[i];}}}private void initJFrame() {// 设置界面的宽高this.setSize(603, 680);// 设置界面的标题this.setTitle("拼图游戏单机版 V1.0");// 设置界面置顶this.setAlwaysOnTop(true);// 设置界面居中this.setLocationRelativeTo(null);// 设置游戏的关闭模式// 虚拟机会随之关闭// 3：关闭的模式之一 意思为：关闭任何一个窗体，虚拟机就会停止// 本游戏中的三个模式不会同时出翔，所有使用模式3即可this.setDefaultCloseOperation(3);// 取消默认的居中方式this.setLayout(null);// 给整个界面添加键盘监听事件this.addKeyListener(this);}@Overridepublic void keyTyped(KeyEvent e) {}@Overridepublic void keyPressed(KeyEvent e) {}@Overridepublic void keyReleased(KeyEvent e) {// 对上、下、左、右进行判断// 左：37 右：39// 上：38 下：40// 查看各个按键所对应的int值// System.out.println(code);int code = e.getKeyCode();if(code == 37){System.out.println("向左");if(y == 3){// 空白方块已经在最右边了，不能在向右移动了return;}data[x][y] = data[x][y+1];data[x][y+1] = 0;y++;// 调用方法用最新的数字排列加载图片initImage();}else if(code == 38){System.out.println("向上");if(x == 3){// 表示空白方块已经在最下方了，不能在移动了return;}// 逻辑:// 把空白块下方的数字往上移动// x，y: 空白方块// x+1，y表示：空白方块下方的数字data[x][y] = data[x+1][y];data[x+1][y] = 0;x++;// 调用方法用最新的数字排列加载图片initImage();}else if(code == 39){System.out.println("向右");if(y == 0){// 空白方块已经在最左边了，不能在向右移动了return;}data[x][y] = data[x][y-1];data[x][y-1] = 0;y--;// 调用方法用最新的数字排列加载图片initImage();}else if(code == 40){System.out.println("向下");if(x == 0){// 空白方块已经在最上方了，不能在向右移动了return;}data[x][y] = data[x-1][y];data[x-1][y] = 0;x--;// 调用方法用最新的数字排列加载图片initImage();}}
}

2.3.3 查看完整图片功能

    // 按下不松会调用这个方法@Overridepublic void keyPressed(KeyEvent e) {int code = e.getKeyCode();if(code == 65){// 把界面中所有的图片全部删除this.getContentPane().removeAll();// 加载第一张完整的图片JLabel all = new JLabel(new ImageIcon(path+"all.jpg"));all.setBounds(83,134,420,420);this.getContentPane().add(all);// 加载背景图片JLabel background = new JLabel(new ImageIcon("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\background.png"));background.setBounds(40,40,508,560);this.getContentPane().add(background);// 刷新界面this.getContentPane().repaint();}}@Overridepublic void keyReleased(KeyEvent e) {else if(code == 65){initImage();}
}

2.3.4 作弊码

 @Overridepublic void keyReleased(KeyEvent e) {else if(code == 87){data = new int[][]{{1,2,3,4},{5,6,7,8},{9,10,11,12},{13,14,15,0}};}
}

2.3.5 判断胜利

public class GameJFrame extends JFrame implements KeyListener {// 定义一个二维数组，存储正确的数组int [][]win = new int[][]{{1,2,3,4},{5,6,7,8},{9,10,11,12},{13,14,15,0}};   private void initImage() {// ====== 关键修复：先移除所有旧组件 ======this.getContentPane().removeAll(); // 清空所有已添加的组件if(victory()){// 显示胜利的图片JLabel winJLabel = new JLabel(new ImageIcon("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\win.png"));winJLabel.setBounds(203,283,197,73);this.getContentPane().add(winJLabel);}
-----
}// 判断游戏是否成功public boolean victory(){for (int i = 0; i < data.length; i++) {for (int j = 0; j < data.length; j++) {if(data[i][j] != win[i][j]){return false;}}}// 循环结束，表示游戏成功return true;}}}

2.3.6 计步功能

public class GameJFrame extends JFrame implements KeyListener {// 计算步数int step = 0;private void initImage() {// 加载计步到界面JLabel stepCount = new JLabel("步数："+step);stepCount.setBounds(50, 30, 100, 20);this.getContentPane().add(stepCount);}@Overridepublic void keyReleased(KeyEvent e) {// 判断游戏是否胜利，如果胜利了，此方法不再执行if(victory()){// 结束方法return;}// 对上、下、左、右进行判断// 左：37 右：39// 上：38 下：40// 查看各个按键所对应的int值// System.out.println(code);int code = e.getKeyCode();if(code == 37){System.out.println("向左");if(y == 3){// 空白方块已经在最右边了，不能在向右移动了return;}data[x][y] = data[x][y+1];data[x][y+1] = 0;y++;step++;// 调用方法用最新的数字排列加载图片initImage();}else if(code == 38){System.out.println("向上");if(x == 3){// 表示空白方块已经在最下方了，不能在移动了return;}// 逻辑:// 把空白块下方的数字往上移动// x，y: 空白方块// x+1，y表示：空白方块下方的数字data[x][y] = data[x+1][y];data[x+1][y] = 0;x++;step++;// 调用方法用最新的数字排列加载图片initImage();}else if(code == 39){System.out.println("向右");if(y == 0){// 空白方块已经在最左边了，不能在向右移动了return;}data[x][y] = data[x][y-1];data[x][y-1] = 0;y--;step++;// 调用方法用最新的数字排列加载图片initImage();}else if(code == 40){System.out.println("向下");if(x == 0){// 空白方块已经在最上方了，不能在向右移动了return;}data[x][y] = data[x-1][y];data[x-1][y] = 0;x--;step++;// 调用方法用最新的数字排列加载图片initImage();}else if(code == 65){initImage();}else if(code == 87){data = new int[][]{{1,2,3,4},{5,6,7,8},{9,10,11,12},{13,14,15,0}};initImage();}}
}

2.3.7 重新开始和关闭游戏

public class GameJFrame extends JFrame implements KeyListener, ActionListener { 
// 新增监听接口，重写抽象方法   // 创建选项下面的条目对象（转换成成员变量）JMenuItem replayItem = new JMenuItem("重新游戏");JMenuItem reLoginItem = new JMenuItem("重新登录");JMenuItem closeItem = new JMenuItem("关闭游戏");JMenuItem accountItem = new JMenuItem("公众号");   @Overridepublic void actionPerformed(ActionEvent e) {// 获取当前被点击的条目对象Object obj = e.getSource();if(obj == replayItem){System.out.println("重新开始");// 一定要先清零，否则会累加// 因为重新加载图片会执行计数器代码，清零不起效果// 计算器清零step = 0;// 再次打乱二维数组中的数据initData();// 重新加载图片initImage();}else if(obj == reLoginItem){System.out.println("重新登录");// 关闭当前的游戏界面this.setVisible( false);// 打开登录界面new LoginJFrame();}else if(obj == closeItem){System.out.println("关闭游戏");// 直接关闭虚拟机System.exit(0);}else if(obj == accountItem){System.out.println("公众号");// 创建一个弹框JDialog jd = new JDialog();// 创建一个容器管理图片对象jdJLabel jLabel = new JLabel(new ImageIcon("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\公众号.png"));// 设置容器的大小和位置jLabel.setBounds(0,0,258,258);// 添加容器到弹框jd.getContentPane().add(jLabel);// 给弹框设置大小jd.setSize(344,344);// 让弹框置顶jd.setAlwaysOnTop(true);// 弹框居中jd.setLocationRelativeTo(null);// 弹框不关闭，无法进行后面操作jd.setModal(true);// 让弹框显示jd.setVisible(true);}}}
}

2.4 完整代码

package com.lkbhua.ui;import javax.swing.*;
import javax.swing.border.BevelBorder;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.util.Random;public class GameJFrame extends JFrame implements KeyListener, ActionListener {// JFrame: 界面 窗体// 其子类也表示窗体和界面// 规定：GameJFrame这个界面表示的就是游戏的主界面// 以后跟游戏相关的所有逻辑都写在这个类中// 创建二维数组，模拟一个二维数组// 目的：把一位数组中的数据添加到二维数组中，用来管理数据，加载图片的的时候会根据二维数据中进行加载int [][]data = new int[4][4];// 记录空白方块在二维数组位置的变量int x = 0;int y = 0;// 定义一个变量，记录当前展示图片的路径String path = "D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\animal\\animal1\\";// 定义一个二维数组，存储正确的数组int [][]win = new int[][]{{1,2,3,4},{5,6,7,8},{9,10,11,12},{13,14,15,0}};// 计算步数int step = 0;// 创建选项下面的条目对象JMenuItem replayItem = new JMenuItem("重新游戏");JMenuItem reLoginItem = new JMenuItem("重新登录");JMenuItem closeItem = new JMenuItem("关闭游戏");JMenuItem accountItem = new JMenuItem("公众号");public GameJFrame() {// 初始化界面initJFrame(); // 初始化菜单initJMenuBar();// 初始化数据（打乱）initData();// 初始化图片（根据打乱之后的效果加载图片）initImage();// 让界面显示，建议写在最后this.setVisible(true);}// 初始化数据方法private void initData() {// 1、定义一个一维数组int []tempArr = {0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15};// 2、打乱数组中的数据顺序// 遍历数组，得到每一个元素，拿着每一个元素和随机索引进行交换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;}// 5、添加数据// case1：遍历一维数组，得到每一个元素，把每一个元素依次添加到二维数组当中for (int i = 0; i < tempArr.length; i++) {// 数组【0】--- 0/4 == 0 0%4 == 0 放置到第0行第0列// 数组【1】--- 1/4 == 0 1%4 == 1 放置到第0行第1列// 数组【2】--- 2/4 == 0 2%4 == 2 放置到第0行第2列if(tempArr[i] == 0){x = i/4;y = i%4;}// 这里不用else是因为如果是0，那么就不用处理了，还是会加载上一个数据，然后显示，是不会执行else里面的代码的，这里为了一定要他执行，我们就删掉elsedata[i/4][i%4] = tempArr[i];}}// 初始化图片方法// 添加图片的时候，就需要按照二维数组中管理的数据添加图片private void initImage() {// ====== 关键修复：先移除所有旧组件 ======this.getContentPane().removeAll(); // 清空所有已添加的组件if(victory()){// 显示胜利的图片JLabel winJLabel = new JLabel(new ImageIcon("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\win.png"));winJLabel.setBounds(203,283,197,73);this.getContentPane().add(winJLabel);}// 加载计步到界面JLabel stepCount = new JLabel("步数："+step);stepCount.setBounds(50, 30, 100, 20);this.getContentPane().add(stepCount);// 利用循环添加第一行图片// 外循环--- 把内循环循环4遍for(int i = 0; i < 4; i++){// 内循环--- 表示在一行中添加4张图片for (int j = 0; j < 4; j++) {// 获取当前要加载的图片的编号int number = data[i][j];// 创建一个图片ImageIcon对象ImageIcon icon1 = new ImageIcon(path+number+".jpg");// 创建一个JLabel对象JLabel jLabel = new JLabel(icon1);// 美化界面1：// 指定图片位置// 参数：进行图片偏移jLabel.setBounds(105*j+83, 105*i+134, 105, 105);// 美化界面2：// 给图片添加边框// BevelBorder: 创建一个边框// 其参数0（RAISED）：表示让图片凸起来// 其参数1(LOWERED)：表示让图片凹进去jLabel.setBorder(new BevelBorder(1));// 添加图片this.getContentPane().add(jLabel);// 自增number表示：加载下一张图片number++;}}// 美化界面3：// 添加背景图片// 一定要放在游戏图片外，先放到容器中的图片会占据的地方一直会占据在那显示。JLabel background = new JLabel("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\background.png");background.setBounds(40,40,508,560);// 把背景图片添加到界面当中this.getContentPane().add(background);// ====== 关键修复：强制刷新界面 ======this.revalidate(); // 重新布局this.repaint();    // 重绘界面}// 初始化菜单方法private void initJMenuBar() {// 1、创建整个菜单对象JMenuBar jMenuBar = new JMenuBar();// 2、创建菜单上面的两个选项的对象(功能、关于我们)JMenu functionJMenu = new JMenu("功能");JMenu aboutJMenu = new JMenu("关于我们");// 将每一个选项下面的条目去添加到选项当中functionJMenu.add(replayItem);functionJMenu.add(reLoginItem);functionJMenu.add(closeItem);aboutJMenu.add(accountItem);// 给条目绑定事件replayItem.addActionListener(this);reLoginItem.addActionListener(this);closeItem.addActionListener(this);accountItem.addActionListener(this);// 将菜单里面的两个选项添加到菜单当中jMenuBar.add(functionJMenu);jMenuBar.add(aboutJMenu);// 给整个界面设置菜单this.setJMenuBar(jMenuBar);}// 初始化界面方法private void initJFrame() {// 设置界面的宽高this.setSize(603, 680);// 设置界面的标题this.setTitle("拼图游戏单机版 V1.0");// 设置界面置顶this.setAlwaysOnTop(true);// 设置界面居中this.setLocationRelativeTo(null);// 设置游戏的关闭模式// 虚拟机会随之关闭// 3：关闭的模式之一 意思为：关闭任何一个窗体，虚拟机就会停止// 本游戏中的三个模式不会同时出翔，所有使用模式3即可this.setDefaultCloseOperation(3);// 取消默认的居中方式this.setLayout(null);// 给整个界面添加键盘监听事件this.addKeyListener(this);}@Overridepublic void keyTyped(KeyEvent e) {}// 按下不松会调用这个方法@Overridepublic void keyPressed(KeyEvent e) {int code = e.getKeyCode();if(code == 65){// 把界面中所有的图片全部删除this.getContentPane().removeAll();// 加载第一张完整的图片JLabel all = new JLabel(new ImageIcon(path+"all.jpg"));all.setBounds(83,134,420,420);this.getContentPane().add(all);// 加载背景图片JLabel background = new JLabel(new ImageIcon("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\background.png"));background.setBounds(40,40,508,560);this.getContentPane().add(background);// 刷新界面this.getContentPane().repaint();}}@Overridepublic void keyReleased(KeyEvent e) {// 判断游戏是否胜利，如果胜利了，此方法不再执行if(victory()){// 结束方法return;}// 对上、下、左、右进行判断// 左：37 右：39// 上：38 下：40// 查看各个按键所对应的int值// System.out.println(code);int code = e.getKeyCode();if(code == 37){System.out.println("向左");if(y == 3){// 空白方块已经在最右边了，不能在向右移动了return;}data[x][y] = data[x][y+1];data[x][y+1] = 0;y++;step++;// 调用方法用最新的数字排列加载图片initImage();}else if(code == 38){System.out.println("向上");if(x == 3){// 表示空白方块已经在最下方了，不能在移动了return;}// 逻辑:// 把空白块下方的数字往上移动// x，y: 空白方块// x+1，y表示：空白方块下方的数字data[x][y] = data[x+1][y];data[x+1][y] = 0;x++;step++;// 调用方法用最新的数字排列加载图片initImage();}else if(code == 39){System.out.println("向右");if(y == 0){// 空白方块已经在最左边了，不能在向右移动了return;}data[x][y] = data[x][y-1];data[x][y-1] = 0;y--;step++;// 调用方法用最新的数字排列加载图片initImage();}else if(code == 40){System.out.println("向下");if(x == 0){// 空白方块已经在最上方了，不能在向右移动了return;}data[x][y] = data[x-1][y];data[x-1][y] = 0;x--;step++;// 调用方法用最新的数字排列加载图片initImage();}else if(code == 65){initImage();}else if(code == 87){data = new int[][]{{1,2,3,4},{5,6,7,8},{9,10,11,12},{13,14,15,0}};initImage();}}// 判断游戏是否成功public boolean victory(){for (int i = 0; i < data.length; i++) {for (int j = 0; j < data.length; j++) {if(data[i][j] != win[i][j]){return false;}}}// 循环结束，表示游戏成功return true;}@Overridepublic void actionPerformed(ActionEvent e) {// 获取当前被点击的条目对象Object obj = e.getSource();if(obj == replayItem){System.out.println("重新开始");// 一定要先清零，否则会累加// 因为重新加载图片会执行计数器代码，清零不起效果// 计算器清零step = 0;// 再次打乱二维数组中的数据initData();// 重新加载图片initImage();}else if(obj == reLoginItem){System.out.println("重新登录");// 关闭当前的游戏界面this.setVisible( false);// 打开登录界面new LoginJFrame();}else if(obj == closeItem){System.out.println("关闭游戏");// 直接关闭虚拟机System.exit(0);}else if(obj == accountItem){System.out.println("公众号");// 创建一个弹框JDialog jd = new JDialog();// 创建一个容器管理图片对象jdJLabel jLabel = new JLabel(new ImageIcon("D:\\Java\\best-code\\lkb2-JigsawPuzzleGames\\素材\\image\\公众号.png"));// 设置容器的大小和位置jLabel.setBounds(0,0,258,258);// 添加容器到弹框jd.getContentPane().add(jLabel);// 给弹框设置大小jd.setSize(344,344);// 让弹框置顶jd.setAlwaysOnTop(true);// 弹框居中jd.setLocationRelativeTo(null);// 弹框不关闭，无法进行后面操作jd.setModal(true);// 让弹框显示jd.setVisible(true);}}
}

package com.lkbhua.ui;import javax.swing.*;public class LoginJFrame extends JFrame {// LoginJFrame: 登入界面// 以后所有跟登入相关的代码，都写在这个类public LoginJFrame() {// 在创建登录界面的时候，同时给这个界面去设置一些信息(初始化)// 比如：宽高、直接展示等this.setSize(488, 430);// 设置界面的标题this.setTitle("拼图 登入");// 设置界面置顶this.setAlwaysOnTop(true);// 设置界面居中this.setLocationRelativeTo(null);// 设置游戏的关闭模式// 虚拟机会随之关闭// 3：关闭的模式之一 意思为：关闭任何一个窗体，虚拟机就会停止// 本游戏中的三个模式不会同时出翔，所有使用模式3即可this.setDefaultCloseOperation(3);// 让界面显示，建议写在最后this.setVisible(true);}
}

package com.lkbhua.ui;import javax.swing.*;public class RegisterJFrame extends JFrame {// RegisterJFrame：注册界面// 所有注册界面的代码的都写在RegisterJFrame类里面public RegisterJFrame() {this.setSize(488, 500);// 设置界面的标题this.setTitle("拼图 注册");// 设置界面置顶this.setAlwaysOnTop(true);// 设置界面居中this.setLocationRelativeTo(null);// 设置游戏的关闭模式// 虚拟机会随之关闭// 3：关闭的模式之一 意思为：关闭任何一个窗体，虚拟机就会停止// 本游戏中的三个模式不会同时出翔，所有使用模式3即可this.setDefaultCloseOperation(3);// 让界面显示，建议写在最后this.setVisible(true);}
}

import com.lkbhua.ui.GameJFrame;
import com.lkbhua.ui.LoginJFrame;
import com.lkbhua.ui.RegisterJFrame;public class App {public static void main(String[] args) {// 表示程序的启动入口// 如果我们想要开启一个界面，就创建谁的对象new LoginJFrame();new RegisterJFrame();new GameJFrame();}
}

声明：

以上均来源于B站@ITheima的教学内容！！！

本人跟着视频内容学习，整理知识引用