Javascript 重叠随机div

我正在做一个简单的游戏（打鼹鼠），游戏的工作原理如下： 每次按下开始按钮，它都会在DOM中放置10个div。 div将随机放置到DOM中

我的问题是，它们彼此重叠，有时它们位于容器外

我想知道如何将它们随机放置在容器中而不相互重叠，我不喜欢使用网格来放置它们，我希望它们随机分布在容器中

以下是主要功能：

function randomPos(size){
var result = new Array();
var height = (document.getElementById('field').clientHeight);
var width = document.getElementById('field').clientWidth;
for (var i = 0; i < size; i++) {
    var obj = {};
    var posY = Math.floor(Math.random() * height);
    var posX = Math.floor(Math.random() * width);
    if (result.length == 0){
        obj.x = posX;
        obj.y = posY;
        result.push(obj);
    }
    else{
        var flag = true;
        for (var j = 0; j < i && flag; j++){
            if (result[j].y == posY && result[j].x == posX){
                flag = false;
            }
        }
        if(flag){
            obj.x = posX;
            obj.y = posY ;
            result.push(obj);
        }
        else{
            i--;
        }
    }
}
return result;
}

函数随机位置（大小）{
var result=新数组（）；
变量高度=（document.getElementById（'field'）.clientHeight）；
var width=document.getElementById（'field'）.clientWidth；
对于（变量i=0；i

---

这是一个

这是我修改的函数-

function randomPos(size){
    var result = new Array();
    var height = (document.getElementById('field').clientHeight);
    var width = document.getElementById('field').clientWidth;

    var generatePos = function(){
        // generates the random x and y position, taking into account the size of the object
        var posY = Math.floor(Math.random() * (height - 140) + 40);
        var posX = Math.floor(Math.random() * (width - 100));
        return {x: posX, y: posY}
    }

    var checkOverlap = function(x, y){
        var no_overlap = true
        // loops through existing objects and makes sure the newly generated one doesn't overlap
        for (var j = 0; j < result.length; j++){
            var yDiff = Math.abs(result[j].y - y)
            var xDiff = Math.abs(result[j].x - x)
            if (yDiff < 100 && xDiff < 100){
                no_overlap = false;
            }
        }
        return no_overlap
    }

    for (var i = 0; i < size; i++) {
        var obj = {};
        var pos = generatePos()
        if (result.length == 0){
            obj.x = pos.x;
            obj.y = pos.y;
            result.push(obj);
        }
        else{
            var no_overlap = checkOverlap(pos.x, pos.y) 
            if(no_overlap){
                obj.x = pos.x;
                obj.y = pos.y ;
                result.push(obj);
            }
            else{
                i--;
            }
        }
    }
    return result;
  }

函数随机位置（大小）{
var result=新数组（）；
变量高度=（document.getElementById（'field'）.clientHeight）；
var width=document.getElementById（'field'）.clientWidth；
var generatePos=函数（）{
//生成随机的x和y位置，并考虑对象的大小
var posY=Math.floor（Math.random（）*（高度-140）+40）；
var posX=Math.floor（Math.random（）*（宽度-100））；
返回{x:posX，y:posY}
}
var checkOverlap=函数（x，y）{
var no_重叠=真
//循环遍历现有对象，确保新生成的对象不重叠
对于（var j=0；j

---

您需要确定div占用的屏幕空间的完整区域。如果div为100x100，则在生成新div时，您需要将屏幕的该区域作为一个选项进行基本的屏蔽。能否详细说明如何实际操作？谢谢！还有一件事，是否可以使高度从40px开始，而不是从0开始？我想保留第一个40px的游戏点数和计时器。是的。使用

Math.random

时，一般公式是

Math.random（）*（max-min）+min

。所以使用

Math.random（）*（高度-140）+40

。我也会更新