// Setup

///////////////////////////////////////////////

​

var red = {};

red.id = '#red';

red.x = 180;

red.y = 150;

red.width = 50;

red.height = 50;

​

var blue = {};

blue.id = '#blue';

blue.x = 50;

blue.y = 90;

blue.width = 50;

blue.height = 50;

​

$(document).on('mousemove', handleMouseMove);

​

// core logic

///////////////////////////////////////////////

​

function handleMouseMove(event) {

    // get the mouse location from the event object

    moveBlueSquare(event.pageX, event.pageY);  

    if (doCollide(red, blue)) {

        showResult(true);

    } else {

        showResult(false);

    }

}

​

// Helper Functions

///////////////////////////////////////////////

​

function moveBlueSquare(x, y) {

    blue.x = x

    blue.y = y

    $(blue.id).css('left', blue.x);

    $(blue.id).css('top', blue.y);

}

​

function doCollide(square1, square2) {

    blue.leftX = blue.x;

    blue.topY = blue.y;

    blue.rightX = blue.x + blue.width;

    blue.bottomY = blue.y + blue.height;

    // TODO: Do the same for square2

    red.leftX = red.x;

    red.topY = red.y;

    red.rightX = red.x + red.width;

    red.bottomY = red.y + red.height;

    // TODO: Return true if they are overlapping, false otherwise

  if (blue.rightX > red.leftX && blue.leftX < red.rightX && blue.bottomY > red.topY && blue.topY < red.bottomY){

    $('#blue').css('background', 'yellow')

    $('#red').css('background', 'green')

    return true;

    }

  else {

    $('#blue').css('background', 'blue')

    $('#red').css('background', 'red')

    return false;

  }

}

​

function showResult(result) {

    $("h2").text('doCollide: ' + result);

    $("h3").text('Mouse Position: ' + blue.x + ' ,' + blue.y);

}

​

​

​

​

​