1. 美化界面

界面搭建好之后,就需要美化界面了,本次需要美化下面四个地方:

  1. 将15张小图片移动到界面的中央偏下方
  2. 添加背景图片
  3. 添加图片的边框
  4. 优化路径

1.1 小图片居中

原本的小图片,都在左上角的位置,不好看,我想让他们居中,这样就需要给每一张图片在x和y都进行一个偏移即可。

代码示例:

1.2 添加背景图片

细节:代码中后添加的,塞在下方

代码示例:

1.3 添加图片的边框

1.4 优化路径

之前我们写的路径是完整路径:

这样会有两个坏处:

一:路径太长,代码阅读不方便

二:项目拿到别人电脑上时,如果别人电脑上没有F盘和对应的文件夹,就找不到图片

1.4.1 计算机中的两种路径

目前为止,在idea中,相对路径是相对当前项目而言的。

以下面的路径为例:

在寻找的时候,先找当前项目,在当前项目下找aaa,在aaa里面找bbb,在bbb里面找a.txt

利用这个原理,我们可以修改项目中路径的书写:

代码示例:

 

2. 上下左右移动的逻辑

移动

业务分析:

上下左右的我们看上去就是移动空白的方块,实则逻辑跟我们看上去的相反:

但是在移动的时候也有一些小问题要注意:

实现步骤:

  1. 本类实现KeyListener接口,并重写所有抽象方法
  2. 给整个界面添加键盘监听事件
  3. 统计一下空白方块对应的数字0在二维数组中的位置
  4. 在keyReleased方法当中实现移动的逻辑

代码实现:

3. 查看完整图片的功能

查看完整图片

业务分析:

在玩游戏的过程中,我想看一下最终的效果图,该怎么办呢?

此时可以添加一个功能,当我们长按某个键(假设为A),不松的时候,就显示完整图片,松开就显示原来的图片

实现步骤:

  1. 给整个界面添加键盘事件
  2. 在keyPressed中书写按下不松的逻辑
  3. 在keyReleased中书写松开的逻辑

代码实现:

 

4. 作弊码

业务分许:

不想玩了,想要一键通关

实现步骤:

  1. 给整个界面添加键盘事件
  2. 在keyReleased中书写松开的逻辑,当按下W的时候一键通关。

备注:当然各位小伙伴可以改写这段逻辑,当按下W的时候,可以将数据排列成还需要走这么两三步才能一键通关的,这样你在跟好基友PK的时候,操作是不是更加隐秘呢?

代码实现:

5. 判断胜利

业务分许:

当游戏的图标排列正确了,需要有胜利图标显示。

每次上下左右移动图片的时候都需要进行判断。

在keyReleased中方法一开始的地方就需要写判断是否胜利

实现步骤:

  1. 定义一个正确的二维数组win。
  2. 在加载图片之前,先判断一下二维数组中的数字跟win数组中是否相同。
  3. 如果相同展示正确图标
  4. 如果不同则不展示正确图标

代码实现:

6. 计步功能

移动

业务分许:

左上角的计步器,每移动一次,计步器就需要自增一次

实现步骤:

  1. 定义一个变量用来统计已经玩了多少步。
  2. 每次按上下左右的时候计步器自增一次即可。

代码实现:

7. 其他功能

业务分许:

完成重新开始、关闭游戏、关于我们。这三个都是在菜单上的,所以可以一起完成

重新开始:点击之后,重新打乱图片,计步器清零

关闭游戏:点击之后,全部关闭

关于我们:点击之后出现黑马程序员的公众号二维码

实现步骤:

  1. 给菜单上的每个选项添加点击事件
  2. 在actionPerformed方法中实现对应的逻辑即可

代码实现:

 

代码实现:

8.游戏完整代码