基于JavaFX的扫雷游戏实现（二）——游戏界面
废话环节：看过上期文章的小伙伴现在可能还是一头雾水，怎么就完成了核心内容，界面呢？哎我说别急让我先急，博主这不夜以继日地肝出了界面部分嘛。还是老规矩，不会把所有地方都照顾到，只挑一些有代表性的内容介绍，您各位多担待🙏。另外博主的JavaFX是跟着B站视频速成的，指路👉：https://www.bilibili.com/video/BV1Qf4y1F7Zv 有哪些地方讲的不对欢迎在评论区友好交流🤝。
上期内容已经介绍了游戏初始数据，即地雷和数字分布情况的二维数组，那么如何把它与图形界面对应到一起呢？如果您熟悉JavaFX的各种布局和控件的话，很容易会联想到GridPane布局。至于可以点击的格子，用label或button也好，用rectangle绘制矩形也罢，只要看起来像那回事，能设置对应点击事件就OK。选完角儿后就是代码环节了，考虑到纯java代码实现界面不够直观，所以推荐使用fxml文件，因为有对应的可视化设计工具。这里我采用的是Scene Builder，建议大家也了解下。下面给出游戏界面设计图：
图中各部分内容所要承担的功能如下：
- 上方左右两侧的黑色格子是用于显示剩余标记计数和游戏用时的；
- 按钮是游戏重置按钮，不论游戏是否结束，点击就可以重新开局；
- 下方大片区域是要存放格子的GridPane布局；
设计完毕后生成的fxml文件如下(对于 controller 或 fx:id 等内容需要手动设置)：
game.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.text.Font?>
<AnchorPane fx:id="anchorPane"
prefWidth="400" prefHeight="500"
maxHeight="-Infinity" maxWidth="-Infinity"
minHeight="-Infinity" minWidth="-Infinity"
xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="controllers.GameController">
<children>
<Label fx:id="labelTop" style="-fx-background-color: #8e7f7f; ">
<font>
<Font size="1.0"/>
</font>
</Label>
<Label fx:id="labelBottom" style="-fx-background-color: #8e7f7f;">
<font>
<Font size="1.0"/>
</font>
</Label>
<Label fx:id="labelLeft" style="-fx-background-color: #8e7f7f;">
<font>
<Font size="1.0"/>
</font>
</Label>
<Label fx:id="labelRight" style="-fx-background-color: #8e7f7f;">
<font>
<Font size="1.0"/>
</font>
</Label>
<Label fx:id="labelCenter" style="-fx-background-color: #8e7f7f;">
<font>
<Font size="1.0"/>
</font>
</Label>
<GridPane fx:id="grid"/>
<GridPane fx:id="mark" prefWidth="80.0" prefHeight="45.0" AnchorPane.topAnchor="35.0"
AnchorPane.leftAnchor="20.0" style="-fx-background-color: #000000; -fx-hgap: 5.0"/>
<GridPane fx:id="time" prefWidth="80.0" prefHeight="45.0" AnchorPane.topAnchor="35.0"
AnchorPane.rightAnchor="20.0" style="-fx-background-color: #000000; -fx-hgap: 5.0"/>
<Button fx:id="reset" prefHeight="50.0" prefWidth="50.0" AnchorPane.topAnchor="35.0" onAction="#onResetClick"/>
</children>
</AnchorPane>你可能会有疑问，为什么图中没有格子按钮呢？原因很简单，以扫雷简单模式为例，9*9大小，一共要81个格子。这部分内容如果手动添加可太费时费力了，因为它们初始状态完全一致，所以建议在代码中通过循环来实现，如下：
for (int i = 0; i < GAME.height; ++i) {
for (int j = 0; j < GAME.width; ++j) {
Button button = new Button();
// 设置边界线的外观效果, 使按钮看起来更突出
button.setBorder(new Border(new BorderStroke(Color.web("#737373"), BorderStrokeStyle.SOLID, new CornerRadii(4), new BorderWidths(1))));
button.setPadding(new Insets(0));
// 设置按钮大小和点击事件
button.setPrefSize(GAME.buttonSize, GAME.buttonSize);
button.setOnMouseClicked(event -> {
handleEvent(event);
});
// 添加按钮到指定位置
grid.add(button, j, i);
}
}而对于错位的重置按钮和暂时不可见的五个label边框，考虑到后续设置不同游戏难度的情况，这部分内容在代码中设置比较合适，我的做法如下：
/**
* 调整边框以及其他组件的位置和大小
*/
private void adjustControls() {
HashMap<String, Double> params = GAME.genParamsMap();
double thickness = params.get("thickness");
double offset = params.get("offset");
double lenVertical = params.get("lenVertical");
double lenHorizontal = params.get("lenHorizontal");
// 计算实际窗口宽高
WIDTH_OFFSET += lenHorizontal + thickness * 2;
HEIGHT_OFFSET += lenVertical;
// 设置窗口大小
anchorPane.setPrefSize(WIDTH_OFFSET, lenVertical);
// 设置网格布局位置
AnchorPane.setTopAnchor(grid, offset + thickness);
AnchorPane.setLeftAnchor(grid, thickness);
// 设置重置按钮的位置
reset.setStyle("-fx-background-size: contain; -fx-background-image: url(" + SMILE_IMG + ")");
AnchorPane.setLeftAnchor(reset, thickness + (lenHorizontal - 50) / 2);
// 设置边框标签的大小和位置
labelTop.setPrefSize(lenHorizontal, thickness);
AnchorPane.setLeftAnchor(labelTop, thickness);
AnchorPane.setTopAnchor(labelTop, 0.0);
labelCenter.setPrefSize(lenHorizontal, thickness);
AnchorPane.setLeftAnchor(labelCenter, thickness);
AnchorPane.setTopAnchor(labelCenter, offset);
labelBottom.setPrefSize(lenHorizontal, thickness);
AnchorPane.setLeftAnchor(labelBottom, thickness);
AnchorPane.setTopAnchor(labelBottom, lenVertical - thickness);
labelLeft.setPrefSize(thickness, lenVertical);
AnchorPane.setLeftAnchor(labelLeft, 0.0);
AnchorPane.setTopAnchor(labelLeft, 0.0);
labelRight.setPrefSize(thickness, lenVertical);
AnchorPane.setLeftAnchor(labelRight, lenHorizontal + thickness);
AnchorPane.setTopAnchor(labelRight, 0.0);
}注：GAME为游戏难度枚举类实例，genParamsMap是用于生成计算所需数据的静态方法
完整的枚举类代码如下：
GameEnum
package components;
import java.util.HashMap;
/**
* @description: 游戏难度枚举
* @author: 郭小柒w
* @time: 2023/6/11
*/
public enum GameEnum {
EASY(9, 9, 10, 40.0, 30.0),
MEDIUM(16, 16, 40, 35.0, 25.0),
HARD(30, 16, 99, 30.0, 20.0),
CUSTOM();
// 游戏难度规格[宽 x 高], 相应地雷个数
public int width, height, bomb;
// 网格按钮尺寸, 数字字体大小
public double buttonSize, numSize;
GameEnum(int width, int height, int bomb, double buttonSize, double numSize) {
this.width = width;
this.height = height;
this.bomb = bomb;
this.buttonSize = buttonSize;
this.numSize = numSize;
}
GameEnum() {
this.buttonSize = 35.0;
this.numSize = 25.0;
}
// 宽和高限制在简单和困难之间
public void setWidth(int width) {
if (width < EASY.width) {
this.width = EASY.width;
} else if (width > HARD.width) {
this.width = HARD.width;
} else {
this.width = width;
}
}
public void setHeight(int height) {
if (height < EASY.height) {
this.height = EASY.height;
} else if (height > HARD.height) {
this.height = HARD.height;
} else {
this.height = height;
}
}
// 地雷数介于格子数之间
public void setBomb(int bomb) {
if (bomb < 0) {
this.bomb = 0;
} else if (bomb > width * height) {
this.bomb = width * height;
} else {
this.bomb = bomb;
}
}
/**
* 生成游戏窗口和边框大小计算需要用到的参数
* @return 参数集合
*/
public HashMap<String, Double> genParamsMap() {
HashMap<String, Double> params = new HashMap();
// 标签宽度, 固定值10
double thickness = 10.0;
params.put("thickness", thickness);
// 中间位置的标签框相对于布局顶部的偏移量, 固定值110
double offset = 110.0;
params.put("offset", offset);
// 边框标签边的水平和竖直长度, 宽度为固定值10
double lenVertical = height * buttonSize + thickness * 2 + offset;
double lenHorizontal = width * buttonSize;
params.put("lenVertical", lenVertical);
params.put("lenHorizontal", lenHorizontal);
return params;
}
}为什么要使用枚举类对游戏难度进行区分呢？如果您完整地阅读过我的代码，就会发现MineSweeper类仅负责对接游戏进行中的各种逻辑，对于游戏难度、计时判断、排行计算等功能可以说完全不参与。这是因为和win7自带的扫雷不同，我打算新增一个菜单页，而不是运行程序直接开始游戏。这就需要我合理划分每个类负责的功能，不然就要全部塞进MineSweeper类里，显得过于臃肿(事实上大二时期我用awt和swing干过这种蠢事，那一版扫雷几百行的代码全在一个类里，没有注释还bug百出🤡)。你也可以把难度作为MineSweeper类的一个属性来处理，不过这会导致和难度有关的逻辑修改起来比较麻烦，比如下面的代码是我进行游戏初始化的部分：
public void initialize() {
// 重置剩余可用标记数
REST_FLAG = GAME.bomb;
// 重置点击状态
CLICKED = NO;
// 重置游戏状态
STATE = UNSURE;
// 重置计时器
if (TIMELINE != null) {
TIMELINE.stop();
TIMELINE = null;
}
// 生成新游戏的用到的数据
mineSweeper = new MineSweeper(GAME.width, GAME.height, GAME.bomb, new int[GAME.height][GAME.width]);
// 设置监听
addListener();
// 绘制界面
adjustControls();
// 填充网格布局
addToGrid();
}很显然，如果没有使用枚举类，创建minesweeper对象的语句将会更繁琐。因为那需要你根据一个难度全局变量，使用if-else或者switch语句对其进行判断，然后才能设置对应长宽地雷数，另外想要增加一个新的难度时也不可避免地要修改多处代码。而现在仅需要这个全局变量是枚举类实例。
至于图中计数和计时两个黑框框为什么不显示内容，这是因为我想实现液晶数字显示的效果，就像计算器(时代眼泪)的显示风格那样。这种情况没有官方类库可以使用，只能魔改大神轮子做一个自定义控件来满足我的需求，内容较多放在下期再说。
有了fxml文件和初始化代码(下期展开讲)，通过这段代码来生成界面：
/**
* 打开新窗口
*
* @param filePath fxml文件相对路径
* @param method 方法名
*/
public void openNewWindow(String filePath, String method) {
try {
parent = (Stage) anchorPane.getScene().getWindow();
// 加载设置界面布局文件
FXMLLoader loader = new FXMLLoader();
loader.setLocation(getClass().getResource(filePath));
Parent root = loader.load();
Scene scene = new Scene(root);
// 设置Stage
Stage stage = new Stage();
stage.setResizable(false);
if ("onPlayClick".equals(method)) {
// 根据实际效果重置窗口大小
stage.setOnShown(event -> {
stage.setWidth(WIDTH_OFFSET);
stage.setHeight(HEIGHT_OFFSET);
});
}
// 设置左上角图标
stage.getIcons().add(new Image(ICON_IMG));
stage.setScene(scene);
// 设置父窗体
stage.initOwner(anchorPane.getScene().getWindow());
// 设置除当前窗体外其他窗体均不可编辑
stage.initModality(Modality.WINDOW_MODAL);
// 隐藏父窗口
parent.hide();
stage.setOnCloseRequest(event -> {
if(TIMELINE != null) {
TIMELINE.stop();
TIMELINE = null;
}
// 显示父窗口
parent.show();
// 还原更改的值
WIDTH_OFFSET = 6.0;
HEIGHT_OFFSET = 35.0;
});
stage.showAndWait();
} catch (IOException e) {
System.out.println("Error on [Class:MenuController, Method:" + method + "]=>");
e.printStackTrace();
}
}打开游戏界面：
/**
* 点击开始新游戏
*/
public void onPlayClick() { openNewWindow("/fxmls/game.fxml", "onPlayClick"); }最终效果图如下(以简单模式为例)：
——————————————我———是———分———割———线——————————————
不知道本期的介绍有没有让您对项目更加了解呢？是否对没有讲的部分更加期待呢？如果看完所有代码后仍有不清楚地方，请在评论区中指出。我会抽时间回复或者出一期答疑😀。下期的话打算讲讲交互的实现，网格按钮点击事件第一期已经介绍过了所以下期不会着重说明。感谢各位阅读，我们下期不见不散👋
