企业文化

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

2026-10-27 1

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

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

规则和原始数据

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

同一排3个按钮;每项[容器宽,左边距,右边距,间距] [[80, 9, 9, 4], [84, 3, 6, 12], [98, 5, 12, 10], [76, 11, 5, 4], [92, 9, 3, 8], [88, 6, 10, 4], [81, 9, 8, 9], [77, 5, 4, 7]]

逐步记录

容器宽80,左右边距9/9、间距4:可分配54,商18余0;按钮宽[18, 18, 18],区间[[9, 27], [31, 49], [53, 71]],末端为71。

容器宽84,左右边距3/6、间距12:可分配51,商17余0;按钮宽[17, 17, 17],区间[[3, 20], [32, 49], [61, 78]],末端为78。

容器宽98,左右边距5/12、间距10:可分配61,商20余1;按钮宽[21, 20, 20],区间[[5, 26], [36, 56], [66, 86]],末端为86。

容器宽76,左右边距11/5、间距4:可分配52,商17余1;按钮宽[18, 17, 17],区间[[11, 29], [33, 50], [54, 71]],末端为71。

容器宽92,左右边距9/3、间距8:可分配64,商21余1;按钮宽[22, 21, 21],区间[[9, 31], [39, 60], [68, 89]],末端为89。

容器宽88,左右边距6/10、间距4:可分配64,商21余1;按钮宽[22, 21, 21],区间[[6, 28], [32, 53], [57, 78]],末端为78。

容器宽81,左右边距9/8、间距9:可分配46,商15余1;按钮宽[16, 15, 15],区间[[9, 25], [34, 49], [58, 73]],末端为73。

容器宽77,左右边距5/4、间距7:可分配54,商18余0;按钮宽[18, 18, 18],区间[[5, 23], [30, 48], [55, 73]],末端为73。

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

交叉核对与应用

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

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

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