随机映射div

Question

我正在创造一种新的"打鼹鼠"风格的游戏,孩子们必须根据问题打出正确的数字.到目前为止它真的很顺利,我有一个计时器,计算正确和错误的答案,当游戏开始时,我有一些称为"字符"的div,它们在设定的时间随机出现在容器中.

我遇到的问题是,因为它是完全随机的,有时"字符"看起来彼此重叠.有没有办法组织它们,以便它们出现在容器中的设置位置,并且在它们出现时不会重叠.

这里我有代码将div映射到容器..

    function randomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
}

function scramble() {
    var children = $('#container').children();
    var randomId = randomFromTo(1, children.length);
    moveRandom('char' + randomId);
}

function moveRandom(id) {
    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();
    var pad = parseInt($('#container').css('padding-top').replace('px', ''));
    var bHeight = $('#' + id).height();
    var bWidth = $('#' + id).width();
    maxY = cPos.top + cHeight - bHeight - pad;
    maxX = cPos.left + cWidth - bWidth - pad;
    minY = cPos.top + pad;
    minX = cPos.left + pad;
    newY = randomFromTo(minY, maxY);
    newX = randomFromTo(minX, maxX);
    $('#' + id).css({
        top: newY,
        left: newX
    }).fadeIn(100, function () {
        setTimeout(function () {
            $('#' + id).fadeOut(100);
            window.cont++;
        }, 1000);
    });

如果它有帮助我有一个小提琴.. http://jsfiddle.net/pUwKb/8/

Answer 1

正如@aug建议的那样,你应该知道在绘画时间不能放置东西的地方,只能把它们放在有效位置.最简单的方法是保持当前占用的位置,以便根据建议的位置进行检查.

我建议像

// locations of current divs; elements like {x: 10, y: 40}
var boxes = [];

// p point; b box top-left corner; w and h width and height
function inside(p, w, h, b) {
     return (p.x >= b.x) && (p.y >= b.y) && (p.x < b.x + w) && (p.y < b.y + h);
}

// a and b box top-left corners; w and h width and height; m is margin
function overlaps(a, b, w, h, m) {
     var corners = [a, {x:a.x+w, y:a.y}, {x:a.x, y:a.y+h}, {x:a.x+w, y:a.y+h}];
     var bWithMargins = {x:b.x-m, y:b.y-m};
     for (var i=0; i<corners.length; i++) {
         if (inside(corners[i], bWithMargins, w+2*m, h+2*m) return true;
     }
     return false;
}

// when placing a new piece
var box;
while (box === undefined) {
   box = createRandomPosition(); // returns something like {x: 15, y: 92}
   for (var i=0; i<boxes.length; i++) {
      if (overlaps(box, boxes[i], boxwidth, boxheight, margin)) {
         box = undefined;
         break;
      }
   }
}
boxes.push(box);

警告:未经测试的代码,请注意错别字.

Answer 2

您必须实现的基本思想是，当选择随机坐标时，理论上您应该知道不允许的边界，并且您的程序应该知道不要选择这些位置（无论您是否找到一种算法或简单地忽略这些位置的方法）范围或你的程序不断检查以确保所选的数字不在边界内，这取决于你。后者更容易实现，但这是一种不好的方法，因为你完全依赖于机会）。

例如，假设选择坐标 50、70。如果图片尺寸为50x50，则允许的范围不仅会排除图片的尺寸，而且会排除图片各个方向的50px，以免发生重叠。

希望这可以帮助。如果我有时间，我可能会尝试编写一个示例，但我希望这能回答问题的概念方面（如果这就是您遇到的问题）。

哦，顺便说一句，忘了说这个程序做得非常好。看起来棒极了:)