新闻动态

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

2026-10-27

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

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

规则和原始数据

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

同一排7个按钮;每项[容器宽,左边距,右边距,间距] [[212, 12, 2, 12], [102, 4, 7, 3], [238, 2, 10, 10], [153, 5, 7, 4], [179, 3, 11, 6], [150, 10, 4, 6], [147, 12, 10, 4], [192, 3, 5, 4]]

逐步记录

容器宽212,左右边距12/2、间距12:可分配126,商18余0;按钮宽[18, 18, 18, 18, 18, 18, 18],区间[[12, 30], [42, 60], [72, 90], [102, 120], [132, 150], [162, 180], [192, 210]],末端为210。

容器宽102,左右边距4/7、间距3:可分配73,商10余3;按钮宽[11, 11, 11, 10, 10, 10, 10],区间[[4, 15], [18, 29], [32, 43], [46, 56], [59, 69], [72, 82], [85, 95]],末端为95。

容器宽238,左右边距2/10、间距10:可分配166,商23余5;按钮宽[24, 24, 24, 24, 24, 23, 23],区间[[2, 26], [36, 60], [70, 94], [104, 128], [138, 162], [172, 195], [205, 228]],末端为228。

容器宽153,左右边距5/7、间距4:可分配117,商16余5;按钮宽[17, 17, 17, 17, 17, 16, 16],区间[[5, 22], [26, 43], [47, 64], [68, 85], [89, 106], [110, 126], [130, 146]],末端为146。

容器宽179,左右边距3/11、间距6:可分配129,商18余3;按钮宽[19, 19, 19, 18, 18, 18, 18],区间[[3, 22], [28, 47], [53, 72], [78, 96], [102, 120], [126, 144], [150, 168]],末端为168。

容器宽150,左右边距10/4、间距6:可分配100,商14余2;按钮宽[15, 15, 14, 14, 14, 14, 14],区间[[10, 25], [31, 46], [52, 66], [72, 86], [92, 106], [112, 126], [132, 146]],末端为146。

容器宽147,左右边距12/10、间距4:可分配101,商14余3;按钮宽[15, 15, 15, 14, 14, 14, 14],区间[[12, 27], [31, 46], [50, 65], [69, 83], [87, 101], [105, 119], [123, 137]],末端为137。

容器宽192,左右边距3/5、间距4:可分配160,商22余6;按钮宽[23, 23, 23, 23, 23, 23, 22],区间[[3, 26], [30, 53], [57, 80], [84, 107], [111, 134], [138, 161], [165, 187]],末端为187。

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

交叉核对与应用

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

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

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