界面功能需求图如下：
接下来我们再做一些准备工作：导入相关图片素材。
将天天酷跑的图片（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{
//用户名变量（文本）
JLabeluserLabel;
//用户名输入框（文本输入框）
JTextFielduserField;
//密码变量（文本）
JLabeluserLabel2;
//密码输入框（文本输入框）
JPasswordFielduserField2;
//登录按钮、取消按钮（按钮）
JButtonLogin,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(newColor(44,22,44));//背景色
//Login.setForeground(Color.BLUE);//前景色
//绑定登录按钮的事件监听
Login.addActionListener(newActionListener(){//ActionListeneralt/
@Override
publicvoidactionPerformed(ActionEvente){
//System.out.println("点击登录按钮");
//获取用户名输入框的内容
StringuserName=userField.getText();
StringpassWord=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(){
@Override
publicvoidactionPerformed(ActionEvente){
//TODOAuto-generatedmethodstub
dispose();
}
});
//创建背景面板，并添加到窗体上去
LoginPanelpanel=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{//画板
//背景图片变量
Imagebackground;//------ctrshift o导包
publicLoginPanel(){//-----alt/回车构造方法在{后双击,显示作用域
//读取图片文件，赋值给background变量
try{//-----虽然不大可能，但也做好吃饭噎死的准备
background=ImageIO.read(newFile("Image/login.jpg"));//----read参数为File类型
}catch(IOExceptione){//-------捕获异常信息
//打印异常日志信息
e.printStackTrace();
}
}
//绘制方法
@Override
publicvoidpaint(Graphicsg){
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创建开始按钮帮助按钮离开按钮组件
JLabelstart,help,exit;
JPanelMainPanel;
publicMainFrame(){//无参构造，创建对象。并在main函数中调用
//2.2
start=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.实现背景图片及窗体属性*/
MainPanelpanel=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());//logo
this.setVisible(true);
}
publicstaticvoidmain(String[]args){
newMainFrame();
}
//2、创建背景面板MainPanel，实现背景图片功能
classMainPanelextendsJPanel{//创建的MainPanel类，在MainFrame中调用
Imagebackground;
publicMainPanel(){
try{
background=ImageIO.read(newFile("Image/main.png"));
}catch(IOExceptione){
e.printStackTrace();
}
}
@Override
publicvoidpaint(Graphicsg){
super.paint(g);
g.drawImage(background,0,0,1200,730,null);
}
}
//以下五个方法均为添加implementsMouseListener后，快捷出来的
@Override
publicvoidmouseClicked(MouseEvente){
//鼠标点击
if(e.getSource().equals(start)){
//跳转到下一界面
newWindowFrame().Start();
//关闭当前界面
//dispose();
}elseif(e.getSource().equals(exit)){
dispose();
}elseif(e.getSource().equals(help)){
JOptionPane.showMessageDialog(null,"有疑问请联系开发者：Huey");
}
}
@Override
publicvoidmousePressed(MouseEvente){
//TODOAuto-generatedmethodstub
}
@Override
publicvoidmouseReleased(MouseEvente){
//TODOAuto-generatedmethodstub
}
@Override
publicvoidmouseEntered(MouseEvente){
//鼠标移入
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);
}
}
@Override
publicvoidmouseExited(MouseEvente){
//鼠标移出
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{
JLabelbackground;
//进度条
JProgressBarjdt;
//创建一个线程并启动
publicvoidStart(){
WindowFrameframe=newWindowFrame();
Threadt=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*340
this.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();
}
@Override
publicvoidrun(){
//启动线程后，线程具体执行的内容
int[]values={0,1,3,10,23,32,40,47,55,66,76,86,89,95,99,99,99,100};
for(inti=0;i<values.length;i ){//循环遍历赋值
jdt.setValue(values[i]);
//线程休眠
try{
Thread.sleep(200);
}catch(InterruptedExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}//200毫秒
}
}
}
加载界面代码敲完，现在开始造桥。
现在，我们从第一个登录界面开始测试。
点击开始游戏：
非静止画面……
成功实现！
四、游戏主界面接上文，接下来将实现游戏主界面，功能如下:
移动的背景图片、动态的玩家、玩家的移动功能、五种障碍物持续出现、玩家和障碍物的碰撞、暂停、继续功能。
首先，看一下整体效果：
动图实在太大，几秒钟的 Gif 就十几兆了。无奈，图片展示效果。
跳跃、得分、下落、障碍物:
碰到障碍物后，玩家被推着走。
转载：https://mp.weixin.qq.com/s/VchC9FObicON0q80zX_jdg
