JAVA图形化界面：拼图小游戏

Tip：文章结尾提供完整源码下载

界面展示

代码部分

游戏界面(文件GameJFrame.java)

package ui;

import javax.swing.*;
import javax.swing.border.BevelBorder;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.util.Objects;
import java.util.Random;

public class GameJFrame extends JFrame implements KeyListener, ActionListener {
    public GameJFrame() {
        // 初始化界面
        initJFrame();

        // 初始化菜单
        initJMenuBar();

        // 初始化数据（打乱数据）
        initData();

        // 初始化图片
        initImage();

        // 显示界面
        this.setVisible(true);
    }

    // 记录随机的图片编号
    private int[][] data = new int[4][4];
    // 记录空白方块在二维数组里的位置
    private int x;
    private int y;
    // 定义一个变量存储图片路径
    private String path = "image/avatar/avatar1/";
    // 用来统计步数
    private int step = 0;
    // 创建选项下面的条目对象
    JMenuItem replayItem = new JMenuItem("重新游戏");
    JMenuItem reLoginItem = new JMenuItem("重新登陆");
    JMenuItem closeItem = new JMenuItem("关闭游戏");
    JMenuItem avatar = new JMenuItem("一些头像");
    JMenuItem girl = new JMenuItem("二些美女");
    JMenuItem animal = new JMenuItem("动物朋友");

