Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 778|回复: 0

[Swing学习]跟我学Java Swing之游戏设计

[复制链接]
  • TA的每日心情
    开心
    2021-3-12 23:18
  • 签到天数: 2 天

    [LV.1]初来乍到

    发表于 2014-10-29 23:55:50 | 显示全部楼层 |阅读模式
    谁知道通天的巴比伦塔耗费了多少沙石?又有谁知道罗马的建成经历了多少个日夜?我们惟一知道的是,没有一块块砖石的垒砌,就没有蜿蜒万里的长城;没有巨石和黏土的堆集,就没有亘古不变的金字塔。由此可见,基础知识的准备对于我们学习任何事物都至关重要,那么,就让我们从认识Swing的一些基础功能开始,启动我们建造罗马的伟大工程吧!  前言 java咖啡馆已经开张不少时日了,如果你已经喜欢上了Java这杯咖啡的味道,那么记得常来哦。这一次,我们为大家准备了一大杯香浓的咖啡――将以开发一个“连连看”游戏为蓝本,和大家共同学习Java中Swing的用法,当你细心品味这杯咖啡后,你会发现,不但Java这杯咖啡还别有一番风味,而且还学会了专业游戏的开发方法,真是两全其美!

      
      
       
       
       

       
      
    为了让大家先睹为快,下图便是游戏的截图。大家可以下载游戏试玩(下载游戏程序下载源文件),然后在命令行方式下使用java -jar kyodai.jar来运行。此外,还可以到我的主页http://www.ismyway.com上下载这个游戏的单机版以及手机版进行试玩(见图1)。  
      
      
       Java咖啡馆以前介绍过AWT的知识,那么Swing和AWT究竟有什么区别呢?学习Java的人都可能听到或看到过重量级控件和轻量级控件这个字眼,AWT就是我们通常所指的重量级控件,Swing则是轻量级控件。我们都知道Java的口号是“一次编写,到处运行”,这也就要求在我们的程序中,尽量使用纯Java的代码。很不幸的是,AWT依赖与本地平台的接口,因此,在不同的操作系统上,使用AWT制作的界面看起来可能会有些细微区别。Swing则完全不同了,Swing是用纯Java编写的,因此,使用Swing编写的界面能保证在所有平台上有着同样的外观。这里还有一个窍门:在JDK中,为便于区别,所有Swing控件都以大写字母J开头,比如说JButton(AWT 中对应的是Button),这样你就很容易区分Swing控件和AWT控件了。 Swing初体验 对于想学习Swing编程的朋友,我们特地为大家准备了一些小窍门。首先,下载并阅读代码是极有必要的。由于这是一篇关于Swing的教程,所以,我们只是尽可能讲解一些与Swing有关的内容,与Swing无关的内容一般不会涉及,例如算法部分。其次,受篇幅限制,也不可能在这里将每部分代码都写得完完整整的,所以,大家也需要对照完整代码来看。最后,为了使大家更容易把精力集中在Swing学习上,我们也将游戏开发中所需资源放在下载文件中,大家下载后便能够编译运行,看到执行结果。 1.顶层容器 什么是顶层容器?当我们使用Java进行图形编程的时候,图在哪里绘制呢?我们需要一个能够提供图形绘制的容器,这个容器就被称为顶层容器,你也可以把它想象成一个窗口。顶层容器是进行图形编程的基础,一切图形化的东西,都必然包括在顶层容器中。在Swing中,我们有三种可以使用的顶层容器,它们分别是: ・JFrame:用来设计类似于Windows系统中的窗口形式的应用程序。  ・JDialog:和JFrame类似,只不过JDialog是用来设计对话框。  ・JApplet:用来设计可以在嵌入在网页中的Java小程序。  如果需要使用Swing制作一个窗口类程序,我们的代码看起来应该是这样:
    1. import javax.swing.*;
    2. public class KyodaiUI
    3. extends JFrame {
    4. ……
    5. }
    复制代码
    2.控件 控件是构成应用程序界面的基本元素,按钮、文本框、进度条等,这些都是控件。控件(这里我们只讨论可视化控件)又可以分为容器控件和非容器控件。从字面意义上来理解,容器控件就是能包含其他控件的特殊控件,例如,Java中的JPanel控件就属于容器型控件,我们可以在JPanel中放置按钮、文本框等非容器控件,你甚至可以在JPanel中再放置若干个JPanel控件(值得注意的是,顶层容器也是容器型控件,每一个窗口应用程序中有且只能有一个顶层容器控件,换句话说,顶层容器不能包括在其他的控件中)。 Java中的容器控件有很多,除刚才提到的JPanel外,还有JTabbedPane、JScrollPane等,非容器控件有JButton、JLabel、JTextField等。如果你需要向某个容器型的控件中添加控件,你可以使用 add(Component comp) 方法来实现,如:
    1. JPanel panel = new JPanel();
    2. JButton button = new JButton();
    3. panel.add(button);
    复制代码
    3.布局 什么是布局?布局是Java中用来控制控件排列位置的一种界面管理系统。使用过其他可视化编程开发语言的人在初次接触Java界面设计时,总会感觉到Java界面设计很别扭:居然没有提供所见即所得的设置控件坐标的方法!然而,事实证明,Java本身提供的布局管理系统也一样能够出色地完成我们的需要,而且在跨平台时表现得更有优势。 常用的布局有: ・BorderLayout:将界面分割为上下左右以及中间一块区域的管理系统,在BorderLayout布局中,最多你只能放5个控件,如果超过5个控件,建议还是选用其他的布局系统吧。  ・GridLayout:GridLayout是将用户界面切割为棋盘一样的布局管理系统。如果我们要设计一个类似于Windows中自带的计算器软件,GridLayout无疑是最佳选择。  ・FlowLayout:FlowLayout与上述两类布局管理系统不太一样,在FlowLayout中,你不必指定每个控件放在哪,你只需要把控件加入到FlowLayout中,FlowLayout就会根据你添加控件的顺序依次放置控件,如果空间不够,会自动换行。 在对这几个布局管理系统有了基本认识后,我们就一起来进入界面设计吧。在仔细观察了QQ游戏中“连连看”的设定后,我们可以发现,整个界面分为三个区,顶部是系统菜单区,占地面积最大的是用户游戏区,另外还有一个用户交互区,每个区域中都由若干控件组成。 这么多控件,我们从哪开始入手呢?由于容器控件中可以放置其他控件,因此,我们只需要先确定放置的容器控件就可以了。 既然已经知道需要使用容器控件的个数,接下来让我们就进入布局管理系统的选择。用GridLayout?似乎有点勉强,用FlowLayout?还有更好的选择吗?对了,我想你一定想到了是BorderLayout吧,如下图2所示。  
      
      
       动手之前,大家一定要注意的是,界面的设计要先考虑好尺寸,不管是主程序界面的大小还是每个区域的大小,如果没有设计好合适的尺寸,将来改动起来会十分痛苦。 下面便是相应的源程序:
    1. import java.awt.*;
    2. import javax.swing.*;
    3. public class KyodaiUI extends JFrame {
    4. public KyodaiUI() {
    5. this.setSize(780, 500); //将窗体的大小设定为780*500
    6. this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    7. this.setResizable(false); //窗体不能改变大小
    8. this.setTitle("连连看"); //设置标题
    9. JPanel toolBar = new JPanel();
    10. toolBar.setBackground(Color.white);
    11. toolBar.setPreferredSize(new Dimension(780, 48));
    12. JPanel actionPanel = new JPanel(); //新建JPanel型的控件
    13. actionPanel.setBackground(Color.yellow); //设置背景色
    14. actionPanel.setPreferredSize(new Dimension(160, 380)); //设置大小
    15. JPanel contentPanel = new JPanel();
    16. contentPanel.setBackground(Color.blue);
    17. contentPanel.setPreferredSize(new Dimension(620, 380));
    18. this.getContentPane().add(toolBar, BorderLayout.NORTH);
    19. this.getContentPane().add(actionPanel, BorderLayout.EAST);
    20. this.getContentPane().add(contentPanel, BorderLayout.CENTER);
    21. }
    22. public static void main(String[] args) throws HeadlessException {
    23. KyodaiUI kyodaiUI = new KyodaiUI();
    24. kyodaiUI.show();
    25. }
    26. }
    复制代码
    让我们来看看上面这段程序是如何运行的。首先,extends JFrame表明了这是从JFrame中继承过来的,JFrame是最基本的顶层容器控件。实际上,在JDK中,以字母J打头的控件都是Swing控件。然后设置了容器的属性,其中,setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)是用来告诉Java虚拟机,当用户点击窗体右上角的“关闭”按钮时,关闭该窗口进程。如果不这么做的话,你会发现虽然你可以点将窗口关闭,然而程序却没有退出。在接下来的代码中,我们为顶层容器添加了三个Panel容器。要注意的是,在AWT中,我们可以直接写为add(toolBar, BorderLayout.NORTH) ,而在 Swing 中却一定要写成getContentPane(). add(toolBar, BorderLayout.NORTH) ,否则程序就会出错。 现在大家可以放在编译运行看看,是不是和我的运行结果一样(见图3)?  
      
      
       4.边框 虽然我们使用了不同前景色来区别不同的区域,然而却没有层次感,加上边框一定会漂亮许多。 在Java中,所有以J打头的Swing控件都可以使用setBorder方法来为自己设置边框。边框有很多种,线型、凸起、凹下、空的,你甚至可以自由组合形成个人风格。所有的Border都必须使用javax.swing.BorderFactory中提供的静态方法来创建,比如:
    1. Border border = BorderFactory.createBevelBorder(BevelBorder.LOWERED,
    2. new Color(45, 92, 162),
    3. new Color(43, 66, 97),
    4. new Color(45, 92, 162),
    5. new Color(84, 123, 200));
    复制代码
    现在,我们将toolBar.setBackground(Color.white)改为toolBar.setBorder(border),立体效果是不是已经出现了? 实战――写上自己的大名 现在我们已经有了一个能够运行的界面了,虽然它什么也做不了,但是请你别慌,罗马不是一天建成的。 现在让我们在菜单区提供一个“关于”菜单,用来显示程序的信息,难道你不想让别人知道你的大名吗?Swing本身就提供了现成的按钮控件JButton,我们只需要创建一个新的按钮:JButton about = new JButton("关于");这个按钮该怎么放到菜单区而不是别的地方呢?我们可以加入下面的代码:toolBar.add(about);咦,怎么点按钮没有反应?这是因为你还没有告诉程序点击按钮时要做什么事情呢。要为按钮添加事件响应,首先需要使用about.addActionListener(this)来告诉程序监听按钮按下时的事件,由于ActionListener是一个程序接口,因此,我们在类的申明的地方也得做一点小小的修改:public class KyodaiUI extends JFrame implements ActionListener {...}实现ActionListener接口是为了告诉程序我要进行事件处理了。当然,最后我们得添加响应事件的代码:
    1. public void actionPerformed(ActionEvent e) {
    2. if (e.getSource() == about) {
    3. JOptionPane.showMessageDialog(this, "我的大名", "关于",
    4. JOptionPane.INFORMATION_MESSAGE);
    5. return ;
    6. }
    7. }
    复制代码
    其中,e.getSource() 表示当前触发事件的控件,由于我们的程序中往往会有多个以上的控件,这些控件都有可能产生事件,所以我们必须使用这个方法来找到产生事情的控件。 小结 让我们一起来回顾一下今天所学的内容:首先我们了解了顶层容器,也知道了控件分为容器控件和非容器控件,同时还知道使用边框,最后,我们还小小的处理了一下按钮的事件。 学而时习之,不亦说乎,就让我留点小小的作业,帮助大家巩固一下今天所学的内容:上面我们添加的按钮在菜单栏的中间,并不美观,请大家放到左边或右边试试。  下一篇:跟我学Java Swing之游戏设计(2)  
      
      还记得《偷天换日》中精灵般穿梭在好莱坞车流中的Minicooper吗?马克・沃尔伯格和莎莉・赛隆就是驾驶着它在仇人的鼻子底下运走了价值千万的黄金。可是,如果现在将一辆无法奔驰的Minicooper躯壳放在你的面前,你会如何看待它?它还是那个游走自如的精灵吗?今天,就让我们一点一点地为这辆Minicooper组装上零件,让它跑起来。  
      前言
      从本期开始,我们为大家提供完整的游戏源代码(点击下载)。Java咖啡馆倡导大家理论与实践并重,我们在连载中将给大家介绍关键技术以及实现思路,朋友们自行结合文章阅读源代码,好比一边读报一边喝咖啡,这才是滴滴香浓意犹未尽。
      游戏布局
      “连连看”属于一款二维战棋类游戏,要设计棋盘类的游戏,GridLayout应该是不二之选。现在让我们一起来看看GridLayout的构造函数:
      ・GridLayout():默认的情况下,将布局区域划分为1*1的大小
      ・GridLayout(int rows,int cols):指定布局区域横向和纵向的格子数
      ・GridLayout(int rows,int cols,int hgap,int vgap):同上,并且还指定了每个格子之间的横向间距hgap和纵向间距vgap
      千万别让这三个构造函数把你给吓住了,其实只要你喜欢,完全可以放心大胆地使用其中的任何一个,就算不小心用“错”了,以后也有办法进行调整。惟一需要注意的是,GridLayout在添加控件时,默认顺序是从左上方向右下方依次添加的。
      现在让我们来确定游戏的格子数目。究竟多少格子比较合适呢?太少会降低游戏的难度,太多又会造成视觉影响。所以,我们应该通过一对常量来表示,将来即使要修改,也是举手之劳。
      在Java中,常量的定义需要写成public final static的形式,假如我们规定游戏的棋盘在横向有8个格子,纵向也有8个格子,那么,我们应该这样定义:
      
      
    1. public final static int ROW = 8;
    2. public final static int COLUMN = 8;
    复制代码

       
      然后,我们使用GridLayout的第二种构造函数来创建布局:
      
      
    1. GridLayout gridLayout = new GridLayout(ROW, COLUMN);
    复制代码

       
      最后,我们还需要将游戏区(contentPanel)的布局改为上述布局:
      
      
    1. contentPanel.setLayout(gridLayout);
    复制代码

       
      如果你此时编译并运行程序的话,你可能会奇怪:界面怎么没有发生任何改变,是不是哪出错了?虽然我们指定了布局,可是什么控件也没有添加,当然就看不出变化。现在让我们一起在布局上添加按钮吧:
      
      
    1. for (int i = 0; i < ROW * COLUMN; i++) {
    2. JButton button = new JButton("Kyodai");
    3. contentPanel.add(button);
    4. }
    复制代码

       
      再运行程序试试,是不是和我的一样(见图1)?
       
       
      巧用JButton做文章
      JButton是一个按钮控件,它也是Swing中普通得不能再普通的控件了,尽管如此,我们还是需要花费一点功夫来了解和使用它,因为当你能够熟练使用JButton后,你会发现其他的Swing控件也是如此的相似。
      如果你将刚才写好的程序拿来运行,你会发现:游戏区的按钮总是排得满满的,这对实际游戏的操作非常不便,所以,我们得想办法让一部分格子空出来。GridLayout布局什么都好,就是在添加控件的时候不能跳过某一个格子,这下可怎么办呢?
      其实这也不难,既然GridLayout不让跳过,如果我们让某个格子内添加的控件与GridLayout布局的背景融为一体,这样在视觉上就达到了一致的效果。此外,假如别人在无意中点击到这个格子上,按钮仍然就会原形毕露,我们还得想办法让按钮不能被点击,这就需要用到JButton的setEnabled()方法。最后,对于能够点击的按钮,当它们被点击时,我们还得要区分出来究竟是哪一个按钮被点击了。
      在上一次实现“关于”功能的时候,我们使用了e.getSource()方法来判断鼠标点击事件产生的源,然而,那只对已经命名好了的控件比较有效。这里,使用数组表示按钮无疑是最好的方法了,首先让我们将上面的代码修改一下:
      
      
    1. JButton[] dots = new JButton[ROW * COLUMN];
    2. for (int i = 0; i < ROW * COLUMN; i++) {
    3. dots[i] = new JButton("Kyodai");
    4. dots[i].setActionCommand("" + i);
    5. contentPanel.add(dots[i]);
    6. dots[i].addActionListener(this);
    7. }
    复制代码

       
      千万别忘记了在循环体中写上dots = new JButton("Kyodai"),虽然在前面定义、使用了dots组数,然而,这仅仅只是告诉程序我们需要使用一些JButton,但是,这些JButton却依然没有被初始化。同时,我们不仅使用setActionCommand()为按钮制定了事件名称,还使用了addActionListener()方法为每个按钮加上了事件响应处理。
      关于事件响应的代码,我们可以在原来actionPerformed()事件代码的后面添加:
      
      
    1. if (e.getSource() instanceof JButton) {
    2. JButton button = (JButton) e.getSource();
    3. int offset = Integer.parseInt(button.getActionCommand());
    4. int row, col;
    5. row = Math.round(offset / COLUMN);
    6. col = offset - row * COLUMN;
    复制代码
      
    1. JOptionPane.showMessageDialog(this,"ROW="+row+",COL="
    2. + col, "按钮", JOptionPane.INFORMATION_MESSAGE);
    3. }
    复制代码

       
      在上面的代码中,e.getSource() instanceof JButton用来判断产生的事件是否是由JButton型的控件产生的,然后又将产生事件源的控件进行强制型类转换,再使用Integer.parseInt(button.getActionCommand())方法将取得的事件名称转化为整数,后面的代码就将这个整数还原成行和列的信息。
      好了,现在运行程序,然后点击每个按钮,看看是否会出现如右图的对话框?
       
       
      注意哦,我们的下标是从0开始的。
      在Swing中使用图片
      目前我们已经解决了用户操作的问题。为了让界面美观起来,我们需要使用图片来代替文字。有时间和耐心的朋友可以自己做个性图片,只是要注意保持每张图片大小一致,否则就太难看啦。想省事的话也可以直接使用下载包中提供的图片。
      在Swing中,可以使用setIcon(Image image)方法来为JButton设置图片,其中的参数image就是我们要设置的图片对象,这个对象有多种方法可以得到:
      ・使用Toolkit类来获得:
      
      
    1. image = Toolkit.getDefaultToolkit().getImage(url);
    复制代码

       
      ・使用ImageIcon类的getImage()方法来获得:
      
      
    1. image = new ImageIcon(getClass().getResource(filename)).getImage();
    复制代码

       
      我们这里选用第一种方法。为了方便今后再次获得Image对象,我们可以将此写为一个函数:
      
      
    1. Image getImage(String filename){
    2. URLClassLoader urlLoader = (URLClassLoader) this.getClass().getClassLoader();
    3. URL url = null;
    4. Image image = null;
    5. url = urlLoader.findResource(filename);
    6. image = Toolkit.getDefaultToolkit().getImage(url);
    7. return image;
    8. }
    复制代码

       
      有了这个函数之后,以后再要用到图片就方便多了,不是吗?
      图片现在已经有了,那么我们就可以将源代码包中Map.Java中的地图信息用图片的形式表现出来了。由于此段代码是关于游戏的算法代码,因此不再列举代码,在这里大致解释一下具体是怎么做的吧!在Map.Java中,我们使用了二维数组map[][]来保存图片信息,同时,我们也使用了一维数组images[]来保存每一个图片对象,map中的每一个元素都有一个值,这个值不仅表明了在游戏界面中按钮对应的值,也表明了这个按钮使用images[]数组中图片的编号,程序运行界面便漂亮许多。
       
       
      小结
      今天我们介绍了Swing中JButton控件。对于大多数Swing控件来说,JButton的用法一样可以照搬过去。别小看这个JButton,当你能够很好地掌握它的时候,你的Swing功底就已经提升一个台阶了。此外,我们也学会了在Java中加载图片文件的两种方法。最后,我们还将以上的两部分内容结合在一起创造出了漂亮的游戏界面。虽然我没有在这里写出完整的代码,但相信大家参考我的源程序,经过自己的努力,一定能够达到目标。如果遇到解决不了的问题,可以通过leftmoon@163.com信箱与我联系
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-2-26 01:01 , Processed in 0.384697 second(s), 46 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表