Überlappende zufällige divs

Question

Ich mache ein einfaches Spiel (whack ein Maulwurf), das Spiel funktioniert so: Jedes Mal, wenn Sie den Start-Knopf drücken, wird es 10 Divs in das DOM platzieren. Die divs werden zufällig in das DOM platziert.

Mein Problem ist, dass sie sich überlappen und manchmal sind sie außerhalb ihres Containers.

Ich würde gerne wissen, wie kann ich sie zufällig in den Container ohne einander zu überlappen, ich bevorzuge kein Raster zu platzieren sie, ich möchte sie zufällig über den Container verteilt werden.

hier ist die Hauptfunktion:

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; 
} 

hier ist ein jsfiddle

Answer 1

Hier ist die Funktion, die ich geändert -

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; 
    } 

https://jsfiddle.net/s5cv2n8y/6/