尊龙凯时网址

基于javafx的扫雷游戏实现(二)——游戏界面 -尊龙凯时网址

2023-08-17,,

  废话环节:看过上期文章的小伙伴现在可能还是一头雾水,怎么就完成了核心内容,界面呢?哎我说别急让我先急,博主这不夜以继日地肝出了界面部分嘛。还是老规矩,不会把所有地方都照顾到,只挑一些有代表性的内容介绍,您各位多担待。另外博主的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
 




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">







anchorpane.leftanchor="20.0" style="-fx-background-color: #000000; -fx-hgap: 5.0"/>
anchorpane.rightanchor="20.0" style="-fx-background-color: #000000; -fx-hgap: 5.0"/>

  你可能会有疑问,为什么图中没有格子按钮呢?原因很简单,以简单模式为例,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 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: ");
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 genparamsmap() {
hashmap 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"); }

  最终效果图如下(以简单模式为例):

——————————————我———是———分———割———线——————————————

  不知道本期的介绍有没有让您对项目更加了解呢?是否对没有讲的部分更加期待呢?如果看完所有代码后仍有不清楚地方,请在评论区中指出。我会抽时间回复或者出一期答疑。下期的话打算讲讲交互的实现,网格按钮点击事件第一期已经介绍过了所以下期不会着重说明。感谢各位阅读,我们下期不见不散

基于javafx的扫雷游戏实现(二)——游戏界面的相关教程结束。

网站地图