新闻中心

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

2026-10-27

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

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

规则和原始数据

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

同一排7个按钮;每项[容器宽,左边距,右边距,间距] [[272, 11, 5, 12], [122, 11, 10, 4], [224, 9, 4, 11], [97, 2, 7, 3], [202, 3, 4, 12], [189, 3, 10, 10], [203, 5, 11, 9], [152, 4, 5, 9]]

逐步记录

容器宽272,左右边距11/5、间距12:可分配184,商26余2;按钮宽[27, 27, 26, 26, 26, 26, 26],区间[[11, 38], [50, 77], [89, 115], [127, 153], [165, 191], [203, 229], [241, 267]],末端为267。

容器宽122,左右边距11/10、间距4:可分配77,商11余0;按钮宽[11, 11, 11, 11, 11, 11, 11],区间[[11, 22], [26, 37], [41, 52], [56, 67], [71, 82], [86, 97], [101, 112]],末端为112。

容器宽224,左右边距9/4、间距11:可分配145,商20余5;按钮宽[21, 21, 21, 21, 21, 20, 20],区间[[9, 30], [41, 62], [73, 94], [105, 126], [137, 158], [169, 189], [200, 220]],末端为220。

容器宽97,左右边距2/7、间距3:可分配70,商10余0;按钮宽[10, 10, 10, 10, 10, 10, 10],区间[[2, 12], [15, 25], [28, 38], [41, 51], [54, 64], [67, 77], [80, 90]],末端为90。

容器宽202,左右边距3/4、间距12:可分配123,商17余4;按钮宽[18, 18, 18, 18, 17, 17, 17],区间[[3, 21], [33, 51], [63, 81], [93, 111], [123, 140], [152, 169], [181, 198]],末端为198。

容器宽189,左右边距3/10、间距10:可分配116,商16余4;按钮宽[17, 17, 17, 17, 16, 16, 16],区间[[3, 20], [30, 47], [57, 74], [84, 101], [111, 127], [137, 153], [163, 179]],末端为179。

容器宽203,左右边距5/11、间距9:可分配133,商19余0;按钮宽[19, 19, 19, 19, 19, 19, 19],区间[[5, 24], [33, 52], [61, 80], [89, 108], [117, 136], [145, 164], [173, 192]],末端为192。

容器宽152,左右边距4/5、间距9:可分配89,商12余5;按钮宽[13, 13, 13, 13, 13, 12, 12],区间[[4, 17], [26, 39], [48, 61], [70, 83], [92, 105], [114, 126], [135, 147]],末端为147。

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

交叉核对与应用

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

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

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