一、前言
在美化完界面以后，我们就要给拼图小游戏注入灵魂了！那就是要实现移动图片的效果，这里我们使用键盘的上下左右键来实现移动图片的效果，也就是我们上一次说到的键盘监听效果，如果对于键盘监听效果还是不明白的小伙伴可以点击查看文章回顾一下【Java中的键盘监听机制（含实例）】
二、步骤
1.让我们的类继承KeyListener接口
public class GameJFrame extends JFrame implements KeyListener
2.改写initData方法
我们曾经提到过，对于存放图片我们要使用二维数组来存放，并且有一个非常简洁的写法，由于我们一共要添加15张图片，还有一张图片是空白的，也就是编号为0的图片，所以当我们遇到为0的图片时，要把其对应的二维数组的坐标提取出来，方便与其上下左右的图片进行交换，来达到移动图片的效果，遇到编号不为0的图片那就放入二维数组即可
这里给出判断的部分代码
if(tempArr[i] == 0){ x = i / 4; y = i % 4; } else{ data[i/4][i%4] = tempArr[i]; }
3.实现向上移动
这里我们要重新接口内的方法，但是由于游戏需要，我们只需要重写松开键盘时触发的代码块即可，剩下的就不需要重写了，可以空着
当我们实现向上移动图片的时候，其实就是把空图片的下面一张图片往上移动，然后将空图片的下面那张图片设置为空图片，最后再调整初始位置为现在空图片所在位置即可，注意做完这些以后还要再加载图片，否则显示不出来
像这张图片就是将右下角的空图片上移，并把右下角设置为空图片，最后将右下角的坐标设置为初始坐标
//将下面的图片上移 data[x][y] = data[x+1][y]; //将下面的图片设为空白图片（编号为0） data[x+1][y] = 0; //将初始图片位置设置为空白图片位置 x++; //加载图片 initImage();
4.实现向下移动
同理，将上面的图片往下移
//将上面的图片上移 data[x][y] = data[x-1][y]; //将上面的图片设为空白图片（编号为0） data[x-1][y] = 0; //将初始图片设置为空白图片对应位置 x--; //加载图片 initImage();
5.实现向左移动
//将右面的图片左移 data[x][y] = data[x][y+1]; //将右面的图片设为空白图片（编号为0） data[x][y+1] = 0; //将初始图片设置为空白图片对应位置 y++; //加载图片 initImage();
6.实现向右移动
//将左面的图片右移 data[x][y] = data[x][y-1]; //将左面的图片设为空白图片（编号为0） data[x][y-1] = 0; //将初始图片设置为空白图片对应位置 y--; //加载图片 initImage();
7.改写initImage方法
在上文中我们提到，先加载的图片会出现在上方，所以当我们移动图片并重写加载的时候，我们需要将原先的图片清除才可以展现出移动后的图片，否则会出现覆盖，无法看到正确效果，在加载完图片以后也要再刷新一次，以保证其效果能够正确展示
清除图片（写在方法体第一行）
this.getContentPane().removeAll();
刷新界面（写在方法体最后一行）
this.getContentPane().repaint();
8.为JFrame添加键盘监听
this.addKeyListener(this);
三、优化代码
当我们遇到边界的时候，无法执行操作，那么这时候就需要重新让用户去操作，这里的判断条件在于每个上下左右操作的最后一行代码，让变量不要超过数组定义的长度即可
例如：
方法体内最后语句是：x++，由于数组最大长度是3，所以当x等于3时无法执行该语句，就要返回，让用户重新操作
if(x == 3){ return; }
四、完整代码
@Override public void keyReleased(KeyEvent e){ int code = e.getKeyCode(); //向左移动 if(code == 37){ System.out.println("向左移动"); if(y == 3){ return; } //将右面的图片左移 data[x][y] = data[x][y+1]; //将右面的图片设为空白图片（编号为0） data[x][y+1] = 0; //将初始图片设置为空白图片对应位置 y++; //加载图片 initImage(); } //向上移动 else if(code == 38){ System.out.println("向上移动"); if(x == 3){ return; } //将下面的图片上移 data[x][y] = data[x+1][y]; //将下面的图片设为空白图片（编号为0） data[x+1][y] = 0; //将初始图片位置设置为空白图片位置 x++; //加载图片 initImage(); } //向右移动 else if(code == 39){ System.out.println("向右移动"); if(y == 0){ return; } //将左面的图片右移 data[x][y] = data[x][y-1]; //将左面的图片设为空白图片（编号为0） data[x][y-1] = 0; //将初始图片设置为空白图片对应位置 y--; //加载图片 initImage(); } //向下移动 else if(code == 40){ System.out.println("向下移动"); if(x == 0){ return; } //将上面的图片下移 data[x][y] = data[x-1][y]; //将上面的图片设为空白图片（编号为0） data[x-1][y] = 0; //将初始图片设置为空白图片对应位置 x--; //加载图片 initImage(); } }
五、结语
如果不知道上下左右对应编号，可以通过文章开头的连接去查看方法，找到编号，这里主要是移动的思路比较难，搞清楚思路后写代码其实会很方便，如果有任何问题欢迎留言评论
