<h3>¡Atrápame, si puedes!</h3>
<section id="contenedor">
  <div id="fantasma">
    <div class="ojo"></div>w<div class="ojo"></div>
  </div>
</section>  
h3 {
  text-align: center;
}

#contenedor {
  position: relative;
  width: 560px;
  height: 300px;
  margin: 0 auto;
  background-color: #333;
}

#fantasma {
  /*Position*/
  position: absolute;
  left: 250px;
  top: 100px;
  width: 50px;
  height: 60px;
  /*Form*/
  background-color: white;
  border-radius: 30px 30px 0px 0px;
  border-bottom: 4px dashed #333;
  font-family: "Lucida Console", Monospace;
}

.ojo {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 4px solid #333;
  margin: 15px 3px 3px 3px;
}
$("#contenedor").mousemove(function(event) {
  let posx = event.pageX - $(this).offset().left;
  let posy = event.pageY - $(this).offset().top;
  let fanx = parseInt($('#fantasma').css("left")) + 25;
  let fany = parseInt($('#fantasma').css("top")) + 30;
  if (distancia(posx, fanx, posy, fany) < 120) {
    let valx = Math.floor((Math.random() * 510) + 1);
    let valy = Math.floor((Math.random() * 235) + 1);
    if (distancia(posx, valx, posy, valy) >= 150) {
      $("#fantasma").fadeOut("fast", function() {
        $('#fantasma').css("left",valx+"px");
        $('#fantasma').css("top",valy+"px");
      });
      $("#fantasma").fadeIn("slow", function(){});
    } 
  }
});

function distancia(x1, x2, y1, y2) {
  return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js