    JMenuItem accountItem1 = new JMenuItem("赞助作者");
    JMenuItem accountItem2 = new JMenuItem("赞助作者");
    JMenuItem accountItem3 = new JMenuItem("赞助作者");
    JMenuItem accountItem4 = new JMenuItem("赞助作者");
    JMenuItem accountItem5 = new JMenuItem("赞助作者");

    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;
        }

        // 添加数据到二维数组
        for (int i = 0; i < tempArr.length; i++) {
            if (tempArr[i] == 0) {
                x = i / 4;
                y = i % 4;
                data[i / 4][i % 4] = 0;
            } else {
                data[i / 4][i % 4] = tempArr[i];
            }
        }
    }

    // 初始化图片
    private void initImage() {
        // 清空已经有的所有图片
        this.getContentPane().removeAll();

        if (victory()) {
            // 显示胜利图片
            JLabel winJLabel = new JLabel(new ImageIcon("image/win.png"));
            winJLabel.setBounds(203, 203, 197, 73);
            this.getContentPane().add(winJLabel);
        }

        // 显示步数
        JLabel stepCount = new JLabel("步数：" + step);
        stepCount.setBounds(50, 30, 100, 20);
        this.getContentPane().add(stepCount);

        // 显示操作提醒
        JLabel tip = new JLabel("上下左右键操作 A查看完整图片 W一键通关");
        tip.setBounds(170, 605, 250, 20);
        this.getContentPane().add(tip);

        for (int i = 0; i < 4; i++) {
            for (int j = 0; j < 4; j++) {
                int number = data[i][j];
                // 创建一个JLabel的对象（创建一个图片ImageIcon的对象）
                JLabel jLabel = new JLabel(new ImageIcon(path + number + ".jpg"));
                // 指定图片位置
                jLabel.setBounds(j * 105 + 84, i * 105 + 134, 105, 105);
                // 给图片添加边框
                jLabel.setBorder(new BevelBorder(1));
                // 把管理容器添加到页面中
                this.add(jLabel);
            }
        }

        // 添加背景图片
        JLabel background = new JLabel(new ImageIcon("image/background.png"));
        background.setBounds(40, 40, 508, 560);
        this.getContentPane().add(background);

        // 刷新界面
        this.getContentPane().repaint();
    }

    // 初始化菜单
    private void initJMenuBar() {
        // 初始化菜单
        // 创建整个的菜单对象
        JMenuBar jMenuBar = new JMenuBar();

        // 创建菜单上面的两个选项的对象（功能、关于我们）
        JMenu functionJMenu = new JMenu("功能");
        JMenu aboutJMenu = new JMenu("关于我们");

        JMenu changeImage = new JMenu("更换图片");

        // 将每一个选项下面的条目添加到选项当中
        functionJMenu.add(changeImage);
        functionJMenu.add(replayItem);
        functionJMenu.add(reLoginItem);
        functionJMenu.add(closeItem);

        aboutJMenu.add(accountItem1);
        aboutJMenu.add(accountItem2);
        aboutJMenu.add(accountItem3);
        aboutJMenu.add(accountItem4);
        aboutJMenu.add(accountItem5);

        changeImage.add(avatar);
        changeImage.add(girl);
        changeImage.add(animal);

        // 给条目绑定事件
        replayItem.addActionListener(this);
        reLoginItem.addActionListener(this);
        closeItem.addActionListener(this);
        accountItem1.addActionListener(this);
        accountItem2.addActionListener(this);
        accountItem3.addActionListener(this);
        accountItem4.addActionListener(this);
        accountItem5.addActionListener(this);
        avatar.addActionListener(this);
        girl.addActionListener(this);
        animal.addActionListener(this);

        // 将菜单里面的两个选项添加到菜单当中
        jMenuBar.add(functionJMenu);
        jMenuBar.add(aboutJMenu);

        // 给整个界面设置菜单
        this.setJMenuBar(jMenuBar);
    }

    // 初始化界面
    private void initJFrame() {
        // 设置界面的宽高
        this.setSize(603, 690);
        // 设置界面的标题
        this.setTitle("亡灵拼图");
        // 设置界面置顶
        this.setAlwaysOnTop(true);
        // 设置界面屏幕居中
        this.setLocationRelativeTo(null);
        // 设置关闭模式
        this.setDefaultCloseOperation(3);
        // 取消默认的居中放置
        setLayout(null);
        // 给整个界面添加键盘监听事件
        this.addKeyListener(this);
    }

    @Override
    public void keyTyped(KeyEvent e) {

    }

    // 按下不松调用
    @Override
    public void keyPressed(KeyEvent e) {
        // 按着A不松显示完整图片
        int code = e.getKeyCode();
        if (code == 65) {
            this.getContentPane().removeAll();
            JLabel all = new JLabel(new ImageIcon(path + "all.jpg"));
            all.setBounds(84, 134, 420, 420);
            this.getContentPane().add(all);
            // 添加背景图片
            JLabel background = new JLabel(new ImageIcon("image/background.png"));
            background.setBounds(40, 40, 508, 560);
            this.getContentPane().add(background);
            // 显示步数
            JLabel stepCount = new JLabel("步数：" + step);
            stepCount.setBounds(50, 30, 100, 20);
            this.getContentPane().add(stepCount);
            // 刷新界面
            this.getContentPane().repaint();
        }
    }

    @Override
    public void keyReleased(KeyEvent e) {
        int code = e.getKeyCode();
        if (code == 37) {
            // 向左
            if (y == 3) return;
            data[x][y] = data[x][y + 1];
            data[x][y + 1] = 0;
            y++;
            step++;
            initImage();
        } else if (code == 38) {
            // 向上
            if (x == 3) return;
            data[x][y] = data[x + 1][y];
            data[x + 1][y] = 0;
            x++;
            step++;
            initImage();
        } else if (code == 39) {
            // 向右
            if (y == 0) return;
            data[x][y] = data[x][y - 1];
            data[x][y - 1] = 0;
            y--;
            step++;
            initImage();
        } else if (code == 40) {
            // 向下
            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}
            };
            x = 3;
            y = 3;
            step = 99999;
            initImage();
        }
    }

    // 判断是否胜利
    public boolean victory() {
        for (int i = 0; i < data.length; i++) {
            for (int j = 0; j < data[i].length; j++) {
                if (i == data.length - 1 && j == data[i].length - 1) {
                    continue;
                } else if (data[i][j] != i * 4 + j + 1) {
                    return false;
                }
            }
        }
        return true;
    }

    // 菜单栏点击事件
    @Override
    public void actionPerformed(ActionEvent e) {
        // 获取当前被点击的条目对象
        Object obj = e.getSource();
        // 判断点击的是谁
        if (obj == replayItem) {
            // 计步器清零
            step = 0;
            // 重新打乱二维数组
            initData();
            // 重新加载图片
            initImage();
        } else if (obj == reLoginItem) {
            // 关闭当前界面
            this.setVisible(false);
            // 打开登陆界面
            new LoginJFrame();

        } else if (obj == closeItem) {
            System.exit(0);
        } else if (obj == accountItem1 || obj == accountItem2 || obj == accountItem3 || obj == accountItem4 || obj == accountItem5) {
            // 创建一个弹框对象
            JDialog jDialog = new JDialog();
            // 创建一个管理图片的容器对象JLabel
            JLabel jLabel = new JLabel(new ImageIcon("image/money.jpg"));
            // 设置位置与宽高
            jLabel.setBounds(0,0,258,350);
            // 把图片添加到弹框中
            jDialog.getContentPane().add(jLabel);
            // 给弹框设置大小
            jDialog.setSize(344,436);
            // 让弹框置顶
            jDialog.setAlwaysOnTop(true);
            // 弹框居中
            jDialog.setLocationRelativeTo(null);
            // 弹框不关闭无法进行其他操作
            jDialog.setModal(true);
            // 显示弹框
            jDialog.setVisible(true);
        } else if(obj == avatar){
            Random r = new Random();
            int num = r.nextInt(4)+1;
            path = "image/avatar/avatar"+num+"/";
            // 计步器清零
            step = 0;
            // 重新打乱二维数组
            initData();
            // 重新加载图片
            initImage();
        } else if(obj == girl){
            Random r = new Random();
            int num = r.nextInt(2)+1;
            path = "image/girl/girl"+num+"/";
            // 计步器清零
            step = 0;
            // 重新打乱二维数组
            initData();
            // 重新加载图片
            initImage();
        } else if (obj == animal) {
            Random r = new Random();
            int num = r.nextInt(8)+1;
            path = "image/animal/animal"+num+"/";
            // 计步器清零
            step = 0;
            // 重新打乱二维数组
            initData();
            // 重新加载图片
            initImage();
        }
    }
}

