如何让生成的骰子与前一个保持top/left坐标一致并保留随机性

核心逻辑调整 #

要实现后续骰子与前一个共线（同top或同left）且保留随机性，不能靠随机生成坐标后再判断是否符合条件（概率太低），而是强制锁定其中一个坐标，再随机另一个坐标：

1. 获取最后一个已生成骰子的精确坐标（需去除px单位转成数字）
2. 随机选择方向：要么保持top不变（左右移动），要么保持left不变（上下移动）
3. 在选定方向上生成随机偏移量，确保新位置在合理范围内
4. 可选：添加重叠检测，避免新骰子与已有骰子堆叠

代码修改示例 #

假设你的生成骰子函数为createDice，修改核心逻辑如下：

function createDice() {
  const diceContainer = document.getElementById('dice-container'); // 假设容器ID
  const lastDice = diceContainer.querySelector('.dice:last-child');
  let newTop, newLeft;

  if (lastDice) {
    // 解析最后一个骰子的坐标
    const lastTop = parseInt(lastDice.style.top);
    const lastLeft = parseInt(lastDice.style.left);
    // 随机选方向：0=左右（同top），1=上下（同left）
    const direction = Math.floor(Math.random() * 2);

    if (direction === 0) {
      newTop = lastTop;
      // 随机生成左右偏移，步长50-150px（可自定义），正负随机
      const offset = (Math.random() > 0.5 ? 1 : -1) * (50 + Math.floor(Math.random() * 100));
      newLeft = lastLeft + offset;
    } else {
      newLeft = lastLeft;
      const offset = (Math.random() > 0.5 ? 1 : -1) * (50 + Math.floor(Math.random() * 100));
      newTop = lastTop + offset;
    }

    // 可选：检测新位置是否与已有骰子重叠（假设骰子尺寸50x50）
    const allDice = diceContainer.querySelectorAll('.dice');
    let isOverlap = false;
    allDice.forEach(dice => {
      const diceTop = parseInt(dice.style.top);
      const diceLeft = parseInt(dice.style.left);
      if (Math.abs(newTop - diceTop) < 50 && Math.abs(newLeft - diceLeft) < 50) {
        isOverlap = true;
      }
    });
    // 重叠则重新生成
    if (isOverlap) return createDice();

    // 确保新骰子不超出视口
    newTop = Math.max(0, Math.min(window.innerHeight - 50, newTop));
    newLeft = Math.max(0, Math.min(window.innerWidth - 50, newLeft));
  } else {
    // 第一个骰子，正常随机生成
    newTop = Math.floor(Math.random() * (window.innerHeight - 50));
    newLeft = Math.floor(Math.random() * (window.innerWidth - 50));
  }

  // 创建新骰子元素
  const newDice = document.createElement('div');
  newDice.className = 'dice';
  newDice.style.top = `${newTop}px`;
  newDice.style.left = `${newLeft}px`;
  // 骰子点数、样式等其他逻辑...
  diceContainer.appendChild(newDice);
}

原问题排查 #

你之前修改坐标判断未达预期，大概率是因为：

• 仅在随机生成坐标后做newTop === lastTop || newLeft === lastLeft判断，符合条件的概率极低，大部分时候生成的坐标不满足共线要求
• 未强制锁定其中一个坐标，而是依赖随机概率，导致效果不稳定

额外优化建议 #

• 若需要严格的网格对齐（比如像示例图那样的格子连接），可以把偏移量改成固定值（如50px，与骰子尺寸一致）
• 可以限制偏移范围，避免骰子生成到视口外
• 若需要支持回溯（比如回到之前的骰子位置），可以用数组保存所有骰子的坐标历史

内容的提问来源于stack exchange，提问作者Max xaM