利用Java的Swing編程、事件監聽等知識寫一個華容道小游戲。這個游戲的作者不是我，但是我根據所學的知識，分析一下游戲的源碼，以鞏固學習成果。
1 界面分析
華容道游戲的界面如下圖所示：
一共10個人物，每個人物可以上下左右移動。所以應提前想好一個布局方式，以便在寫游戲時設定坐標。
程序所需知識：
- Swing基礎
- Swing基本組件（
JFrame、JButton） - 事件監聽器（焦點、動作、鍵盤、鼠標）
2 啟動類
在IDEA中新建一個項目Klotski，並新建啟動類Start.java和游戲窗體類GameFrame.java。根據啟動類和游戲主體分離的原則，我們在啟動類Start.java中只新建游戲窗體就行，不做任何與游戲內容相關的操作。
public class Start {
public static void main(String[] args) {
new GameFrame();
}
}
3 人物類
在設計游戲窗體之前，我們先新建一個人物類Person.java，這個類用來實例化游戲中每一個人物對象。由於每一個人物對象實際上可以看做窗體的一個按鈕，所以使該類繼承JButton類。
import javax.swing.*;
public class Person extends JButton {
}
我們為人物類設計三個屬性，分別是編號、顏色和字體。編號在后期用於定位人物，顏色和字體方便構造人物時初始化。
int number;
Color color = new Color(255, 245, 170);
Font font = new Font("微軟雅黑", Font.BOLD, 12);
3.1 構造方法
人物類的構造方法要傳進兩個參數，分別是編號和人物名字，並在下面對編號、姓名、顏色、字體等進行初始化。
public Person(int number, String s) {
super(s); // 調用父類JButton的構造方法，為按鈕命名
this.number = number;
setBackground(color);
setFont(font);
}
3.2 人物變色監聽
當我們想讓某個人物移動時，我們需要讓其從默認顏色變為別的顏色。這里可以為每個按鈕添加一個監聽器，並且焦點事件監聽器是最適合的。當按鈕被聚焦的時候，鼠標鍵盤也可以對指定按鈕進行操作。
可以直接讓該類實現FocusListener接口，並在構造方法加上焦點事件監聽器，把自己傳入即可。
public class Person extends JButton implements FocusListener { // 實現FocusListener接口
...
public Person(int number, String s) {
...
addFocusListener(this); // 添加焦點事件監聽器
}
@Override
public void focusGained(FocusEvent e) {
setBackground(Color.RED); // 按鈕獲得焦點時，顏色變紅
}
@Override
public void focusLost(FocusEvent e) {
setBackground(color); // 按鈕失去焦點時，顏色變回默認值
}
}
3.3 人物類完整代碼
import javax.swing.*;
import java.awt.*;
import java.awt.event.FocusEvent;
import java.awt.event.FocusListener;
public class Person extends JButton implements FocusListener {
int number;
Color color = new Color(255, 245, 170);
Font font = new Font("微軟雅黑", Font.BOLD, 12);
public Person(int number, String s) {
super(s);
this.number = number;
setBackground(color);
setFont(font);
addFocusListener(this);
}
@Override
public void focusGained(FocusEvent e) {
setBackground(Color.RED);
}
@Override
public void focusLost(FocusEvent e) {
setBackground(color);
}
}
4 游戲窗體類
游戲窗體類是游戲的主體部分，包含顯示模塊和邏輯模塊。首先我們讓該類繼承JFrame類。
import javax.swing.*;
public class GameFrame extends JFrame {
}
該類首先要有10個人物，那么我們實例化一個Person數組；以及在屬性中添加幾個按鈕，為邊界按鈕（處理游戲邊界）和重新開始按鈕。
Person[] people = new Person[10];
JButton left, right, above, below; // 左、右、上、下邊界按鈕
JButton restart = new JButton("重新開始");
4.1 構造方法
構造方法中只寫與窗體默認設置有關的部分，具體的按鈕布置放到一個初始化方法里面去寫。
public GameFrame() {
init(); // 初始化方法
setDefaultCloseOperation(DISPOSE_ON_CLOSE);
setBounds(100, 100, 320, 500);
setVisible(true);
validate(); // 驗證布局
}
4.2 初始化布置
在初始化方法init()中，我們一步步放置所需要的組件。首先把窗體設定為絕對布局，並放置重新開始按鈕。
public void init() {
setLayout(null);
add(restart);
restart.setBounds(100, 320, 120, 35);
}
啟動Start.java，查看效果。
接下來放置每個人物。先寫一個String數組，放置每個人物的名字，再將名字傳入本類的屬性people數組中。
String[] name = {"曹操", "關羽", "馬", "黃", "趙", "張", "兵", "兵", "兵", "兵"};
for (int i = 0; i < name.length; i++) {
people[i] = new Person(i, name[i]);
add(people[i]);
}
設定每個人物按鈕的大小和位置。觀察第1章界面分析中的圖，如果設置每個格子的大小為50像素×50像素，那么曹操就是100像素×100像素；如果游戲左上角的邊界為(54, 54)，那么曹操所在的位置應為(104, 54)。依次類推，設置每個人物的大小和位置。
// 以左上角的位置為(54, 54)，每個格子大小為50*50，設定每個按鈕的位置
people[0].setBounds(104, 54, 100, 100);
people[1].setBounds(104, 154, 100, 50);
people[2].setBounds(54, 154, 50, 100);
people[3].setBounds(204, 154, 50, 100);
people[4].setBounds(54, 54, 50, 100);
people[5].setBounds(204, 54, 50, 100);
people[6].setBounds(54, 254, 50, 50);
people[7].setBounds(204, 254, 50, 50);
people[8].setBounds(104, 204, 50, 50);
people[9].setBounds(154, 204, 50, 50);
再添加游戲邊界，游戲邊界也可以看做是按鈕，我們將這4個按鈕設定為寬為5的長條，並根據添加好的人物的位置確定長條位置。
left = new JButton();
right = new JButton();
above = new JButton();
below = new JButton();
add(left);
add(right);
add(above);
add(below);
// 以寬為5設定每個長條的大小
left.setBounds(49, 49, 5, 260);
right.setBounds(254, 49, 5, 260);
above.setBounds(49, 49, 210, 5);
below.setBounds(49, 304, 210, 5);
validate();
4.3 人物移動操作
寫一個go()方法，使人物進行上下左右移動。傳進去的參數肯定是人物和方向，人物放Person類對象就行，方向其實把已有的4個邊界按鈕放進去就行了，因為它們就代表上下左右，並且可以直接拿它們的邊界。
public void go(Person man, JButton direction) {
}
我們的操作判斷分為以下幾步：
- 先試着移動一下，獲取移動后的位置
- 看是否與其他人物的位置或游戲邊界的位置相撞
- 如果相撞，則不移動；否則進行移動
先試着移動一下，為了方便判斷相撞，我們先拿一個矩形類Rectangle放這個人物的邊界，並獲得坐標。
Rectangle manRect = man.getBounds(); // 人物邊界矩形
int x = manRect.x;
int y = manRect.y;
再試着移動一下，這里我們只操作x和y，所以人物、矩形都是實際上沒有移動的。
if (direction == above) {
y -= 50;
} else if (direction == below) {
y += 50;
} else if (direction == left) {
x -= 50;
} else if (direction == right) {
x += 50;
}
再把矩形移動過去（人物還是未動）。
manRect.setLocation(x, y);
從這時開始，我們要進行判斷，先建立一個布爾型變量move並初始化為true，並拿矩形類Rectangle放其他人物的邊界、游戲邊界的邊界，使用intersects()方法判斷是否相撞。
boolean move = true; // 移動判斷變量
for (int i = 0; i < 10; i++) {
Rectangle personRect = people[i].getBounds(); // 每個人物的邊界
if ((manRect.intersects(personRect) && (man.number != i))) { // 操作人物的邊界和某個人物邊界相撞，且不是自己
move = false; // 不移動
}
}
Rectangle directionRect = direction.getBounds(); // 游戲邊界的邊界
if (manRect.intersects(directionRect)) { // 與游戲邊界相撞
move = false; // 不移動
}
再根據move的結果，對該人物進行移動。
if (move) {
man.setLocation(x, y);
}
4.4 游戲重啟監聽器
點擊重新開始按鈕，游戲重啟。我們讓本類實現ActionListener動作事件監聽器接口，並在init()方法中為restart添加監聽器。然后重寫actionPerformed()方法，可以直接銷毀游戲窗體，再重新新建實例就行了。
public class GameFrame extends JFrame implements ActionListener { // 實現ActionListener接口
...
public void init() {
...
restart.addActionListener(this); // 添加動作事件監聽器
...
}
...
@Override
public void actionPerformed(ActionEvent e) {
dispose(); // 銷毀游戲窗體
new GameFrame(); // 重新實例化
}
}
4.5 鍵盤操作監聽器
鍵盤是可以操作人物的移動的。我們讓本類實現KeyListener鍵盤事件監聽器接口，並在init()方法中為每個人物添加監聽器。
public class GameFrame extends JFrame implements ActionListener, KeyListener { // 實現KeyListener接口
...
public void init() {
...
for (int i = 0; i < name.length; i++) {
people[i] = new Person(i, name[i]);
add(people[i]);
people[i].addKeyListener(this); // 添加鍵盤事件監聽器
}
...
}
...
@Override
public void keyTyped(KeyEvent e) {
}
@Override
public void keyPressed(KeyEvent e) {
}
@Override
public void keyReleased(KeyEvent e) {
}
}
我們只需要重寫keyPressed()方法。先拿到鍵盤事件資源（當前聚焦的人物）和鍵盤按鍵，並指揮人物按一定方向移動。
@Override
public void keyPressed(KeyEvent e) {
Person man = (Person) e.getSource(); // 獲得資源（人物）
int keyCode = e.getKeyCode(); // 獲得按鍵
if (keyCode == KeyEvent.VK_UP) { // 按上鍵
go(man, above); // 向上移動，下同
}
if (keyCode == KeyEvent.VK_DOWN) {
go(man, below);
}
if (keyCode == KeyEvent.VK_LEFT) {
go(man, left);
}
if (keyCode == KeyEvent.VK_RIGHT) {
go(man, right);
}
}
4.6 鼠標操作監聽器
鼠標不僅可以聚焦人物，也可以操作人物移動。我們讓本類實現MouseListener鼠標事件監聽器接口，並在init()方法中為每個人物添加監聽器。
public class GameFrame extends JFrame implements ActionListener, KeyListener, MouseListener { // 實現MouseListener接口
...
public void init() {
...
for (int i = 0; i < name.length; i++) {
people[i] = new Person(i, name[i]);
people[i].addKeyListener(this);
people[i].addMouseListener(this); // 添加鼠標事件監聽器
add(people[i]);
}
...
}
...
@Override
public void mouseClicked(MouseEvent e) {
}
@Override
public void mousePressed(MouseEvent e) {
}
@Override
public void mouseReleased(MouseEvent e) {
}
@Override
public void mouseEntered(MouseEvent e) {
}
@Override
public void mouseExited(MouseEvent e) {
}
}
我們只需要重寫MousePressed()方法。先拿到鼠標事件資源（鼠標點擊的人物）和鼠標坐標，再拿到這個人物的邊界大小，根據這個鼠標點擊的位置（如點擊人物上半部分，則向上移動），指揮人物按一定方向移動。
@Override
public void mousePressed(MouseEvent e) {
Person man = (Person) e.getSource(); // 獲得資源（人物）
int x = e.getX();
int y = e.getY(); // 鼠標坐標（相對於人物）
int w = man.getBounds().width;
int h = man.getBounds().height; // 人物邊界大小
if (y < h / 2) { // 點擊的是上半部分
go(man, above); // 向上移動，下同
}
if (y > h / 2) {
go(man, below);
}
if (x < w / 2) {
go(man, left);
}
if(x > w / 2) {
go(man, right);
}
}
注意，鍵盤事件和鼠標事件不用else-if，可以讓人物斜向運動，運動順序由程序書寫順序決定。
4.7 游戲窗體類完整代碼
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class GameFrame extends JFrame implements ActionListener, KeyListener, MouseListener {
Person[] people = new Person[10];
JButton left, right, above, below;
JButton restart = new JButton("重新開始");
public GameFrame() {
init();
setDefaultCloseOperation(DISPOSE_ON_CLOSE);
setBounds(100, 100, 320, 500);
setVisible(true);
validate();
}
public void init() {
setLayout(null);
add(restart);
restart.setBounds(100, 320, 120, 35);
restart.addActionListener(this);
String[] name = {"曹操", "關羽", "馬", "黃", "趙", "張", "兵", "兵", "兵", "兵"};
for (int i = 0; i < name.length; i++) {
people[i] = new Person(i, name[i]);
people[i].addKeyListener(this);
people[i].addMouseListener(this);
add(people[i]);
}
people[0].setBounds(104, 54, 100, 100);
people[1].setBounds(104, 154, 100, 50);
people[2].setBounds(54, 154, 50, 100);
people[3].setBounds(204, 154, 50, 100);
people[4].setBounds(54, 54, 50, 100);
people[5].setBounds(204, 54, 50, 100);
people[6].setBounds(54, 254, 50, 50);
people[7].setBounds(204, 254, 50, 50);
people[8].setBounds(104, 204, 50, 50);
people[9].setBounds(154, 204, 50, 50);
left = new JButton();
right = new JButton();
above = new JButton();
below = new JButton();
add(left);
add(right);
add(above);
add(below);
left.setBounds(49, 49, 5, 260);
right.setBounds(254, 49, 5, 260);
above.setBounds(49, 49, 210, 5);
below.setBounds(49, 304, 210, 5);
validate();
}
public void go(Person man, JButton direction) {
Rectangle manRect = man.getBounds();
int x = manRect.x;
int y = manRect.y;
if (direction == above) {
y -= 50;
} else if (direction == below) {
y += 50;
} else if (direction == left) {
x -= 50;
} else if (direction == right) {
x += 50;
}
manRect.setLocation(x, y);
boolean move = true;
for (int i = 0; i < 10; i++) {
Rectangle personRect = people[i].getBounds();
if ((manRect.intersects(personRect) && (man.number != i))) {
move = false;
}
}
Rectangle directionRect = direction.getBounds();
if (manRect.intersects(directionRect)) {
move = false;
}
if (move) {
man.setLocation(x, y);
}
}
@Override
public void actionPerformed(ActionEvent e) {
dispose();
new GameFrame();
}
@Override
public void keyTyped(KeyEvent e) {
}
@Override
public void keyPressed(KeyEvent e) {
Person man = (Person) e.getSource();
int keyCode = e.getKeyCode();
if (keyCode == KeyEvent.VK_UP) {
go(man, above);
}
if (keyCode == KeyEvent.VK_DOWN) {
go(man, below);
}
if (keyCode == KeyEvent.VK_LEFT) {
go(man, left);
}
if (keyCode == KeyEvent.VK_RIGHT) {
go(man, right);
}
}
@Override
public void keyReleased(KeyEvent e) {
}
@Override
public void mouseClicked(MouseEvent e) {
}
@Override
public void mousePressed(MouseEvent e) {
Person man = (Person) e.getSource();
int x = e.getX();
int y = e.getY();
int w = man.getBounds().width;
int h = man.getBounds().height;
if (y < h / 2) {
go(man, above);
}
if (y > h / 2) {
go(man, below);
}
if (x < w / 2) {
go(man, left);
}
if (x > w / 2) {
go(man, right);
}
}
@Override
public void mouseReleased(MouseEvent e) {
}
@Override
public void mouseEntered(MouseEvent e) {
}
@Override
public void mouseExited(MouseEvent e) {
}
}
5 擴展與總結
- 步數統計：可以新寫一個屬性
step，每go()一次就step++，統計游戲步數。 - 成功判定：當曹操走到某個坐標的時候，游戲就成功並結束了。
- 不同關卡：華容道有橫刀立馬、齊頭並前、兵分三路等多種擺放方法，可以只改變人物坐標，實現不同的關卡。
- 記錄進度：把步數、人物坐標存檔到文件里，下次可以直接讀檔，接着來。
- 平台遷移：把代碼換成JavaScript版，並寫到網頁上，游戲基本邏輯是一樣的。
這個游戲應該不難，邏輯上沒有其他游戲那么多，主要是鞏固Swing編程的基礎。
走了好多遍終於成功了：
