公司新闻

游戏机制练习簿:等宽按钮分配中的余数像素——4按钮在八种宽度中的像素分配(案例21)

2026-10-27

一排按钮平分可用宽度时,除法不一定得到整数像素。若每个按钮独立四舍五入,最后总宽度可能超出容器或留下缝隙。明确分配余数,可以使边距与总尺寸精确对齐。

以下是一组输入完整的独立案例。先读清规则,再按时间或操作顺序记录中间状态;遇到与预期不同的结果时,检查首次出现差异的位置。案例使用明确限定的教学模型,不假定所有作品都采用相同的处理方式。

规则和原始数据

先扣除左右边距和固定间距,再把剩余整数像素平均分给按钮。每个按钮先得商,剩余像素从左到右各加一;位置区间右端排除,所有按钮至少有一个像素。

同一排4个按钮;每项[容器宽,左边距,右边距,间距] [[85, 4, 4, 11], [150, 11, 8, 6], [73, 12, 11, 2], [119, 11, 2, 10], [75, 9, 9, 4], [79, 12, 12, 5], [96, 11, 12, 6], [89, 11, 5, 8]]

逐步记录

容器宽85,左右边距4/4、间距11:可分配44,商11余0;按钮宽[11, 11, 11, 11],区间[[4, 15], [26, 37], [48, 59], [70, 81]],末端为81。

容器宽150,左右边距11/8、间距6:可分配113,商28余1;按钮宽[29, 28, 28, 28],区间[[11, 40], [46, 74], [80, 108], [114, 142]],末端为142。

容器宽73,左右边距12/11、间距2:可分配44,商11余0;按钮宽[11, 11, 11, 11],区间[[12, 23], [25, 36], [38, 49], [51, 62]],末端为62。

容器宽119,左右边距11/2、间距10:可分配76,商19余0;按钮宽[19, 19, 19, 19],区间[[11, 30], [40, 59], [69, 88], [98, 117]],末端为117。

容器宽75,左右边距9/9、间距4:可分配45,商11余1;按钮宽[12, 11, 11, 11],区间[[9, 21], [25, 36], [40, 51], [55, 66]],末端为66。

容器宽79,左右边距12/12、间距5:可分配40,商10余0;按钮宽[10, 10, 10, 10],区间[[12, 22], [27, 37], [42, 52], [57, 67]],末端为67。

容器宽96,左右边距11/12、间距6:可分配55,商13余3;按钮宽[14, 14, 14, 13],区间[[11, 25], [31, 45], [51, 65], [71, 84]],末端为84。

容器宽89,左右边距11/5、间距8:可分配49,商12余1;按钮宽[13, 12, 12, 12],区间[[11, 24], [32, 44], [52, 64], [72, 84]],末端为84。

每种布局的最后右端都恰好等于容器宽减右边距,余数已完整分配。

交叉核对与应用

逐个统计按钮宽度与固定间距,检查最后一项右端恰好落在容器宽度减右边距处。任意两个按钮宽度最多差一,额外像素只分配给前面的若干项。

从左到右发放余数是一种确定约定,也可以设计居中或交替分配,但不能在同一组测试里混用。确定性规则有助于减少窗口大小来回变化时不必要的边缘抖动。

建议保留原始输入、每一步状态和最终输出,再只改变一个条件做对照。重点检查空输入、相等边界、重复请求以及先后顺序;把规则约定、计算过程和显示表现分别核对,比只比较最后一个数字更容易找到原因。