一、登录界面

界面功能需求图如下：

接下来我们再做一些准备工作：导入相关图片素材。

将天天酷跑的图片（Image）资源解压到桌面后，（Image文件如下图所示：）

复制到Eclipse中，单击src，直接Ctrl+V。

本文将实现cn.sqc.runday.view这一界面内容。

相关代码如下：

packagecn.sqc.runday.view;importjava.awt.Font;importjava.awt.Graphics;importjava.awt.Image;importjava.awt.event.ActionEvent;importjava.awt.event.ActionListener;importjava.io.File;importjava.io.IOException;importjavax.imageio.ImageIO;importjavax.swing.BorderFactory;importjavax.swing.ImageIcon;importjavax.swing.JButton;importjavax.swing.JFrame;importjavax.swing.JLabel;importjavax.swing.JOptionPane;importjavax.swing.JPanel;importjavax.swing.JPasswordField;importjavax.swing.JTextField;/**
 *
 *@authorHuey
 *@date2020-11-16
 * 登录界面：用户名输入框  密码输入框  登录取消按钮 功能
 *
 */publicclassLoginFrameextendsJFrame{//用户名变量（文本）JLabel userLabel;//用户名输入框（文本输入框）JTextField userField;//密码变量（文本）JLabel userLabel2;//密码输入框（文本输入框）JPasswordField userField2;//登录按钮、取消按钮（按钮）JButton Login,Cancel;publicLoginFrame(){//直接 alt / （无参构造）userLabel =newJLabel("用户名");//设置字体userLabel.setFont(newFont("微软雅黑",Font.BOLD,18));
    userLabel2 =newJLabel("密  码");
    userLabel2.setFont(newFont("微软雅黑",Font.BOLD,18));//布局方式：绝对布局userLabel.setBounds(20,220,100,30);//x位置，y位置，所占显示空间的大小this.add(userLabel);//将用户名这三个字添加到登录界面上，以下同理userLabel2.setBounds(20,280,100,30);this.add(userLabel2);//用户名输入框userField =newJTextField();
    userField.setBounds(80,220,100,30);//设置输入框凹陷效果userField.setBorder(BorderFactory.createLoweredBevelBorder());//设置输入框背景透明userField.setOpaque(false);this.add(userField);

    userField2 =newJPasswordField();
    userField2.setBounds(80,280,100,30);
    userField2.setBorder(BorderFactory.createLoweredBevelBorder());
    userField2.setOpaque(false);this.add(userField2);//登录按钮Login =newJButton("登录");
    Login.setBounds(45,350,60,36);//Login.setBackground(new Color(44,22,44));//背景色//Login.setForeground(Color.BLUE);//前景色//绑定登录按钮的事件监听Login.addActionListener(newActionListener() {//ActionListener alt /@OverridepublicvoidactionPerformed(ActionEvent e){//System.out.println("点击登录按钮");//获取用户名输入框的内容String userName = userField.getText();
        String passWord = userField2.getText();//横杠原因：方法太老了，不推荐用if("Huey".equals(userName) &&"123".equals(passWord)){//登录成功JOptionPane.showMessageDialog(null,"欢迎"+userName+"来到天天酷跑游戏");//跳转到下一界面//关闭当前界面dispose();
        }elseif("".equals(userName) ||"".equals(passWord)){//不能为空JOptionPane.showMessageDialog(null,"用户名 / 密码不能为空，请重新输入！");
        }else{
          JOptionPane.showMessageDialog(null,"用户名 / 密码输入错误，请重新输入！");
        }

      }
    });this.add(Login);//取消按钮Cancel =newJButton("取消");
    Cancel.setBounds(135,350,60,36);this.add(Cancel);
    Cancel.addActionListener(newActionListener() {@OverridepublicvoidactionPerformed(ActionEvent e){// TODO Auto-generated method stubdispose();
      }
    });//创建背景面板，并添加到窗体上去LoginPanel panel =newLoginPanel();this.add(panel);//设置登录界面的基本属性this.setSize(900,530);this.setLocationRelativeTo(null);//位置居中this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);this.setUndecorated(true);//设置窗体的Logo图标this.setIconImage(newImageIcon("Image/115.png").getImage());//存储图片this.setVisible(true);
  }//测试用的main方法       main + Alt /publicstaticvoidmain(String[] args){newLoginFrame();
  }classLoginPanelextendsJPanel{//画板//背景图片变量Image background;//------ctr shift + o 导包publicLoginPanel(){//-----alt / 回车 构造方法    在{后双击,显示作用域//读取图片文件，赋值给background变量try{//-----虽然不大可能，但也做好吃饭噎死的准备background = ImageIO.read(newFile("Image/login.jpg"));//----read参数为File类型}catch(IOException e) {//-------捕获异常信息// 打印异常日志信息e.printStackTrace();
      }
    }//绘制方法@Overridepublicvoidpaint(Graphics g){super.paint(g);//绘制背景图片g.drawImage(background,0,0,900,530,null);//900,530为宽高}
  }

}//throws ......抛异常，将下面的异常向上抛,交给上级：不建议

