(之三)将算法与界面结合起来

用布局和按钮来实现算法的界面

上面已经说完了算法，相信大家也迫不及待的想进入界面的设计了吧，好了，多的不说，我们开始吧。

既然我们的算法是基于二维数组的，那么我们也应该在界面使用一个能反映二维数组的控件。这里有两种方式，一种使用表格来实现，第二种是使用布局来实现。

相对而言，用表格来实现二维数组要简单一些， JAVA 提供的布局方式可能是令大家都不习惯的一种界面设计方式，不过，在这里，我还是选用了布局的方式来实现界面，因为，当你设计完界面后，你会发现 JAVA 的布局也是有它的优点的。

JAVA 提供了 BorderLyout 、 GridLayout 、 FlowLayout 等布局，而在这些布局中， GridLayout 布局是最接近于表格方式的一种布局，同时，我们使用 Jbutton 控件来作为数组中的元素。

//MapUI.java

public class MapUI extends JPanel implements ActionListener {

JButton[] dots = new JButton[Setting.ROW * Setting.COLUMN];

public MapUI() {

// 设计布局

GridLayout gridLayout = new GridLayout();

gridLayout.setRows(Setting.ROW);

gridLayout.setColumns(Setting.COLUMN);

gridLayout.setHgap(2); // 设置纵向间距

gridLayout.setVgap(2); // 设置横向间距

this.setLayout(gridLayout);

// 放置按钮

for (int row = 0; row < Setting.ROW; row++) {

for (int col = 0; col < Setting.COLUMN; col++) {

int index = row * Setting.COLUMN + col;

dots[index].addActionListener(this); // 添加事件处理

this.add(dots[index]);

}

}

}

}

当然了，上面的代码太简单了，简单得连一些基本的事情也没有做，比如说在按钮上加上文字，并且，要保证每个按钮上的文字与算法中二维数组中相对位置的元素的值相对应。现在我们运行一下看看，怎么样，像不像？

界面出来了，那我们怎么知道用户点击的是哪个按钮呢。其实这也不难的，我们在放置按钮的时候，对每个按钮的 CommandName 属性赋一个值，通过这个值，我们就可以知道该按钮对应二维数组中元素的具体位置了，现在，我们按放置按钮的代码改动一下：

// 放置按钮

for (int row = 0; row < Setting.ROW; row++) {

for (int col = 0; col < Setting.COLUMN; col++) {

int index = row * Setting.COLUMN + col;

dots.setActionCommand("" + i);

}

}

在按钮的事情处理中，再把这个值取出来，并且还原到坐标上，

public void actionPerformed(ActionEvent e) {

JButton button = (JButton) e.getSource();

int offset = Integer.parseInt(button.getActionCommand());

int row, col;

row = Math.round(offset / Setting.COLUMN);

col = offset - row * Setting.COLUMN;

}

怎么样，是不是如此简单？已经知道了用户是按的哪个按钮，并且知道了该按钮对应的二维数组中的值，剩下的事情就不用我说了吧：)

现在，我们需要用 JButton 控件来将算法中二维数组中每个元素的值区别出来，最简单的就是用不同的数字来显示，有了这个功能后，我们就可以很方便的实现界面与算法的同步了。

// 根据数组来绘置画面

private void paint() {

for (int row = 0; row < Setting.ROW; row++) {

for (int col = 0; col < Setting.COLUMN; col++) {

int index = row * Setting.COLUMN + col;

if (map.getMap()[row][col] > 0) {

dots[index].setIcon(Kyodai.BlocksIcon[map.getMap()[row][col] - 1]);

dots[index].setEnabled(true);

}

else {

dots[index].setIcon(null);

dots[index].setText(“” + index);

}

}

}

}

设计用户界面

好了，到现在为止，不管怎么说，我们已经大体上实现了与算法有关的界面，虽然还很难看，但总算是有了个界面，也算是对自己的一点安慰吧。

现在，我们要设计用户的界面了，用户的界面也无需让我们多考虑了，既然已经有现成的，我们就抄吧(其实是我天生缺乏美术天份，与其自己做得难看，还不如抄抄别人现成的)。这部分没有太多要说的，我就用图来说明一下吧。

同样，整个界面也是使用了 JAVA 提供的布局方式，这里使用的是 BorderLayout 布局，我们需要注意的就是先算计好每个区域所需要尺寸的大小，并且使用 JPanel 的 setPreferredSize 方法来固定好大小，同时，根据自己的需要，添加命令按钮如开始、退出等。

为用户界面添加功能

用户界面的设计已经出来了，但是相应的功能我们还没有实现，现在，让我们来一起实现这些功能吧。

同样，我们还是参照一下别人游戏中有哪些功能，并且根据自己的需要来进行选择，在这里，我们只需要提供开始游戏、刷新地图、提示、炸弹等功能就好了(其它的暂时可以不管，以后需要的时候可以再添加)。

开始游戏： 当用户开始游戏的时候，我们需要将地图初始化并且显示出游戏界面 。

刷新地图： 此功能我们在算法部分中已经实现了，现在要做的就是使显示部分能够同步进行。

提示功能： 此功能在算法中也已经实现，我们需要做的就是怎么样将找到的这两个并且向别人指出。

炸弹功能： 此功能其实 就是在提示功能的基础上，加上自动消除两个点。

好了，相信这些对我们并非难事，我们还是继续下一步吧。