MouseDirection Degrees and Collisions

by Michael Prosser

HTML

<div id="canvas">
    <div id="output" style="color:#ffffff;">0</div>
    <div id="output2" style="color:#ffffff;">0</div>
    <div id="box1"></div>
    <div id="box2"></div>
</div>

CSS

#canvas {
    width:1000px;
    height:1000px;
    background-color:#000000;
    position:relative;
}
#box1 {
    background-color:#333333;
    width:20px;
    height:20px;
    position:absolute;
    left:100px;
    top:100px;
}
#box2 {
    background-color:#666666;
    width:20px;
    height:20px;
    position:absolute;
    left:200px;
    top:200px;
}

JavaScript

function intersect2D(a, b) {
  return (a.left <= b.right &&
          b.left <= a.right &&
          a.top <= b.bottom &&
          b.top <= a.bottom)
}


$(document).ready(function(){
    
    $selector1 = $('#box1');
    $selector2 = $('#box2');
    
    
    
    $selector1.draggable({
        
        drag:function(){
            
            if (typeof(last_position.x) != 'undefined') {
        
        last_position.dx = last_position.x - event.offsetX;
        last_position.dy = last_position.y - event.offsetY;
        
    }
    
    last_position.dx = last_position.x - event.offsetX;
    last_position.dy = last_position.y - event.offsetY;
    
    last_position.x = event.offsetX;
    last_position.y = event.offsetY;

    
    var angleInDegrees = Math.atan2(last_position.dy, last_position.dx) * 180 / Math.PI;
    
    // convert to 3D
    angleInDegrees -= 90;
    
   $('#output').text(angleInDegrees);
    
     var a = { left: parseInt($selector1.css('left')), right: parseInt(parseInt($selector1.css('left')) + $selector1.width()), top: parseInt($selector1.css('top')), bottom: parseInt(parseInt($selector1.css('top')) + $selector1.height()) };
        var b = { left: parseInt($selector2.css('left')), right: parseInt(parseInt($selector2.css('left')) + $selector2.width()), top: parseInt($selector2.css('top')), bottom: parseInt(parseInt($selector2.css('top')) + $selector2.height()) };
        
          if(!$('#box2').attr('data-intersected')){
              
              if(intersect2D(a, b)){
                  
                  $('#output2').text(last_position.dx + ' ' + last_position.dy);
                  
                  $('#box2').attr('data-intersected','true');
                  $('#box2').animate({ left: parseInt(parseInt($('#box2').css('left')) + last_position.dx) + 'px', top:  parseInt(parseInt($('#box2').css('top')) + last_position.dy) + 'px'  }, 1000, function(){  $('#box2').removeAttr('data-intersected'); });
                 
             ...