最近java课老师布置了一个作业:制作一个拼图小游戏,关键老师自己说javaGUI编程没用,讲课的时候好像跳过了(没去上课不过我猜应该没讲吧),现在又叫我们做这些,实在是哭笑不得。
得了吧,老师的任务只能老老实实完成对吧,但是我又想到像Swing这些工具包已经基本上被淘汰了,做出来的页面有点老土,要学就学点好的,于是我选择用JavaFX来完成这次作业。
JavaFX的发展也不容乐观,一直不温不火的,但是本着对桌面应用有着一定的兴趣,就学一学吧,于是学了半天后开始上手做出来这个极其简陋的拼图游戏,希望随之以后的深入学习,能够做出更精美的应用。
(一)首页界面
首页就很简单,一个VBox作为父布局,嵌套一个HBox子布局,HBox子布局里写三个Button事件,点击后打开指定难度的窗体,并关闭首页窗体,下面的文本是放在父布局VBox里的Label的文本内容,至于背景和按钮颜色则是用css来指定,整个过程唯一要关注的就是各个按钮大小间距位置等等。
(二)游戏界面
在游戏中我设置了三种难度,分别是3*3,4*4,5*5,实现上基本一样,所以只讲第一个简单难度九宫格的实现即可。
点击简单按钮后,关闭首页窗口,打开游戏窗口:
讲这个页面的难点(其实也很简单):
(1) 图片的截取:我当然不是PS去把一张图片截成一块块图片啦,这里我用imageview.setViewPort(new Rectangle2D (x,y,width,higth))的方法进行切割,可以指定图片从哪儿开始切,以及需要的图片大小
(2)图片的存储:利用图片数组ImageView[ ]存储切割好的图片即可,每一个数组元素里就是完整图片的一个子图片
(3)图片在九宫格中的摆放:利用GridPane布局,可以指定在布局里图片的位置,达到九宫格的效果
(4)图片摆放后必须有解:学名叫N数码问题,看了一些大神的博客以下结论:
当列数为奇数时,一切操作不影响奇偶性,当前状态逆序数为偶数等价于拼图有解
当列数为偶数时,上下交换影响奇偶性,只要当前状态逆序数奇偶性^当前空格状态的奇偶性=偶数等价于拼图有解
(5)实现拼图有解:由上面的结论我们可以这样,从[0-8]中随机取8个不重复的数字,保证这串数字的逆序数为偶数,例如:[2 0 1 3 4 5 6 7],没有获得的数字为[8],首先令索引为8图片数组存储一个空白图片,然后我们把这串数字作为图片数组i的下标,分别把图片放在对应九宫格的位置,如:
i[2] i[0] i[1]
i[3] i[4] i[5]
i[6] i[7] i[8]----->存储空白图片
(6)图片的移动:点击空白格子周围的格子,实现图片在布局中的位置交换即可,如点击i[7]实现交换:
i[2] i[0] i[1]
i[3] i[4] i[5]
i[6] i[8]i[7]
(7)如何算作拼图成功:每一次图片交换,就检查是否拼图成功,至于是否拼图成功想必可以很直观的看出来,我们是顺序切割图片再顺序存储,因此像这样就能判定成功:
i[0] i[1] i[2]
i[3] i[4] i[5]
i[6] i[7] i[8]
(8)判定拼图成功:我们需要判定数组下标是不是在它需要对应的位置,数学化后的公式为:n = 3 * r + c,n为数组下标,r为行的索引,c为列的索引,如i[4]下标为4,行索引为1,列索引为1,可得:4=n=1*3+1=4,显然可证该图片所处的位置是正确的
(9)下方按钮事件:返回首页即关闭当前窗口再打开首页窗口,重新游戏即关闭当前窗口再打开游戏窗口,显示原图相当于提示功能,在不关闭当前窗口的前提下,打开另一个显示完整图片的窗口
(三)游戏成功界面
没什么难度,当检测拼图成功时弹出一个文本框即可。
(四)源码部分
(1)首页界面
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
/**
*开始菜单主界面
*作者:Mr. Yu
*2018年12月5日,下午5:40:51
*/
public class Start extends Application {
@Override
public void start(Stage primaryStage) {
try {
// 父容器
VBox vBox = new VBox();
// 子容器,分别是按钮和输出文本
HBox hBox_1 = new HBox();
HBox hBox_2 = new HBox();
// 显示难度选择按钮
Button start_1 = new Button("简单");
start_1.setOnAction(new EventHandler() {
@Override
public void handle(ActionEvent arg0) {
// 打开另一个窗口,即游戏窗口
Game_1 game_1 = new Game_1();
game_1.start(new Stage());
// 关闭开始界面
primaryStage.close();
}
});
Button start_2 = new Button("困难");
start_2.setOnAction(new EventHandler() {
@Override
public void handle(ActionEvent arg0) {
// 打开另一个窗口,即游戏窗口
Game_2 game_2 = new Game_2();
game_2.start(new Stage());
// 关闭开始界面
primaryStage.close();
}
});
Button start_3 = new Button("地狱");
start_3.setOnAction(new EventHandler() {
@Override
public void handle(ActionEvent arg0) {
// 打开另一个窗口,即游戏窗口
Game_3 game_3 = new Game_3();
game_3.start(new Stage());
// 关闭开始界面
primaryStage.close();
}
});
Label label = new Label("@余氏出品,必属渣品");
//设置文本样式大小和颜色
label.setFont(new Font("Arial", 30));
label.setTextFill(Color.web("black"));
hBox_1.getChildren().addAll(start_1, start_2, start_3);
hBox_2.getChildren().add(label);
vBox.getChildren().addAll(hBox_1, hBox_2);
// 设置按钮大小并调节位置
start_1.setPrefSize(100, 60);
start_2.setPrefSize(100, 60);
start_3.setPrefSize(100, 60);
hBox_1.setPadding(new Insets(650, 100, 0, 175));
hBox_2.setPadding(new Insets(50, 50, 500, 260));
// 设置控件之间的距离
hBox_1.setSpacing(100);
// 标题栏图标
Image image = new Image("application/4.jpg");
Scene scene = new Scene(vBox, 800, 800);
scene.getStylesheets().add(getClass().getResource("Start.css").toExternalForm());
primaryStage.getIcons().add(image);
primaryStage.setTitle("智障拼图");
primaryStage.setScene(scene);
primaryStage.setResizable(false);
primaryStage.show();
} catch (Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
(2)简单难度的游戏界面
import java.util.Random;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.geometry.Rectangle2D;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Button;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
/**
*游戏界面----简单
*作者:Mr. Yu
*2018年12月5日,下午5:40:51
*/
public class Game_1 extends Application {
public int m; // m是不在随机数组的那个数字
ImageView[] imageViews = new ImageView[9];
@Override
public void start(Stage primaryStage) {
init(primaryStage);
}
public void init(Stage primaryStage) {
// 父布局
VBox vBox = new VBox();
// 3*3九宫格布局,作为上方的选项嵌套入父布局
GridPane gridPane = new GridPane();
// 水平布局,作为下方的选项嵌套入父布局
HBox hbox = new HBox();
hbox.setPadding(new Insets(10)); // 填充
hbox.setAlignment(Po