一、登錄界面

界面功能需求圖如下：

接下來我們再做一些準備工作：導入相關圖片素材。

將天天酷跑的圖片(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.退出

點“取消”即可

二、開始游戲界面

前文，我們完成了登錄界面的搭建。接下來將完成開始游戲界面的搭建，并建立起登錄界面與開始游戲界面的橋梁。

實現在輸對用戶名和密碼后即可進入開始游戲界面的功能。

界面功能需求圖：

具體要求：

當鼠標移入開始游戲按鈕后，按鈕將由暗變亮，鼠標移開后，按鈕又由亮變暗。

幫助、離開按鈕同理。

另外，當點擊離開時，需要實現關閉當前界面的效果。

上代碼：

package?cn.sqc.runday.view;import?java.awt.Graphics;import?java.awt.Image;import?java.awt.event.MouseEvent;import?java.awt.event.MouseListener;import?java.io.File;import?java.io.IOException;import?javax.imageio.ImageIO;import?javax.swing.ImageIcon;import?javax.swing.JFrame;import?javax.swing.JLabel;import?javax.swing.JOptionPane;import?javax.swing.JPanel;import?cn.sqc.runday.controller.WindowFrame;public?class?MainFrame?extends?JFrame?implements?MouseListener?{??//設置窗體的基本屬性??大小??/**???*??1.1、設置窗體基本屬性大小?居中?邊框隱藏?默認關閉按鈕?logo圖標????1.2、創建背景面板MainPanel，實現背景圖片功能????2.圖片按鈕功能???*/??//2.1創建開始按鈕?幫助按鈕?離開按鈕?組件??JLabel?start,help,exit;??JPanel?MainPanel;??public?MainFrame()?{//無參構造，創建對象。并在main函數中調用????//2.2????start?=?new?JLabel(new?ImageIcon("Image/hh1.png"));//ImageIcon:圖標????start.setBounds(350,320,150,40);????start.setEnabled(false);//false按鈕為灰色????start.addMouseListener(this);????this.add(start);????help?=?new?JLabel(new?ImageIcon("Image/hh2.png"));????help.setBounds(350,420,150,40);????help.setEnabled(false);????help.addMouseListener(this);????this.add(help);????exit?=?new?JLabel(new?ImageIcon("Image/hh3.png"));????exit.setBounds(350,?520,?150,?40);????exit.setEnabled(false);????exit.addMouseListener(this);????this.add(exit);????/**1.實現背景圖片及窗體屬性*/????MainPanel?panel?=?new?MainPanel();????this.add(panel);????//設置窗體基本屬性大小?居中?邊框隱藏?默認關閉按鈕?logo圖標????this.setSize(1200,730);//大小????this.setLocationRelativeTo(null);//居中????this.setUndecorated(true);//邊框隱藏????this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//默認關閉????this.setIconImage(new?ImageIcon("Image/115.png").getImage());//logo????this.setVisible(true);??}??public?static?void?main(String[]?args)?{????new?MainFrame();??}??//2、創建背景面板MainPanel，實現背景圖片功能??class?MainPanel?extends?JPanel{//創建的MainPanel類，在MainFrame中調用??Image?background;??public?MainPanel()?{????try?{??????background?=?ImageIO.read(new?File("Image/main.png"));????}?catch?(IOException?e)?{??????e.printStackTrace();????}??}??@Override??public?void?paint(Graphics?g)?{????super.paint(g);????g.drawImage(background,?0,?0,1200,730,?null);????}??}//以下五個方法均為添加?implements?MouseListener?后，快捷出來的??@Override??public?void?mouseClicked(MouseEvent?e)?{????//鼠標點擊????if(e.getSource().equals(start)){??????//跳轉到下一界面??????new?WindowFrame().Start();??????//關閉當前界面????????//dispose();????}else?if(e.getSource().equals(exit)){??????dispose();????}else?if(e.getSource().equals(help)){??????JOptionPane.showMessageDialog(null,?"有疑問請聯系開發者：Huey");????}??}??@Override??public?void?mousePressed(MouseEvent?e)?{????//?TODO?Auto-generated?method?stub??}??@Override??public?void?mouseReleased(MouseEvent?e)?{????//?TODO?Auto-generated?method?stub??}??@Override??public?void?mouseEntered(MouseEvent?e)?{????//?鼠標移入????if(e.getSource().equals(start)){//e指一個事件。e.getSource()獲取事件??????//如果鼠標移入到(start)組件(圖片按鈕)??????start.setEnabled(true);????}else?if(e.getSource().equals(help)){??????help.setEnabled(true);????}else?if(e.getSource().equals(exit)){??????exit.setEnabled(true);????}??}??@Override??public?void?mouseExited(MouseEvent?e)?{????//鼠標移出??????if(e.getSource().equals(start)){????????start.setEnabled(false);????}else?if(e.getSource().equals(help)){??????help.setEnabled(false);????}else?if(e.getSource().equals(exit)){??????exit.setEnabled(false);????}??}}

測試：

先填補上文的缺憾，加上new MainFrame();語句。調用我們剛剛寫好的開始游戲界面。

登錄界面：

單擊確定

完美進入我們寫好的登錄游戲界面：

現在看開始游戲按鈕：

幫助按鈕：

點擊幫助按鈕：

退出按鈕：

點擊：

大功告成！

三、緩沖加載游戲界面

前文，我們完成了開始游戲界面的搭建。接下來將實現緩沖加載界面的搭建。并搭建與前面倆界面間的橋梁。實現輸入正確用戶名密碼后，進入開始游戲界面，點擊開始游戲按鈕后，進入緩沖加載界面的功能。

界面示意圖：

具體要求：

緩存加載界面：背景圖片、進度條

動態加載過程。(線程)

我們想要實現動態的緩沖加載過程，讓進度條動起來，就需要引入線程的概念了。

線程：

Thread類中這樣定義:

線程是程序中執行的線程,Java虛擬機允許程序同時運行多個執行線程。

舉個例子，你用百度網盤下載一部電影，這就是一個線程。而如果你同時下載多部電影，這就是多線程了。

1.線程有6種狀態:新建，運行，阻塞，等待，計時等待和終止。

• 新建：當使用new操作符創建新線程時，線程處于“新建”狀態。
• 運行(可運行)：調用start()方法。
• 阻塞：當線程需要獲得對象的內置鎖，而該鎖正在被其他線程擁有。
• 等待：當線程等待其他線程通知調度表可以運行時。
• 計時等待：對于一些含有時間參數的方法，如Thread類的sleep() 。
• 終止：當run()方法運行完畢或出現異常時。

2.創建線程的兩種方式：

1、實現Runnable

2、實現Thread類

直接上代碼：

package?cn.sqc.runday.controller;import?java.awt.BorderLayout;import?java.awt.Color;import?javax.swing.ImageIcon;import?javax.swing.JFrame;import?javax.swing.JLabel;import?javax.swing.JProgressBar;/**?*?*?@author?Huey?*?@date?2020-11-18?*?緩存加載界面:背景圖片、進度條?*?動態加載過程。(線程)?*?*/public?class?WindowFrame?extends?JFrame?implements?Runnable{??JLabel?background;??//進度條??JProgressBar?jdt;??//創建一個線程并啟動??public?void?Start(){????WindowFrame?frame?=?new?WindowFrame();????Thread?t?=?new?Thread(frame);//t代表線程????//啟動線程????t.start();????dispose();??}??public?WindowFrame()?{????background?=?new?JLabel(new?ImageIcon("Image/hbg.jpg"));????this.add(BorderLayout.NORTH,background);//放在窗口上面????jdt?=?new?JProgressBar();????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(new?ImageIcon("Image/115.png").getImage());????this.setVisible(true);??}??public?static?void?main(String[]?args)?{????new?WindowFrame().Start();??}??@Override??public?void?run()?{????//啟動線程后，線程具體執行的內容????int?[]?values?=?{0,1,3,10,23,32,40,47,55,66,76,86,89,95,99,99,99,100};????for(int?i=0;?i

加載界面代碼敲完，現在開始造橋。

現在，我們從第一個登錄界面開始測試。

點擊開始游戲：

非靜止畫面……

成功實現！

四、游戲主界面

接上文，接下來將實現游戲主界面，功能如下:

移動的背景圖片、動態的玩家、玩家的移動功能、五種障礙物持續出現、玩家和障礙物的碰撞、暫停、繼續功能。

首先，看一下整體效果：

動圖實在太大，幾秒鐘的 Gif 就十幾兆了。無奈，圖片展示效果。

跳躍、得分、下落、障礙物:

碰到障礙物后，玩家被推著走。

轉載：https://mp.weixin.qq.com/s/VchC9FObicON0q80zX_jdg

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的element 密码输入框用*显示_用 Java 实现天天酷跑，这个真的有点强了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。