JSFiddle - React, Tailwind, and code Playground

HTML

<div id="GameWorld" style="width:500px;height:500px;background:red">
 <img src='http://i.imgur.com/DTBufEC.png' id='c' class="abs" style='left:0;top:0'>
           <img src='http://i.imgur.com/Pox4KFe.png' style="position:absolute;left:150px;top:150px">
            
 </div>

CSS

#c{transition:0.5s all ease-in-out}
.abs{position:absolute}

JavaScript

gameworld  = document.getElementById('GameWorld');
character  = document.getElementById('c');

gameworld.addEventListener('click', function(e){
    var offsetX = e.offsetX;
    var offsetY = e.offsetY;
    
    var element = e.target;
    
    while (element !== gameworld) {
        offsetX += element.offsetLeft;
        offsetY += element.offsetTop;
        element = element.parentNode;
    }
    
    character.style.left = offsetX + 'px';
    character.style.top = offsetY + 'px';
});