登录界面(文件LoginJFrame.java)

package ui;

import domain.User;
import util.CodeUtil;


import javax.swing.*;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.util.ArrayList;

public class LoginJFrame extends JFrame implements MouseListener {

    static ArrayList<User> allUsers = new ArrayList<>();
    static {
        allUsers.add(new User("胖虎","8848"));
        allUsers.add(new User("admin","1234"));
    }


    JButton login = new JButton();
    JButton register = new JButton();

    JTextField username = new JTextField();
    //JTextField password = new JTextField();
    JPasswordField password = new JPasswordField();
    JTextField code = new JTextField();

    //正确的验证码
    JLabel rightCode = new JLabel();


    public LoginJFrame() {
        //初始化界面
        initJFrame();

        //在这个界面中添加内容
        initView();


        //让当前界面显示出来
        this.setVisible(true);
    }

    public void initView() {
        //1. 添加用户名文字
        JLabel usernameText = new JLabel(new ImageIcon("image/login/用户名.png"));
        usernameText.setBounds(116, 135, 47, 17);
        this.getContentPane().add(usernameText);

        //2.添加用户名输入框

        username.setBounds(195, 134, 200, 30);
        this.getContentPane().add(username);

        //3.添加密码文字
        JLabel passwordText = new JLabel(new ImageIcon("image/login/密码.png"));
        passwordText.setBounds(130, 195, 32, 16);
        this.getContentPane().add(passwordText);

        //4.密码输入框
        password.setBounds(195, 195, 200, 30);
        this.getContentPane().add(password);


        //验证码提示
        JLabel codeText = new JLabel(new ImageIcon("image/login/验证码.png"));
        codeText.setBounds(133, 256, 50, 30);
        this.getContentPane().add(codeText);

        //验证码的输入框
        code.setBounds(195, 256, 100, 30);
        this.getContentPane().add(code);


        String codeStr = CodeUtil.getCode();
        //设置内容
        rightCode.setText(codeStr);
        //绑定鼠标事件
        rightCode.addMouseListener(this);
        //位置和宽高
        rightCode.setBounds(300, 256, 50, 30);
        //添加到界面
        this.getContentPane().add(rightCode);

        //5.添加登录按钮
        login.setBounds(123, 310, 128, 47);
        login.setIcon(new ImageIcon("image/login/登录按钮.png"));
        //去除按钮的边框
        login.setBorderPainted(false);
        //去除按钮的背景
        login.setContentAreaFilled(false);
        //给登录按钮绑定鼠标事件
        login.addMouseListener(this);
        this.getContentPane().add(login);

        //6.添加注册按钮
        register.setBounds(256, 310, 128, 47);
        register.setIcon(new ImageIcon("image/login/注册按钮.png"));
        //去除按钮的边框
        register.setBorderPainted(false);
        //去除按钮的背景
        register.setContentAreaFilled(false);
        //给注册按钮绑定鼠标事件
        register.addMouseListener(this);
        this.getContentPane().add(register);


        //7.添加背景图片
        JLabel background = new JLabel(new ImageIcon("image/login/background.png"));
        background.setBounds(0, 0, 470, 390);
        this.getContentPane().add(background);

    }


