JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed"></div>
<div class="fixed a2"></div>
<div class="my"></div>

<code></code>

CSS

div {
    position:absolute;
    width:10px;
    height:10px;
    background:#f00;
}
.fixed {
    transform : translate(200px,200px);
    -webkit-transform : translate(200px,200px);
    background:#000;
}
.fixed.a2 {
    transform : translate(100px,240px);
    -webkit-transform : translate(100px,240px);
}
.my {
    transform : translate(170px, 180px);
    -webkit-transform : translate(170px, 180px);
}


@keyframes blink {
    0% {opacity:1;}
    50% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes blink {
    0% {opacity:1;}
    50% {opacity:0;}
    100% {opacity:1;}
}
.blink {
    animation:blink 0.5s infinite;
    -webkit-animation:blink 0.5s infinite;
}

JavaScript

var my = $('.my');
		var speed = 5;

		save_position();
		// setInterval(move, 100);
		var keys = {};

		$(document).on('keydown',function(e) {
		    my.addClass('blink');
		    var code = (e.keyCode ? e.keyCode : e.which);
		    keys[code] = true;
		    move();
		});

		$(document).on('keyup',function(e) {
		    my.removeClass('blink');
		    var code = (e.keyCode ? e.keyCode : e.which);
		    delete keys[code];
		});

		function save_position(x,y) {
		    if(x&&y) {
		        my.data('x',x).data('y',y);
		    } else {
		        var xy = my.css('-webkit-transform') || my.css('transform');
		            xy = xy.substr(7, xy.length - 8).split(', ');
		        my.data('x',xy[4]).data('y',xy[5]);
		    }
		}

		function move() {

		    for (var direction in keys) {
		        if (!keys.hasOwnProperty(direction)) continue;
		        var x = parseInt(my.data('x'));
		        var y = parseInt(my.data('y'));
		        if (direction == 38) {
		            y = y-speed;
		        }
		        if (direction ==  40) {
		            y = y+speed;
		        }
		        if (direction == 37) {
		            x = x-speed;
		        }
		        if (direction == 39) {
		            x = x+speed;
		        }
		        var over = false;
		        if(!over) {
		            my.css('transform','translate('+x+'px,'+y+'px)');
		            save_position(x,y);
		        }
		    }

			var objTop = my.offset().top,
				objLeft = my.offset().left,
				objWidth = my.width(),
				objHeight = my.height();			

			$('.fixed').each(function(e){
				var self = $(this),
					selfLeft = self.offset().left,
					selfTop = self.offset().top,
					selfWidth = self.width(),
					selfHeight = self.height();

				self.css('background','black');					

				if((objLeft + objWidth) > selfLeft && objLeft < (selfLeft + selfWidth) && (objTop + objHeight) > selfTop && objTop < (selfTop + selfHeight)){
					self.css('background','blue');
				}

			});

		}