游戏机制练习簿:等宽按钮分配中的余数像素——5按钮在八种宽度中的像素分配(案例25)
一排按钮平分可用宽度时,除法不一定得到整数像素。若每个按钮独立四舍五入,最后总宽度可能超出容器或留下缝隙。明确分配余数,可以使边距与总尺寸精确对齐。
以下是一组输入完整的独立案例。先读清规则,再按时间或操作顺序记录中间状态;遇到与预期不同的结果时,检查首次出现差异的位置。案例使用明确限定的教学模型,不假定所有作品都采用相同的处理方式。
规则和原始数据
先扣除左右边距和固定间距,再把剩余整数像素平均分给按钮。每个按钮先得商,剩余像素从左到右各加一;位置区间右端排除,所有按钮至少有一个像素。
同一排5个按钮;每项[容器宽,左边距,右边距,间距] [[181, 2, 4, 8], [186, 10, 6, 8], [185, 4, 9, 7], [126, 8, 8, 7], [147, 6, 2, 6], [134, 4, 6, 3], [108, 10, 4, 2], [190, 10, 9, 7]]
逐步记录
容器宽181,左右边距2/4、间距8:可分配143,商28余3;按钮宽[29, 29, 29, 28, 28],区间[[2, 31], [39, 68], [76, 105], [113, 141], [149, 177]],末端为177。
容器宽186,左右边距10/6、间距8:可分配138,商27余3;按钮宽[28, 28, 28, 27, 27],区间[[10, 38], [46, 74], [82, 110], [118, 145], [153, 180]],末端为180。
容器宽185,左右边距4/9、间距7:可分配144,商28余4;按钮宽[29, 29, 29, 29, 28],区间[[4, 33], [40, 69], [76, 105], [112, 141], [148, 176]],末端为176。
容器宽126,左右边距8/8、间距7:可分配82,商16余2;按钮宽[17, 17, 16, 16, 16],区间[[8, 25], [32, 49], [56, 72], [79, 95], [102, 118]],末端为118。
容器宽147,左右边距6/2、间距6:可分配115,商23余0;按钮宽[23, 23, 23, 23, 23],区间[[6, 29], [35, 58], [64, 87], [93, 116], [122, 145]],末端为145。
容器宽134,左右边距4/6、间距3:可分配112,商22余2;按钮宽[23, 23, 22, 22, 22],区间[[4, 27], [30, 53], [56, 78], [81, 103], [106, 128]],末端为128。
容器宽108,左右边距10/4、间距2:可分配86,商17余1;按钮宽[18, 17, 17, 17, 17],区间[[10, 28], [30, 47], [49, 66], [68, 85], [87, 104]],末端为104。
容器宽190,左右边距10/9、间距7:可分配143,商28余3;按钮宽[29, 29, 29, 28, 28],区间[[10, 39], [46, 75], [82, 111], [118, 146], [153, 181]],末端为181。
每种布局的最后右端都恰好等于容器宽减右边距,余数已完整分配。
交叉核对与应用
逐个统计按钮宽度与固定间距,检查最后一项右端恰好落在容器宽度减右边距处。任意两个按钮宽度最多差一,额外像素只分配给前面的若干项。
从左到右发放余数是一种确定约定,也可以设计居中或交替分配,但不能在同一组测试里混用。确定性规则有助于减少窗口大小来回变化时不必要的边缘抖动。
建议保留原始输入、每一步状态和最终输出,再只改变一个条件做对照。重点检查空输入、相等边界、重复请求以及先后顺序;把规则约定、计算过程和显示表现分别核对,比只比较最后一个数字更容易找到原因。
