Java界面开发(以五子棋为例)

        界面开发是软件开发中的一项重要工作,且界面可以作为计算机用户和计算机系统交互的接口,我们以画一个五子棋界面为例,给出具体的开发过程和相关代码。整篇文章分成两个部分,第一部分介绍五子棋界面的绘制;第二部分介绍一些界面上常用的组件。

Let's Go:

Java界面开发(以五子棋为例)_第1张图片

 

        假设说我们是一个刚入门的小白,对 JAVA 并不熟悉,但是又想开发一个五子棋程序,那只需要抓住核心部分代码 即可,首先 new 一个 class,我们把他命名为 FiveChessUI:

import java.awt.FlowLayout;
import java.awt.Graphics;
import javax.swing.JFrame;


public class FiveChessUI implements Config{
		
	public static void main(String[] args) {
		new FiveChessUI().initUI();		
	}
	
    public void initUI() {
    	MyFrame jf=new MyFrame();
    	jf.setSize(2*X0+SIZE*(LINE-1),Y0+X0+SIZE*(LINE-1));  //设置尺寸
    	jf.setTitle("五子棋-创意画板");  //设置标题
    	jf.setLocationRelativeTo(null);  //设置居中
    	jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  //设置关闭进程
    	FlowLayout flow = new FlowLayout();  //布局方式为流式布局
		jf.setLayout(flow);
		jf.setVisible(true);  //设置窗体可见
		
		//this 表示当前类的对象
		Graphics gr=jf.getGraphics();
		System.out.println("gr = "+gr);
		
		DrawQZ mouse=new DrawQZ();
		jf.addMouseListener(mouse);

		mouse.g = gr;
		jf.css=mouse.css;
    }
    
}

        在上述代码中,我们注意到 implements 了一个接口 Config,其主要目的是为了实现软编码,通俗的说,就是为了方便修改代码中的相关参数,例如:需要修改五子棋棋盘的大小,棋盘的起始位置,棋子的大小时,都可以在 Config 类中修改,Config 类中的代码如下:

public interface Config {
    public static final int X0=50;
    public static final int Y0=100;
    public static final int SIZE=50;
    public static final int LINE=15;
    public static final int CHESS=50;
}

        有了这个 Config 类,如果需要修改相关参数就变得容易了很多,不必到涉及该参数的每一个类中去修改。

        为了后期能够在棋盘上相应位置点击就能下棋子,即在点击处画一个黑色或者白色的实心圆,我们需要加一个监听器类:

import java.awt.Graphics;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;

public class DrawQZ extends MouseAdapter implements Config{
	public Graphics g = null;
	public int count = 0;
	public QiZi[] css = new QiZi[LINE*LINE];
	public int index,m,n;
	public String name = "";
	boolean flag = true;
	
	public void mouseReleased(MouseEvent e) {
		int x = e.getX();
		int y = e.getY();
		
		if(count%2 == 1) {
			name = "黑子";
		}
		else {
			name = "白子";
		}

		if ((x > (X0 - SIZE / 2)) && (x < (X0 - SIZE / 2 + SIZE * LINE)) &&
                (y > (Y0 - SIZE / 2)) && (y < (Y0 - SIZE / 2 + SIZE * LINE))) {
            m = (x - X0 + SIZE / 2) / SIZE;
            n = (y - Y0 + SIZE / 2) / SIZE;

			QiZi qz = new QiZi();
		    qz.name = name;
		    qz.x = m*SIZE + X0 - SIZE/2;
		    qz.y = n*SIZE + Y0 - SIZE/2;
		    css[index++] = qz;
		    qz.drawqz(g);		    
		    count++;
			
		}else {
			System.out.println("点击超出范围");
		}
		
	}		
}

        在上述监听器类中,通过 getX 和 getY 获得鼠标点击位置的坐标,并用 count 来计数,如 count 为奇数时,下黑子,count 为偶数时,下白子;

        由于在下棋过程中,点击位置可能不在棋盘线的交点处,因此需要对点击位置做处理,使棋子落到合适的位置上;

        同时,在五子棋界面改变大小或者最小化时,由于会重新调用 paint 函数,即重绘,我们希望棋子和棋盘在重绘之后仍然原封不动显示在界面上,那么需要把棋谱每一条线的参数和棋子的位置记录下来,因此创建了一个数组 css ,把棋子的颜色颜色位置都记录下来,并重写 paint 函数:

import java.awt.Graphics;
import javax.swing.JFrame;

public class MyFrame extends JFrame implements Config{
	
	public QiZi[] css;
	