    public void initJFrame() {
        this.setSize(488, 430);//设置宽高
        this.setTitle("亡灵拼图 登录");//设置标题
        this.setDefaultCloseOperation(3);//设置关闭模式
        this.setLocationRelativeTo(null);//居中
        this.setAlwaysOnTop(true);//置顶
        this.setLayout(null);//取消内部默认布局
    }



    //点击
    @Override
    public void mouseClicked(MouseEvent e) {
        if (e.getSource() == login) {
            System.out.println("点击了登录按钮");
            //获取两个文本输入框中的内容
            String usernameInput = username.getText();
            String passwordInput = password.getText();
            //获取用户输入的验证码
            String codeInput = code.getText();

            //创建一个User对象
            User userInfo = new User(usernameInput, passwordInput);
            System.out.println("用户输入的用户名为" + usernameInput);
            System.out.println("用户输入的密码为" + passwordInput);

            if (codeInput.length() == 0) {
                showJDialog("验证码不能为空");
            } else if (usernameInput.length() == 0 || passwordInput.length() == 0) {
                //校验用户名和密码是否为空
                System.out.println("用户名或者密码为空");

                //调用showJDialog方法并展示弹框
                showJDialog("用户名或者密码为空");


            } else if (!codeInput.equalsIgnoreCase(rightCode.getText())) {
                showJDialog("验证码输入错误");
            } else if (contains(userInfo)) {
                System.out.println("用户名和密码正确可以开始玩游戏了");
                //关闭当前登录界面
                this.setVisible(false);
                //打开游戏的主界面
                //需要把当前登录的用户名传递给游戏界面
                new GameJFrame();
            } else {
                System.out.println("用户名或密码错误");
                showJDialog("用户名或密码错误");
            }
        } else if (e.getSource() == register) {
            showJDialog("   不好意思，还没有写~");
            showJDialog("   用户名：胖虎   密码：8848");
        } else if (e.getSource() == rightCode) {
            System.out.println("更换验证码");
            //获取一个新的验证码
            String code = CodeUtil.getCode();
            rightCode.setText(code);
        }
    }


    public void showJDialog(String content) {
        //创建一个弹框对象
        JDialog jDialog = new JDialog();
        //给弹框设置大小
        jDialog.setSize(200, 150);
        //让弹框置顶
        jDialog.setAlwaysOnTop(true);
        //让弹框居中
        jDialog.setLocationRelativeTo(null);
        //弹框不关闭永远无法操作下面的界面
        jDialog.setModal(true);

        //创建Jlabel对象管理文字并添加到弹框当中
        JLabel warning = new JLabel(content);
        warning.setBounds(0, 0, 200, 150);
        jDialog.getContentPane().add(warning);

        //让弹框展示出来
        jDialog.setVisible(true);
    }

    //按下不松
    @Override
    public void mousePressed(MouseEvent e) {
        if (e.getSource() == login) {
            login.setIcon(new ImageIcon("image/login/登录按下.png"));
        } else if (e.getSource() == register) {
            register.setIcon(new ImageIcon("image/login/注册按下.png"));
        }
    }


    //松开按钮
    @Override
    public void mouseReleased(MouseEvent e) {
        if (e.getSource() == login) {
            login.setIcon(new ImageIcon("image/login/登录按钮.png"));
        } else if (e.getSource() == register) {
            register.setIcon(new ImageIcon("image/login/注册按钮.png"));
        }
    }

    //鼠标划入
    @Override
    public void mouseEntered(MouseEvent e) {

    }

    //鼠标划出
    @Override
    public void mouseExited(MouseEvent e) {

    }

    //判断用户在集合中是否存在
    public boolean contains(User userInput){
        for (int i = 0; i < allUsers.size(); i++) {
            User rightUser = allUsers.get(i);
            if(userInput.getUsername().equals(rightUser.getUsername()) && userInput.getPassword().equals(rightUser.getPassword())){
                //有相同的代表存在，返回true，后面的不需要再比了
                return true;
            }
        }
        //循环结束之后还没有找到就表示不存在
        return false;
    }


}

App.java

import ui.LoginJFrame;

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

源码下载

Jigsaw.zip