JSFiddle - React, Tailwind, and code Playground

by OriginalEXE

HTML

<div class="circle" id="circle1"></div>
<div class="rect" id="rect1"></div>

CSS

.circle {
    background-color: #ffefc6;
    border: 1px solid #a1882b;
    border-radius: 50%;
    height: 80px;
    position: absolute;
    width: 80px;
}

.rect {
    background-color: #ffefc6;
    border: 1px solid #a1882b;
    height: 120px;
    position: absolute;
    width: 120px;
}

#circle1 {
    left: 165px;
    top: 30px;
}

#rect1 {
    left: 50px;
    top: 89px;
}

JavaScript

+( function( $ ) {
    
    var $body = $( 'body' );
    
    var constructGeometry = function( selector ) {
      
        var $element = $body.find( selector );
        
        if ( ! $element.length ) {
            
            return {
            	height: 0,
                width : 0,
                x     : 0,
                y     : 0
            };
            
        }
        
        return {
            height: $element.height(),
            width : $element.width(),
            x     : $element.offset().left,
            y     : $element.offset().top
        };
        
    };
    
    
    
    var areCircleAndRectangleColliding = function( circle, rectangle ) {
        
        if (
            
            // is rectangle too left
            rectangle.x + rectangle.width < circle.x
            
            ||
            
            // is rectangle too right
            rectangle.x > circle.x + circle.width
            
            ||
            
            // is rectangle too top
            rectangle.y + rectangle.height < circle.y
            
            ||
            
            // is rectangle too bottom
            rectangle.y > circle.y + circle.height
            
            ||
            
            // is rectangle at the top left but not touching the circle
            (
                
            	rectangle.x + rectangle.width < circle.x + circle.width / 2
                
                &&
                
                rectangle.y + rectangle.height < circle.y + circle.height / 2
                
                &&
                
                Math.pow( ( rectangle.x + rectangle.width - ( circle.x + circle.width / 2 ) ), 2 ) +
                Math.pow( ( rectangle.y + rectangle.height - ( circle.y + circle.height / 2 ) ), 2 ) >
                Math.pow( circle.width / 2, 2 )
                
            )
            
            ||
            
            // is rectangle at the top right but not touching the...