	public void paint(Graphics gr) {
		super.paint(gr);
		drawChessTable(gr);
		
		System.out.println("size = "+css.length);
		    for(int i=0;i

        到目前为止,看似一切都写的差不多了,但还缺少一个重要的部分,我们在上面代码中多次提到了 drawqz 函数,但该函数我们还没有具体写明:

import java.awt.Color;
import java.awt.Graphics;

public class QiZi implements Config{
    public int x,y;
    public String name="";
    
    public void drawqz(Graphics gr) {	
    
        switch(name) {
    	
    	    case"黑子":    	    	
    		    gr.setColor(Color.BLACK);
    		    gr.fillOval(x, y, CHESS, CHESS);
    		    break;
    	
    	    case"白子":
    		    gr.setColor(Color.WHITE);
    		    gr.fillOval(x, y, CHESS, CHESS);
    		    break;
        }
    }    
}

        把上述代码放在一个包下运行后的效果如下图:

Java界面开发(以五子棋为例)_第2张图片

        一个五子棋的界面就做好啦,当然,如果要真正想实现完善五子棋这个小游戏,还需加上输赢判断,悔棋,人机模式等功能,这些功能会在下一篇文章具体描述,下面介绍几个界面中常用的组件: 

Java界面开发(以五子棋为例)_第3张图片

        简简单单一个空白界面看上去显得有点单调,且无法实现需要的功能,当在开发其他功能的界面时,可能需要用到一些组件,例如,加几个按钮,代码如下:

    private void addButton(MyFrame jf, ActionListener al) {

        String[] btnstrs = new String[]{"开始游戏","重新开始","认输结束","悔棋一步",
                "  模式  ","人人对战","人机对战","  颜色  ","我要黑棋","我要白棋",
        "  顺序  ","黑棋先行","白棋先行"};
        for (int i = 0; i < btnstrs.length; i++){
            JButton btn = new JButton(btnstrs[i]);
            Dimension dim = new Dimension(120,40);
            btn.setPreferredSize(dim);
            btn.setFont(new Font("黑体",1,20));
            btn.setBackground(Color.WHITE);
            btn.addActionListener(al);
            jf.add(btn);
        }

    }

        在上述代码中,依次将 btnstrs 数组中相关名字的按钮添加到了界面上,同时设置了按钮的尺寸大小,按钮中的字体类型、大小,以及按钮的背景色,然后,给按钮添加了监听器ActionListener,最重要的是,在最后的最后,一定要把按钮添加到窗体上,即 jf.add(btn); 如果缺少最后这行代码,按钮不会显示出来。

        当然,上述代码创建出来的按钮是一个紧挨着一个的,但如果有强迫症的伙伴看了可能想把按钮之间的距离调大一点,那么,在按钮之间添加一个标签就可以了,代码如下:

JLabel j0 = new JLabel("                        ");
jf.add(j0);

        再进一步,在有的窗体上,如果想创建一个滑块,并且可以实时获得滑块的值,那么可以写如下的代码:

public void creatJSlider(MyFrame jf) {
    	jSlider = new JSlider(0,100);
    	Dimension dm = new Dimension(600,80);  //设置按钮尺寸
    	jSlider.setPreferredSize (dm);
    	jSlider.setFont (new Font ("黑体",1,15));
		jSlider.setMajorTickSpacing(20);
		jSlider.setMinorTickSpacing(5);
		jSlider.setPaintLabels(true);//确定是否在滑块上绘制标签
		jSlider.setPaintTicks(true);//确定是否在滑块上绘制刻度标记
		jSlider.setPaintTrack(true);//确定是否在滑块上绘制滑道
		jSlider.setSnapToTicks(true);//指定为 true,则滑块(及其所表示的值)解析为最靠近用户放置滑块处的刻度标记的值
		jSlider.setOpaque(false);
		jf.add(jSlider);

		jSlider.addChangeListener(new ChangeListener() {
	        @Override
	        public void stateChanged(ChangeEvent e) {
	          System.out.println("当前值: " + jSlider.getValue());
	          p = jSlider.getValue();
	          System.out.println("p= " + p);
	        }
	      });	
		}

        上述代码便可将滑块上的值实时显示出来了。

        在上述的五子棋代码中,我们把所有的按钮等组件,以及需要绘制的图形都放在了一个 JFrame 里,难以管理,那么可以在这个 JFrame 里放几个 JPanel ,把绘图区和按钮放到不同的 jps 里,即把各个功能区分开来:

private JPanel[] addPanel(JFrame jf) {

        JPanel[] jps = new JPanel[2];
        String[] layoustrs = {BorderLayout.CENTER,BorderLayout.EAST};

        imgPanel.setBackground(Color.LIGHT_GRAY);
        jf.add(imgPanel,layoustrs[0]);
        jps[0] = imgPanel;

        Dimension dim = new Dimension(200,0);
        JPanel jp_s = new JPanel();
        jp_s.setBackground(Color.ORANGE);
        jp_s.setPreferredSize(dim);
        jf.add(jp_s,layoustrs[1]);
        jps[1] = jp_s;

        return jps;
    }

Java界面开发(以五子棋为例)_第4张图片

你可能感兴趣的:(java,开发语言,后端)