Java Swing 拼图小游戏【完整功能+源码】Java Swing 拼图小游戏开发详解一、项目概述拼图游戏是一款

Java Swing 拼图小游戏开发详解

本文将详细介绍如何使用 Java Swing 开发一个经典的拼图小游戏，适合 Java 初学者学习 GUI 编程。（PS：关注公众号【代码师兄】，回复555 ，免费获取！免费获取！免费获取！）

一、项目概述

拼图游戏是一款经典的益智类游戏，玩家需要通过移动拼图块，将打乱的图片恢复成完整的样子。本项目使用 Java Swing 实现了一个 4x4 的拼图游戏，支持多张图片切换，界面简洁美观。

二、技术栈介绍

2.1 核心技术

技术	说明
Java	编程语言，版本建议 JDK 8+
Swing	Java 的 GUI 工具包，用于构建图形界面
AWT	抽象窗口工具包，Swing 的基础

2.2 主要用到的类

JFrame：顶层容器，代表游戏窗口
JPanel：面板容器，用于组织界面布局
JButton：按钮组件，拼图块使用按钮实现
JLabel：标签组件，用于显示原图预览
ImageIcon：用于加载和显示图片
GridLayout：网格布局，实现 4x4 的拼图网格
BorderLayout：边界布局，组织整体界面结构
ActionListener：事件监听接口，处理用户点击事件

三、功能介绍

3.1 核心功能

拼图游戏：4x4 网格的拼图游戏，共 16 个拼图块
图片切换：支持 3 张不同的图片切换
开局功能：随机打乱拼图块，开始新游戏
原图预览：右侧显示完整图片供参考
移动规则：只能移动与空白块相邻的拼图块

3.2 界面布局

+------------------------------------------+
|  初级拼图游戏                             |
+------------------+-----------------------+
|                  |                       |
|   4x4 拼图区域    |      原图预览         |
|                  |                       |
|   +--+--+--+--+  |    +-------------+    |
|   |  |  |  |  |  |    |             |    |
|   +--+--+--+--+  |    |   完整图片   |    |
|   |  |  |  |  |  |    |             |    |
|   +--+--+--+--+  |    +-------------+    |
|   |  |  |  |  |  |                       |
|   +--+--+--+--+  |   +----------------+  |
|   |  |  |  |  |  |   | 开局 | 下一张 |   |
|   +--+--+--+--+  |   +----------------+  |
|                  |                       |
+------------------+-----------------------+

四、项目结构

PuzzleGame/
├── .idea/                    # IDEA 配置文件
├── image/                    # 图片资源目录
│   ├── 000.jpg ~ 033.gif     # 第一张图片的切片（4x4）
│   ├── 100.jpg ~ 133.gif     # 第二张图片的切片（4x4）
│   ├── 201.gif ~ 233.gif     # 第三张图片的切片（4x4）
│   ├── 0model.gif            # 第一张原图
│   ├── 1model.gif            # 第二张原图
│   └── 2model.gif            # 第三张原图
├── out/                      # 编译输出目录
├── src/
│   └── Puzzle/
│       └── StartGame.java    # 主程序代码
└── PuzzleGame.iml            # 模块配置文件

五、核心代码解析

5.1 主类结构

public class StartGame extends JFrame {
    private JLabel modelLabel;      // 显示原图的标签
    private JPanel centerPanel;     // 中间拼图面板
    private JButton emptyButton;    // 空白块按钮引用
    int num = 0;                    // 当前图片编号（0-2）
    
    // ... 省略其他代码
}

5.2 初始化界面

public StartGame() {
    super();
    setTitle("初级拼图游戏");
    setBounds(450, 100, 530, 350);  // 设置窗口位置和大小
    setResizable(false);             // 禁止调整窗口大小
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    
    // 创建顶部面板（放原图和按钮）
    JPanel topPanel = new JPanel();
    topPanel.setLayout(new BorderLayout());
    getContentPane().add(topPanel, BorderLayout.EAST);
    
    // 创建中间面板（4x4 拼图网格）
    centerPanel = new JPanel();
    centerPanel.setLayout(new GridLayout(4, 0));
    getContentPane().add(centerPanel, BorderLayout.CENTER);
    
    // 初始化拼图按钮
    // ...
}

5.3 图片打乱算法

