拼图游戏案例的设计

拼图游戏案例的设计

摘要：拼图游戏的设计，首先考虑窗口布局，因为在窗口的上部需要边界布局，而

那二十五个小按钮需要采用网格布局，因而直接将组件添加到Jframe窗口中是不可行的，可以通过将窗口上部和下部的组件分别添加到两个面板Jpanel中，将两个面板加到Jframe窗口中。然后实现图片的随机排放，通过循环生成图片正确摆放顺序的二维数组和图片随机摆放顺序的二维数组来实现。最后，实现图片的移动，通过两个按钮的行索引想减得绝对值与列索引想减得绝对值的和是否为1，来判断被点击按钮与空白按钮是否相邻，如果相邻，则令显示空白图片的按钮显示被单击按钮显示的图片，令被单击的按钮显示空白的图片。

关键字：Java软件拼图游戏Jpanel面板

引言：拼图游戏是一种弹性很好且耐玩的游戏，它可以启发智力及帮助其养成解决

事情的能力。玩拼图有助于手眼协调，它能训练和了解“部分”与“全部”的关系—可以知道许多的“部分”能拼凑出一个“全部”，以及“一个全部”是由“许多部分”所组成的。拼图平面组合的概念—积木是立体的组合，而拼图是一种平面组合的概念，在局限的2D范围内拼出一个物品，一个合乎与逻辑的东西。拼图游戏需要耐心的操作和手眼协调能力，只要一不协调就不能将数据块放在正确的位置。

一基础知识

JButton(按钮)组件：通过SetText(String text)方法设置按钮的标签文本，通过setIcon(Icon defaultIcon)方法设置按钮在默认状态下显示的图片。JButton组件只是在按下和释放两个状态之间进行切换，当Button按钮被点击时，会触发ActionEvent事件，此事件由ActionListener（事件监听器）接受并做处理，因而调用按钮的addActionListener(ActionEvent e)方法，为该按钮指定监听者。

Jlabel(标签)组件：Jlabel组件用来显示文本和图像，通过setText(String text)方法设置标签显示的文本，通过setIcon(Icon icon)方法设置标签显示图片。BorderLayout布局管理器：由BorderLayout类实现的布局管理器称为边界布局管理器，它的布局方式是将容器划分为五个部分，即NORTH（容器顶部）、WEST（容器左侧）、CENTER(容器中间)、EAST（容器右侧）、SOUTH（容器底部）。如果组件容器采用了边界布局管理器，在将组件添加到容器时，需要设置组件的显示位置，通过方法add(Component comp,Object constraints)添加并设置，该方法的第一个参数为欲添加的组件对象，第二个参数为组件的显示位置。

GridLayout布局管理器：由GridLayout类实现的布局管理器称为网格布局管理器，它的布局方式是将容器按照用户的设置平均划分成若干网，通过构造方法GridLayout(int rows,int cols)创建网格布局管理器对象是，参数rows用来设置网格的行数，参数cols用来设置网格的列数。

JPanel面板：如果将所有的组件都添加到Jframe窗体提供的默认组件容器中，则在一个界面中的所有组件只能采用一种布局方式，很难得到一个美观的界面，并且有些布局方式只能管理有限个组件。通过使用Jpanel面板，首先将面板和组件添加到Jframe窗体中，然后再将子面板和组件添加到上级面板中，这样就可以向面板中添加无数个组件，并且通过对每个面板采用不同的布局管理器，解决众多组件间的布局问题。Jpanel面板默认采用FlowLayout布局管理器。

Java程序的Application类型：特点是“Java应用”是可以独立运行的java程序。需要经过三个步骤：编写源文件，一个java应用程序必须有一个类含有public static void main (String args[])方法，这个类是应用程序的主类，源文件的名字和主类的名字完全相同。编译java源程序，创建源文件后，就要使用编译器（javac.exe）对其进行编译。运行java程序，从主类的main方法开始执行。

二拼图游戏设计思路与步骤

题目要求：所谓拼图游戏，是指将一个完整的图片分割成若干个规则的小图片，然后将这些小图片随机地拼接在一起，然后由玩家按照原图重新拼接出正确的图片。程序运行界面如下图所示，左上角的图片为供玩家参考的原图，下面每一个小网格都是一个小图片，在开始游戏时这些小图片是杂乱无章的，在图中有一个网格是空白的，玩家可以通过单击与其相邻的网格，即位于其上、下、左、右的四个网格，将被单击网格中显示的小图片移动到空白网格中，然后被单击的网格将变为空白，经过这样反复的移动，将会将图片重新拼接成原图像。当点击按钮“下一局”时，每个移动模块中的图片自动随机更新。

