体育新闻

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

2026-10-27

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

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

规则和原始数据

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

同一排7个按钮;每项[容器宽,左边距,右边距,间距] [[216, 6, 3, 7], [253, 7, 10, 12], [188, 5, 7, 4], [177, 3, 8, 12], [186, 7, 11, 5], [171, 10, 9, 10], [236, 9, 10, 11], [208, 11, 6, 8]]

逐步记录

容器宽216,左右边距6/3、间距7:可分配165,商23余4;按钮宽[24, 24, 24, 24, 23, 23, 23],区间[[6, 30], [37, 61], [68, 92], [99, 123], [130, 153], [160, 183], [190, 213]],末端为213。

容器宽253,左右边距7/10、间距12:可分配164,商23余3;按钮宽[24, 24, 24, 23, 23, 23, 23],区间[[7, 31], [43, 67], [79, 103], [115, 138], [150, 173], [185, 208], [220, 243]],末端为243。

容器宽188,左右边距5/7、间距4:可分配152,商21余5;按钮宽[22, 22, 22, 22, 22, 21, 21],区间[[5, 27], [31, 53], [57, 79], [83, 105], [109, 131], [135, 156], [160, 181]],末端为181。

容器宽177,左右边距3/8、间距12:可分配94,商13余3;按钮宽[14, 14, 14, 13, 13, 13, 13],区间[[3, 17], [29, 43], [55, 69], [81, 94], [106, 119], [131, 144], [156, 169]],末端为169。

容器宽186,左右边距7/11、间距5:可分配138,商19余5;按钮宽[20, 20, 20, 20, 20, 19, 19],区间[[7, 27], [32, 52], [57, 77], [82, 102], [107, 127], [132, 151], [156, 175]],末端为175。

容器宽171,左右边距10/9、间距10:可分配92,商13余1;按钮宽[14, 13, 13, 13, 13, 13, 13],区间[[10, 24], [34, 47], [57, 70], [80, 93], [103, 116], [126, 139], [149, 162]],末端为162。

容器宽236,左右边距9/10、间距11:可分配151,商21余4;按钮宽[22, 22, 22, 22, 21, 21, 21],区间[[9, 31], [42, 64], [75, 97], [108, 130], [141, 162], [173, 194], [205, 226]],末端为226。

容器宽208,左右边距11/6、间距8:可分配143,商20余3;按钮宽[21, 21, 21, 20, 20, 20, 20],区间[[11, 32], [40, 61], [69, 90], [98, 118], [126, 146], [154, 174], [182, 202]],末端为202。

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

交叉核对与应用

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

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

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