项目实战之天天酷跑（一）：登录界面

本文摘自：https://blog.csdn.net/qq_45909299/article/details/109727335

项目源码及相关图片资源，已上传至GitHub：https://github.com/HueyM/Projects

首先，写一个需求文档：

一、项目名称：《天天酷跑》（RunDay）

二、功能介绍：
闯关类游戏，玩家登录后，选择进入游戏，通过键盘控制玩家的上下左右移动，来躲避
障碍物和吃金币，玩家躲避的障碍物越多跑酷距离越远，玩家吃的金币越多，得分越高。

三、功能模块：
1、登录界面
用户名（输入框，明文） 密码（输入框，密文） 登录、取消按钮
2、菜单选择界面
开始游戏按钮（图片按钮） 帮助按钮 退出按钮
3、缓冲加载界面
自动加载进度条，加载完毕之后，跳转到下一界面
4、游戏主界面
移动的背景图片、动态的玩家、五种障碍物持续出现、玩家和障碍物的碰撞、
暂停、继续功能、玩家的移动功能
5、结束界面
获取玩家的得分、跑酷距离。继续游戏、返回主菜单的功能。

---

四、开发者：Huey
五、版本号：1.0
六、开发时间：2020.11.16

开发模式：MVC模式

M：Model（数据层），存储的是实体类。
V：View（显示层），存储的是关于界面的类。
Ｃ：Controller（控制层），存储的是相关的逻辑层代码。

企业级项目命名规范：

cn.sqc.runday.view

界面功能需求图如下：

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

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

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

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

相关代码如下：

package cn.sqc.runday.view;

import java.awt.Font;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.BorderFactory;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
import javax.swing.JPasswordField;
import javax.swing.JTextField;

/**
 * 
 * @author Huey
 * @date 2020-11-16
 * 登录界面：用户名输入框  密码输入框  登录取消按钮 功能
 *
 */
public class LoginFrame extends JFrame{
    //用户名变量（文本）
    JLabel userLabel;
    //用户名输入框（文本输入框）
    JTextField userField;
    //密码变量（文本）
    JLabel userLabel2;
    //密码输入框（文本输入框）
    JPasswordField userField2;
    //登录按钮、取消按钮（按钮）
    JButton Login,Cancel;

    public LoginFrame() {//直接 alt / （无参构造）    
        userLabel = new JLabel("用户名");    
        //设置字体
        userLabel.setFont(new Font("微软雅黑",Font.BOLD,18));                
        userLabel2 = new JLabel("密  码");
        userLabel2.setFont(new Font("微软雅黑",Font.BOLD,18));
            
        //布局方式：绝对布局
        userLabel.setBounds(20, 220, 100, 30);//x位置，y位置，所占显示空间的大小
        this.add(userLabel);//将用户名这三个字添加到登录界面上，以下同理
        userLabel2.setBounds(20, 280, 100, 30);
        this.add(userLabel2);

        //用户名输入框
        userField = new JTextField();
        userField.setBounds(80, 220, 100, 30);
        //设置输入框凹陷效果
        userField.setBorder(BorderFactory.createLoweredBevelBorder());
        //设置输入框背景透明
        userField.setOpaque(false);
        this.add(userField);
        
        userField2 = new JPasswordField();
        userField2.setBounds(80, 280, 100, 30);
        userField2.setBorder(BorderFactory.createLoweredBevelBorder());
        userField2.setOpaque(false);
        this.add(userField2);
        
        
        
//登录按钮
        Login = new JButton("登录");
        Login.setBounds(45,350,60,36);
        //Login.setBackground(new Color(44,22,44));//背景色
        //Login.setForeground(Color.BLUE);//前景色        
        //绑定登录按钮的事件监听
        Login.addActionListener(new ActionListener() {//ActionListener alt /
            
            @Override
            public void actionPerformed(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();
                }else if("".equals(userName) || "".equals(passWord)){
                    //不能为空
                    JOptionPane.showMessageDialog(null, "用户名 / 密码不能为空，请重新输入！");
                }else{
                    JOptionPane.showMessageDialog(null, "用户名 / 密码输入错误，请重新输入！");
                }
                
            }
        });
        this.add(Login);
        
//取消按钮
        Cancel = new JButton("取消");
        Cancel.setBounds(135,350,60,36);
        this.add(Cancel);
        Cancel.addActionListener(new ActionListener() {
            
            @Override
            public void actionPerformed(ActionEvent e) {
                // TODO Auto-generated method stub
                dispose();
            }
        });
        

        
        //创建背景面板，并添加到窗体上去
        LoginPanel panel = new LoginPanel();
        this.add(panel);    
        
        //设置登录界面的基本属性
        this.setSize(900,530);
        this.setLocationRelativeTo(null);//位置居中
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setUndecorated(true);
        
        //设置窗体的Logo图标
        this.setIconImage(new ImageIcon("Image/115.png").getImage());//存储图片
        this.setVisible(true);
    }
    
    
    
    //测试用的main方法       main + Alt /
    public static void main(String[] args) {
        new LoginFrame();
    }
    class LoginPanel extends JPanel{//画板
        //背景图片变量
        Image background;//------ctr shift + o 导包
        public LoginPanel() {//-----alt / 回车 构造方法        在{后双击,显示作用域
            //读取图片文件，赋值给background变量
            try {//-----虽然不大可能，但也做好吃饭噎死的准备
                background = ImageIO.read(new File("Image/login.jpg"));//----read参数为File类型
            } catch (IOException e) {//-------捕获异常信息
                // 打印异常日志信息
                e.printStackTrace();
            }
        }
        //绘制方法
        @Override
        public void paint(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.退出

点“取消”即可