java实现中国象棋1：界面的制作

前言

中国象棋的界面主要有三个部分：棋盘，棋子和按钮。棋盘在网上可以找到许多相关的图片，但是棋子和按钮就找不到，或者找到的棋子图片很丑，因此我就自己用PS画了棋子和按钮，有需要的朋友可以加我微信，我会把我的微信号放在文章最后面。注：我们把所有的图片都放在包的下面。例如Package的名字为Chinesechess，那么就在此Package下新建一个名为Chinesechess.image的package，并把图片放入，不然程序将找不到图片。（作者使用的IDE为Eclipse，不同的IDE可能会有不同的引入图片的方法。请大家根据自己所使用的IDE选择合适的方法引入图片）

界面思路

棋盘

棋盘的图片在网上找一张自己觉得好看的就好，直接在百度图片里就可以找到许多种类的棋盘图片。我的思路是用JPanel的Paint方法把图片画到面板上，面板继承JPanel类。代码如下：

// DrawUI.java

public class DrawUI extends JPanel {
	public void initui() {
		// 创建面板
		JFrame jf = new JFrame();
		// 设置面板属性
		jf.setSize(1240, 860);
		jf.setTitle("中国象棋");
		jf.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);// 设置关闭窗体即清除进程
		jf.getContentPane().setBackground(Color.WHITE);// 设置背景颜色为白色
		jf.setLocationRelativeTo(null);// 窗口
		jf.setResizable(false);// 设置窗体不可放缩
		this.setBackground(Color.white);
		jf.add(this);
		jf.setVisible(true);
	}
	
	// 重绘
	public void paint(Graphics g) {
		super.paint(g);
		// 画棋盘
		g.drawImage(new ImageIcon(getClass().getResource("image\\"+"棋盘.jpg")).getImage(), 90, 60, 625, 700, this);
	}
		
	public static void main(String args[]) {
		DrawUI ui = new DrawUI();
		ui.initui();
	}
}

此时界面如下：

棋子

因为我们需要对棋盘上的棋子进行点击操作，只要一个DrawUI类是肯定不够的，所以我们新建一个监听器的类，在这个类里面我们对棋子进行操作。我的思路是建立一个二维数组，每种棋子用一个数字来表示，例如“将”我用数字5表示，“卒”我都用7表示。详细表示为：

接下来我们需要对棋盘的起始点和棋盘的格子的大小进行测量，并自己定义要画的棋子的大小，写在init的接口里。
代码如下：

//init.java

public interface init {
	public int x00 = 70;
	public int x0 = 105;
	public int y0 = 100;
	public int row = 10;
	public int column = 9;
	public int chesssize = 67;
	public int size = 76;
}

// Listener.java

public class Listener extends MouseAdapter implements ActionListener {
	int[][] flag = new int[][]{ { 1, 2, 3, 4, 5, 4, 3, 2, 1 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 6, 0, 0, 0, 0, 0, 6, 0 },
		{ 7, 0, 7, 0, 7, 0, 7, 0, 7 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0 },
		{ 77, 0, 77, 0, 77, 0, 77, 0, 77 }, { 0, 66, 0, 0, 0, 0, 0, 66, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0 },
		{ 11, 22, 33, 44, 55, 44, 33, 22, 11 } }; // 初始化棋盘

    // 将画布传递过来
	public void setG(Graphics g) {
		this.g = g;
	}

	public void setUI(DrawUI ui) {
		this.ui = ui;
	}

	public void actionPerformed(ActionEvent e) {
	
	}
}

// DrawUI.java

public class DrawUI extends JPanel {

	Listener ls = new Listener();

	public void initui() {
		// 创建面板
		JFrame jf = new JFrame();
		// 设置面板属性
		jf.setSize(1240, 860);
		jf.setTitle("中国象棋");
		jf.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);// 设置关闭窗体即清除进程
		jf.getContentPane().setBackground(Color.WHITE);// 设置背景颜色为白色
		jf.setLocationRelativeTo(null);// 窗口
		jf.setResizable(false);// 设置窗体不可放缩
		// 把this添加到JFrame中
		this.setBackground(Color.white);
		jf.add(this);
		jf.setVisible(true);
		// 给画板添加监听器
		jf.addMouseListener(ls);
		Graphics g = jf.getGraphics();
		ls.setG(g);
		ls.setUI(this);
	}

	// 重绘
	public void paint(Graphics g) {
		super.paint(g);
		// 画棋盘
		g.drawImage(new ImageIcon(getClass().getResource("image\\" + "棋盘.jpg")).getImage(), 90, 60, 625, 700, this);
		// 根据flag画棋子
		for (int i = 0; i < init.row; i++) {
			for (int j = 0; j < init.column; j++) {
				if (ls.flag[i][j] > 0) {
					g.drawImage(new ImageIcon(getClass().getResource("image\\"+(Integer.toString(ls.flag[i][j])) + ".png")).getImage(), init.y0 + j * init.size - init.chesssize / 2,init.x00 + i * init.size - init.chesssize / 2,init.chesssize, init.chesssize, this);
				}
			}
		}
	}

	public static void main(String args[]) {
		DrawUI ui = new DrawUI();
		ui.initui();
	}
}

此时的界面如下：

按钮和Logo

和一般的添加按钮的不同是我们需要通过使用JButton的Paint方法来对按钮进行添加图片的操作，并且用setBounds方法设置按钮的位置，一定要把JPanel的布局设置为$null$，不然无效。我们新建一个JPanel对象，用来添加按钮。并且为了好看，我又在右上角加了个Logo。代码如下：

		// 添加JPanel
		JPanel jp = new JPanel();
		jp.setPreferredSize(new Dimension(450, 1));
		jp.setBackground(Color.white);
		jp.setLayout(null);
		jf.add(jp, BorderLayout.EAST);

		// 添加按钮
		String[] ShapeBtn = { "开始游戏", "重新开始", "悔棋" };
		for (int i = 0; i < ShapeBtn.length; i++) {
			String name = ShapeBtn[i];
			JButton jbt = new JButton(name) {
				private static final long serialVersionUID = 1L;
				Image jbti = new ImageIcon(this.getClass().getResource("image\\" + name + ".png")).getImage();

				public void paint(Graphics g) {
					g.drawImage(jbti, 0, 0, 250, 100, null);
				}
			};
			jbt.setBounds(100, 260 + 150 * i, 250, 100);
			jbt.addActionListener(ls);
			jp.add(jbt);
		}

		// 添加JLabel
		JLabel jl = new JLabel("中国象棋") {
			private static final long serialVersionUID = 1L;
			Image jli = new ImageIcon(this.getClass().getResource("image\\" + "中国象棋.png")).getImage();

			public void paint(Graphics g) {
				g.drawImage(jli, 0, 0, 400, 204, null);
			}
		};
		jl.setBounds(0, 0, 400, 204);
		jp.add(jl);

现在效果如下：

现在我们的界面已经做好了，接下来就要进行重要的监听器部分。

关注微信公众号：图灵完备，回复中国象棋即可获得图片及代码资源。
微信号：YonminMa