为了更清楚地看出代码结构，这里给出部分代码的作用域。

LoginFrame作用域一直到最后一个}

LoginPanel的代码块：

运行结果截图：

1.界面

2.登录

2.1、用户名及密码输入为空的情况：

2.2、用户名或密码输入错误的情况：

2.3、用户名及密码输入正确的情况：

单击弹窗中的确定，直接退出。

3.退出

点取消即可

二、开始游戏界面

前文，我们完成了登录界面的搭建。接下来将完成开始游戏界面的搭建，并建立起登录界面与开始游戏界面的桥梁。

实现在输对用户名和密码后即可进入开始游戏界面的功能。

界面功能需求图：

具体要求：

当鼠标移入开始游戏按钮后，按钮将由暗变亮，鼠标移开后，按钮又由亮变暗。

帮助、离开按钮同理。

另外，当点击离开时，需要实现关闭当前界面的效果。

上代码：

packagecn.sqc.runday.view;importjava.awt.Graphics;importjava.awt.Image;importjava.awt.event.MouseEvent;importjava.awt.event.MouseListener;importjava.io.File;importjava.io.IOException;importjavax.imageio.ImageIO;importjavax.swing.ImageIcon;importjavax.swing.JFrame;importjavax.swing.JLabel;importjavax.swing.JOptionPane;importjavax.swing.JPanel;importcn.sqc.runday.controller.WindowFrame;publicclassMainFrameextendsJFrameimplementsMouseListener{//设置窗体的基本属性  大小/**
   *  1.1、设置窗体基本属性大小 居中 边框隐藏 默认关闭按钮 logo图标
    1.2、创建背景面板MainPanel，实现背景图片功能

    2.图片按钮功能
   *///2.1创建开始按钮 帮助按钮 离开按钮 组件JLabel start,help,exit;

  JPanel MainPanel;publicMainFrame(){//无参构造，创建对象。并在main函数中调用//2.2start =newJLabel(newImageIcon("Image/hh1.png"));//ImageIcon:图标start.setBounds(350,320,150,40);
    start.setEnabled(false);//false按钮为灰色start.addMouseListener(this);this.add(start);

    help =newJLabel(newImageIcon("Image/hh2.png"));
    help.setBounds(350,420,150,40);
    help.setEnabled(false);
    help.addMouseListener(this);this.add(help);

    exit =newJLabel(newImageIcon("Image/hh3.png"));
    exit.setBounds(350,520,150,40);
    exit.setEnabled(false);
    exit.addMouseListener(this);this.add(exit);/**1.实现背景图片及窗体属性*/MainPanel panel =newMainPanel();this.add(panel);//设置窗体基本属性大小 居中 边框隐藏 默认关闭按钮 logo图标this.setSize(1200,730);//大小this.setLocationRelativeTo(null);//居中this.setUndecorated(true);//边框隐藏this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//默认关闭this.setIconImage(newImageIcon("Image/115.png").getImage());//logothis.setVisible(true);
  }publicstaticvoidmain(String[] args){newMainFrame();
  }//2、创建背景面板MainPanel，实现背景图片功能classMainPanelextendsJPanel{//创建的MainPanel类，在MainFrame中调用Image background;publicMainPanel(){try{
      background = ImageIO.read(newFile("Image/main.png"));
    }catch(IOException e) {
      e.printStackTrace();
    }
  }@Overridepublicvoidpaint(Graphics g){super.paint(g);
    g.drawImage(background,0,0,1200,730,null);
    }
  }//以下五个方法均为添加 implements MouseListener 后，快捷出来的@OverridepublicvoidmouseClicked(MouseEvent e){//鼠标点击if(e.getSource().equals(start)){//跳转到下一界面newWindowFrame().Start();//关闭当前界面//dispose();}elseif(e.getSource().equals(exit)){
      dispose();
    }elseif(e.getSource().equals(help)){
      JOptionPane.showMessageDialog(null,"有疑问请联系开发者：Huey");
    }

  }@OverridepublicvoidmousePressed(MouseEvent e){// TODO Auto-generated method stub}@OverridepublicvoidmouseReleased(MouseEvent e){// TODO Auto-generated method stub}@OverridepublicvoidmouseEntered(MouseEvent e){// 鼠标移入if(e.getSource().equals(start)){//e指一个事件。e.getSource()获取事件//如果鼠标移入到（start）组件（图片按钮）start.setEnabled(true);
    }elseif(e.getSource().equals(help)){
      help.setEnabled(true);
    }elseif(e.getSource().equals(exit)){
      exit.setEnabled(true);
    }
  }@OverridepublicvoidmouseExited(MouseEvent e){//鼠标移出if(e.getSource().equals(start)){
        start.setEnabled(false);
    }elseif(e.getSource().equals(help)){
      help.setEnabled(false);
    }elseif(e.getSource().equals(exit)){
      exit.setEnabled(false);
    }
  }
}

