APP
java實(shí)現(xiàn)中國(guó)象棋1：界面的制作
中國(guó)象棋的界面主要有三個(gè)部分：棋盤(pán)，棋子和按鈕。棋盤(pán)在網(wǎng)上可以找到許多相關(guān)的圖片，但是棋子和按鈕就找不到，或者找到的棋子圖片很丑，因此我就自己用PS畫(huà)了棋子和按鈕，有需要的朋友可以加我微信，我會(huì)把我的微信號(hào)放在文章最后面。注：我們把所有的圖片都放在包的下面。例如Package的名字為Chinesechess，那么就在此Package下新建一個(gè)名為Chinesechess.image的package，并把圖片放入，不然程序?qū)⒄也坏綀D片。（作者使用的IDE為Eclipse，不同的IDE可能會(huì)有不同的引入圖片的方法。請(qǐng)大家根據(jù)自己所使用的IDE選擇合適的方法引入圖片）
界面思路棋盤(pán)
棋盤(pán)的圖片在網(wǎng)上找一張自己覺(jué)得好看的就好，直接在百度圖片里就可以找到許多種類(lèi)的棋盤(pán)圖片。我的思路是用JPanel的Paint方法把圖片畫(huà)到面板上，面板繼承JPanel類(lèi)。代碼如下：
// DrawUI.java
public class DrawUI extends JPanel {
public void initui() {
// 創(chuàng)建面板
JFrame jf = new JFrame();
// 設(shè)置面板屬性
jf.setSize(1240, 860);
jf.setTitle("中國(guó)象棋");
jf.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);// 設(shè)置關(guān)閉窗體即清除進(jìn)程
jf.getContentPane().setBackground(Color.WHITE);// 設(shè)置背景顏色為白色
jf.setLocationRelativeTo(null);// 窗口
jf.setResizable(false);// 設(shè)置窗體不可放縮
this.setBackground(Color.white);
jf.add(this);
jf.setVisible(true);
}
// 重繪
public void paint(Graphics g) {
super.paint(g);
// 畫(huà)棋盤(pán)
g.drawImage(new ImageIcon(getClass().getResource("image\"+"棋盤(pán).jpg")).getImage(), 90, 60, 625, 700, this);
}
public static void main(String args[]) {
DrawUI ui = new DrawUI();
ui.initui();
}
}
此時(shí)界面如下：
棋子
因?yàn)槲覀冃枰獙?duì)棋盤(pán)上的棋子進(jìn)行點(diǎn)擊操作，只要一個(gè)DrawUI類(lèi)是肯定不夠的，所以我們新建一個(gè)監(jiān)聽(tīng)器的類(lèi)，在這個(gè)類(lèi)里面我們對(duì)棋子進(jìn)行操作。我的思路是建立一個(gè)二維數(shù)組，每種棋子用一個(gè)數(shù)字來(lái)表示，例如“將”我用數(shù)字5表示，“卒”我都用7表示。詳細(xì)表示為：
接下來(lái)我們需要對(duì)棋盤(pán)的起始點(diǎn)和棋盤(pán)的格子的大小進(jìn)行測(cè)量，并自己定義要畫(huà)的棋子的大小，寫(xiě)在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 } }; // 初始化棋盤(pán)
// 將畫(huà)布傳遞過(guò)來(lái)
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() {
// 創(chuàng)建面板
JFrame jf = new JFrame();
// 設(shè)置面板屬性
jf.setSize(1240, 860);
jf.setTitle("中國(guó)象棋");
jf.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);// 設(shè)置關(guān)閉窗體即清除進(jìn)程
jf.getContentPane().setBackground(Color.WHITE);// 設(shè)置背景顏色為白色
jf.setLocationRelativeTo(null);// 窗口
jf.setResizable(false);// 設(shè)置窗體不可放縮
// 把this添加到JFrame中
this.setBackground(Color.white);
jf.add(this);
jf.setVisible(true);
// 給畫(huà)板添加監(jiān)聽(tīng)器
jf.addMouseListener(ls);
Graphics g = jf.getGraphics();
ls.setG(g);
ls.setUI(this);
}
// 重繪
public void paint(Graphics g) {
super.paint(g);
// 畫(huà)棋盤(pán)
g.drawImage(new ImageIcon(getClass().getResource("image\" + "棋盤(pán).jpg")).getImage(), 90, 60, 625, 700, this);
// 根據(jù)flag畫(huà)棋子
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();
}
}
此時(shí)的界面如下：
按鈕和Logo
和一般的添加按鈕的不同是我們需要通過(guò)使用JButton的Paint方法來(lái)對(duì)按鈕進(jìn)行添加圖片的操作，并且用setBounds方法設(shè)置按鈕的位置，一定要把JPanel的布局設(shè)置為 n u l l null null，不然無(wú)效。我們新建一個(gè)JPanel對(duì)象，用來(lái)添加按鈕。并且為了好看，我又在右上角加了個(gè)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 = { "開(kāi)始游戲", "重新開(kāi)始", "悔棋" };
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("中國(guó)象棋") {
private static final long serialVersionUID = 1L;
Image jli = new ImageIcon(this.getClass().getResource("image\" + "中國(guó)象棋.png")).getImage();
public void paint(Graphics g) {
g.drawImage(jli, 0, 0, 400, 204, null);
}
};
jl.setBounds(0, 0, 400, 204);
jp.add(jl);
現(xiàn)在效果如下：
現(xiàn)在我們的界面已經(jīng)做好了，接下來(lái)就要進(jìn)行重要的監(jiān)聽(tīng)器部分。
關(guān)注微信公眾號(hào)：圖靈完備，回復(fù)中國(guó)象棋即可獲得圖片及代碼資源。
微信號(hào)：YonminMa
本文摘自 ：https://blog.51cto.com/u
