JSFiddle - React, Tailwind, and code Playground
JavaScript
var el = document.createElement('div');
el.style.position = 'fixed';
el.style.width = '100px';
el.style.height = '100px';
el.style.background = '#000';
var tp = document.createElement('div');
tp.style.position = 'fixed';
tp.style.margin = '45px 0 0 45px';
tp.style.width = '10px';
tp.style.height = '10px';
tp.style.borderRadius = '5px';
tp.style.background = '#f00';
var cPosX = Math.ceil(Math.random()*(window.innerWidth-100));
var cPosY = Math.ceil(Math.random()*(window.innerHeight-100));
var tPosX = cPosX;
var tPosY = cPosY;
var step = 4;
var mPosX = 0;
var mPosY = 0;
document.onmousemove = function(e){
mPosX = e.clientX;
mPosY = e.clientY;
}
el.onmouseover = function(){
rad = Math.atan2(tPosX-cPosX,tPosY-cPosY);
if( rad < 0){
rad += 2*Math.PI;
}
dist=0;
deg = rad*(180/Math.PI);
if( Math.abs(mPosX-cPosX) < Math.abs(mPosX-(cPosX+100)) ){
direction = 'l';
dist = Math.abs(mPosX-cPosX);
}else{
direction = 'r';
dist = Math.abs(mPosX-(cPosX+100));
}
if( Math.abs(mPosY-cPosY) < Math.abs(mPosY-(cPosY+100)) ){
if( dist > Math.abs(mPosY-cPosY) ){
direction = 't';
}
}else{
if( dist > Math.abs(mPosY-(cPosY+100)) ){
direction = 'b';
}
}
switch(direction){
case 'l':
deg =...