java游戏开发--连连看3-将算法与代码结合

将算法与界面结合起来

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

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

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

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

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

//MapUI.java

public class MapUI extends JPanel implements ActionListener {

utton[] dots = new utton[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]);

}

}

}

}

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

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

// 放置按钮

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

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

int index = row * Setting.COLUMN + col;

dots.setActionmand("" + i);

}

}

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

public void actionPerformed(ActionEvent e) {

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

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

int row, col;

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

col = offset - row * Setting.COLUMN;

}

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

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

// 根据数组来绘置画面

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);

d ots[index].setText(“” + index);

}

}

}

}

设计用户界面

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

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