第 1 页共6 页第 2 页共6 页

编写拼图游戏是学习Java以后老师让我们编写的第一个完整的程序。当然学习Java过程中也编写过程序，那些程序主要是针对某一节某一个知识点去编程，而后期的编程是用所有学过的Java知识去编写，是一个综合。下面介绍一下我在编写本程序中遇到的问题及解决办法。

窗体布局：在窗体的顶部和中间各添加一个面板。顶部面板是为了在窗体中添加一个标签组件和一个按钮组件，标签组件用来显示拼图的参考图片，按钮组件用来开始新的一局。面板采用边界布局，用来显示参考图片的标签对象添加到面板的左侧，用来开始新依据的按钮对象添加到面板的中间。

中间面板用来添加进行拼图的按钮，它采用的布局方式为网格布局，网格为五列，面板设置完成后，首先通过reorder()方法获得拼图的随机摆放顺序，然后通过循环向该面板中添加按钮对象，在添加前需要设置按钮的名称、显示的图片和监听器。具体代码如下：

CenterPanel=new JPanel(); //创建拼图按钮面板对象

CenterPanel.setLayout(new GridLayout(0,5)); //设置拼图按钮面板采用5列的网格布局

getContentPane().add(centerPanel,BorderLayout.CENTER); //将面板添加到窗体的中间

Sting[][] stochasticorder=reorder(); //获得网格图片的随机摆放顺序

for(int row=0;row<5;row++) {

for(int col=0;col<5;col++) {

final JButton button=new JButton();

button.setName(row+””+col)； //设置按钮的名称

button.setIcon(new ImageIcon(stochasticOrder[row][col]));//为按钮设置图片

if(stochasticOrder[row][col].equals(“img/00.jpg”)) //判断是否为空白按钮

emptyButton=button;

button.addActionListener(new ImaButtonAction()); //为拼图按钮添加监听器

centerPanel.add(button);

}

}

网格图片随机摆放顺序的reorder()方法。首先通过循环生成网络图片正确摆放顺序的二维数组，然后声明一个用来存放网络图片随机摆放顺序的二维数组；最后循环生成网格图片的随机摆放顺序。具体代码如下：Private String[][] reorder() {

String [][] exactnessOrder=new String[5][5]; //网格图片的正确摆放顺序

For(int row=0;row<5;row++) {

For(int col=0;col<5;col++){

exactnessOrder[row][col]=”img/”+row+col+”.jpg”;

}

}

String[][] stochasticOrder=new String[5][5]; //网格图片的随机摆放顺序

For(int row=0;row<5;row++) {

For(int col=0;col<5;col++) {

While(stochasticOrder[row][col]==null) { //随机摆放顺序的指定网格为空

int r=(int) (Math.random()*5);

int c=(int) (Math.random()*5);

if (exactnessOrder[r][c]!=null) {//正确摆放顺序的指定网格不为空

stochasticOrder[row][col]=exactnessOrder[r][c];

exactnessOrder[r][c]=null;

}

}

}

}

Return stochasticOrder;

}

图片的移动。当点击与显示空白图片的按钮相邻的按钮时，则令显示空白图片的按钮显示被点击按钮显示的图片。判断被点击的按钮和显示空白图片的按钮是否相邻，如果两个按钮相邻，一种是他们在同一行，并且相差一列，另一种是他们在同一列，相差一行。如果两个按钮相邻并且在同一行，则这两个按钮的行索引相减得0，列索引相减得绝对值为1；同理，如果两个按钮相邻并且在同一列，则这两个按钮的列索引想减得0，行索引相减得绝对值为1；因而如果这两个按钮相邻，则这两个按钮的行索引相减的绝对值与列索引相减的绝对值的和永远为1。

首先获得空白按钮和被单击按钮的所在行和列，然后判断这两个按钮是否相邻，如果相邻则将被单击按钮显示的图片移动到空白按钮时，并令被单击按钮显示空白图片，以及将空白按钮对象设置为被单击的按钮对象。具体代码如下：

Class ImgButtonAction implements ActionListener {//拼图按钮监听器 Public void actionPerformed(ActionEvent e) {

String emptyName=emptyButton.getName(); //获得空白按钮的名称

Char emptyRow=emptyName.charAt(0); //获得空白按钮所在的行

Char emptyCol=emptyName.charAt(1); //获得空白按钮所在的列

JButton clickButton=(JButton) e.getSoure();//获得被点击按钮对象

String clickName=clicButton.getName(); //获得被点击按钮的名称

第 3 页共6 页第 4 页共6 页