JSFiddle - React, Tailwind, and code Playground

add game cards to stage with random positions without overlapping (collision detection)

by GM 400

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.js"></script>
<h3>Random Position without collision</h3>

<div class="wrapper">
    <ul class="boxes">
        <!--
        <li class="box">5</li>
        <li class="box">8</li>
        <li class="box">12</li>
-->
    </ul>
</div>

<button id="new">Create Boxes (6)</button>
<button id="start">Start Animation</button>
<button id="stop">Stop Animation</button>

CSS

.wrapper {
    border: 1px solid red;
    width: 281px;
    height: 500px;
    position: relative;
}
.boxes {
    list-style: none;
    margin:0;
    padding:0;
}
.box {
    width: 90px;
    height: 90px;
    border: 1px solid black;
    text-align: center;
    line-height: 90px;    
    font-size: 20px;
    font-family:arial;
    
    position: absolute;
    top: 0;
    left:0;
}

JavaScript

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var NUMBER_OF_BOXES = 6;

var stageWidth = 281;
var stageHeight = 500;

var boxSize = 90;

var boxesPosArray = [];

var maxCollisionChecks = 100;

var numOfCollisionChecks = 0;

var numberArray = [];

function createNumberArray(){
    for(var i = 1 ; i < 100 ; i++){
         numberArray[i] = i;   
    }
}

function resetGlobalsAndStage(){
    $('.boxes').html('');
    createNumberArray();    
    boxesPosArray = [];    
    numOfCollisionChecks = 0;   
}


function checkCollision(newBoxPos){

    var collisionDetected = false;
    
    // center of new box
    var p1 = {
        x: newBoxPos.left + boxSize /2,
        y: newBoxPos.top + boxSize /2
    };
    
    // center of already placed boxes
    var p2 = {};
    
    for(var i = 0 ; i < boxesPosArray.length ; i++)
    {   
        // set center of current box
        p2 = {
            x: boxesPosArray[i].left + boxSize /2,
            y: boxesPosArray[i].top + boxSize /2
        };
            
        
        // http://stackoverflow.com/questions/17157785/i-have-two-squares-drawn-on-the-screen-how-can-i-detect-collision-on-the-edges
        
        // If the squares can't rotate, boxSize is the length of every edge, 
        // Point p1 is the center of one square, and p2 is of the other. then:      
        if (Math.abs(p1.x - p2.x) < boxSize && Math.abs(p1.y - p2.y) < boxSize) {
            // Collision
            collisionDetected = true;        
        }
    
    }

    // The case that there are no boxes on the stage yet.    
    if(boxesPosArray.length == 0){
        collisionDetected = false;
    }
    
    // Prevent infinite While Loop
    if(numOfCollisionChecks == maxCollisionChecks){
        collisionDetected = false;
    }
 
    
    return collisionDetected;   
}


function setBoxPosition($box){
   
    var newBoxPos = {
        top: getRandomInt(0,stageHeight - boxSize),
        left:...