JSFiddle - React, Tailwind, and code Playground

HTML

<img id="point" src="http://forum.linux-club.de/images/avatars/gallery/smilies/fi_av_smiles_y_57.gif" style="position:absolute" />

CSS

body{
    margin:0;
    padding:0;
}

JavaScript

document.addEventListener('keydown', function(event) {
	var el = document.getElementById('point');
	var increment = 20;
	switch(event.keyCode){
		case 37: //left
			var pos = ((el.offsetLeft-increment) > 0 ) ? el.offsetLeft - increment : 0;
			el.style.left = pos + "px";		
			break;
		case 38: //up
			var pos = ((el.offsetTop - increment) > 0 ) ? el.offsetTop - increment : 0;
			el.style.top = pos + "px";		
			break;
		case 39: //right
			var pos = ((el.offsetLeft + increment) < window.innerWidth - el.width ) ? el.offsetLeft + increment : window.innerWidth - el.width;
			el.style.left = pos + "px";
			break;
		case 40: //down
			var pos = ((el.offsetTop + increment) < window.innerHeight - el.height ) ? el.offsetTop + increment : window.innerHeight - el.height;
			el.style.top = pos + "px";
			break;
	}
});