private String[][] reorder() {
    String[][] exactnessOrder = new String[4][4];
    String[][] stochasticOrder = new String[4][4];
    
    // 先按顺序加载图片路径
    for (int row = 0; row < 4; row++) {
        for (int col = 0; col < 4; col++) {
            exactnessOrder[row][col] = "image/" + num + row + col + ".gif";
        }
    }
    
    // 随机打乱
    for (int row = 0; row < 4; row++) {
        for (int col = 0; col < 4; col++) {
            while (stochasticOrder[row][col] == null) {
                int r = (int) (Math.random() * 4);
                int c = (int) (Math.random() * 4);
                if (exactnessOrder[r][c] != null) {
                    stochasticOrder[row][col] = exactnessOrder[r][c];
                    exactnessOrder[r][c] = null;
                }
            }
        }
    }
    return stochasticOrder;
}

5.4 拼图移动逻辑

class ImgButtonAction implements ActionListener {
    public void actionPerformed(ActionEvent e) {
        // 获取空白块位置
        String emptyName = emptyButton.getName();
        char emptyRow = emptyName.charAt(0);
        char emptyCol = emptyName.charAt(1);
        
        // 获取点击的按钮位置
        JButton clickButton = (JButton) e.getSource();
        String clickName = clickButton.getName();
        char clickRow = clickName.charAt(0);
        char clickCol = clickName.charAt(1);
        
        // 判断是否相邻（曼哈顿距离为1）
        if (Math.abs(clickRow - emptyRow) + Math.abs(clickCol - emptyCol) == 1) {
            // 交换图片
            emptyButton.setIcon(clickButton.getIcon());
            clickButton.setIcon(new ImageIcon("image/" + num + "00.gif"));
            emptyButton = clickButton;
        }
    }
}

六、运行效果截图

在这里插入图片描述

6.1 游戏初始界面

游戏启动后，显示 4x4 的拼图区域，右侧是完整图片预览，下方有"开局"和"下一张"按钮。

┌─────────────────────────────────────────┐
│           初级拼图游戏                   │
├──────────────┬──────────────────────────┤
│ ┌──┬──┬──┬──┐│                          │
│ │  │  │  │  ││      [原图预览区域]        │
│ ├──┼──┼──┼──┤│                          │
│ │  │  │  │  ││                          │
│ ├──┼──┼──┼──┤├──────────────────────────┤
│ │  │  │  │  ││      [开局] [下一张]       │
│ ├──┼──┼──┼──┤│                          │
│ │  │  │  │  ││                          │
│ └──┴──┴──┴──┘│                          │
└──────────────┴──────────────────────────┘

6.2 点击"开局"后

拼图块被随机打乱，玩家可以开始游戏。

6.3 游戏进行中

玩家点击与空白块相邻的拼图块，可以移动拼图块。

6.4 切换图片

点击"下一张"按钮可以切换到另一张图片（共3张）。

七、关键技术点总结

7.1 布局管理

使用 BorderLayout 组织整体界面：中间放拼图，东边放预览
使用 GridLayout(4, 4) 实现拼图网格
使用嵌套 JPanel 实现复杂的界面层次

7.2 事件处理

使用 ActionListener 监听按钮点击事件
通过 e.getSource() 获取事件源对象
使用按钮的 name 属性存储位置信息

7.3 图片管理

使用 ImageIcon 加载图片
图片命名规则：{图片编号}{行}{列}.gif
空白块固定使用 00.gif

7.4 游戏算法

打乱算法：随机抽取不重复的位置
移动判断：使用曼哈顿距离判断是否相邻
交换逻辑：交换按钮的图标实现移动效果

八、如何运行项目

8.1 编译运行

# 编译
javac -encoding UTF-8 -d out/production/PuzzleGame src/Puzzle/StartGame.java

# 运行
java -cp out/production/PuzzleGame Puzzle.StartGame

8.2 使用 IDEA 运行

使用 IntelliJ IDEA 打开项目
右键点击 StartGame.java
选择 "Run 'StartGame.main()'"

九、扩展思路

添加计时功能：记录玩家完成拼图的时间
添加步数统计：记录玩家移动的步数
添加胜利判断：检测拼图是否完成
添加难度选择：支持 3x3、5x5 等不同难度
添加音效：移动时播放音效
自定义图片：允许玩家上传自己的图片

十、总结

本项目是一个适合 Java 初学者的练手项目，涵盖了 Swing GUI 编程的基础知识，包括：

窗口创建和布局管理
事件监听和处理
图片加载和显示
基本的游戏逻辑实现

通过这个项目，可以很好地理解 Java GUI 编程的基本概念，为开发更复杂的桌面应用打下基础。

源码获取：可以关注公众号【代码师兄】，回复555 ，免费获取！免费获取！免费获取！

技术交流：如有问题欢迎在评论区留言讨论