测试：

先填补上文的缺憾，加上new MainFrame();语句。调用我们刚刚写好的开始游戏界面。

登录界面：

单击确定

完美进入我们写好的登录游戏界面：

现在看开始游戏按钮：

帮助按钮：

点击帮助按钮：

退出按钮：

点击：

大功告成！

三、缓冲加载游戏界面

前文，我们完成了开始游戏界面的搭建。接下来将实现缓冲加载界面的搭建。并搭建与前面俩界面间的桥梁。实现输入正确用户名密码后，进入开始游戏界面，点击开始游戏按钮后，进入缓冲加载界面的功能。

界面示意图：

具体要求：

缓存加载界面：背景图片、进度条

动态加载过程。（线程）

我们想要实现动态的缓冲加载过程，让进度条动起来，就需要引入线程的概念了。

线程：

Thread类中这样定义:

线程是程序中执行的线程,Java虚拟机允许程序同时运行多个执行线程。

举个例子，你用百度网盘下载一部电影，这就是一个线程。而如果你同时下载多部电影，这就是多线程了。

1.线程有6种状态:新建，运行，阻塞，等待，计时等待和终止。

新建：当使用new操作符创建新线程时，线程处于新建状态。运行(可运行)：调用start()方法。阻塞：当线程需要获得对象的内置锁，而该锁正在被其他线程拥有。等待：当线程等待其他线程通知调度表可以运行时。计时等待：对于一些含有时间参数的方法，如Thread类的sleep() 。终止：当run()方法运行完毕或出现异常时。

2.创建线程的两种方式：

1、实现Runnable

2、实现Thread类

直接上代码：

packagecn.sqc.runday.controller;importjava.awt.BorderLayout;importjava.awt.Color;importjavax.swing.ImageIcon;importjavax.swing.JFrame;importjavax.swing.JLabel;importjavax.swing.JProgressBar;/**
 *
 *@authorHuey
 *@date2020-11-18
 * 缓存加载界面:背景图片、进度条
 * 动态加载过程。（线程）
 *
 */publicclassWindowFrameextendsJFrameimplementsRunnable{
  JLabel background;//进度条JProgressBar jdt;//创建一个线程并启动publicvoidStart(){
    WindowFrame frame =newWindowFrame();
    Thread t =newThread(frame);//t代表线程//启动线程t.start();
    dispose();
  }publicWindowFrame(){
    background =newJLabel(newImageIcon("Image/hbg.jpg"));this.add(BorderLayout.NORTH,background);//放在窗口上面jdt =newJProgressBar();
    jdt.setStringPainted(true);//加载以字符串形式呈现出来。0%jdt.setBackground(Color.ORANGE);this.add(BorderLayout.SOUTH,jdt);//大小 568 * 340this.setSize(568,340);this.setLocationRelativeTo(null);this.setDefaultCloseOperation(3);this.setUndecorated(true);this.setIconImage(newImageIcon("Image/115.png").getImage());this.setVisible(true);
  }publicstaticvoidmain(String[] args){newWindowFrame().Start();
  }@Overridepublicvoidrun(){//启动线程后，线程具体执行的内容int[] values = {0,1,3,10,23,32,40,47,55,66,76,86,89,95,99,99,99,100};for(inti=0; i加载界面代码敲完，现在开始造桥。

现在，我们从第一个登录界面开始测试。

点击开始游戏：

非静止画面……

成功实现！

四、游戏主界面

接上文，接下来将实现游戏主界面，功能如下:

移动的背景图片、动态的玩家、玩家的移动功能、五种障碍物持续出现、玩家和障碍物的碰撞、暂停、继续功能。

首先，看一下整体效果：

动图实在太大，几秒钟的 Gif 就十几兆了。无奈，图片展示效果。

跳跃、得分、下落、障碍物:

碰到障碍物后，玩家被推着走。

转载：https://mp.weixin.qq.com/s/VchC9FObicON0q80zX_jdg