<head>
<meta charset="UTF-8">
<style>
html,body{height:100%;margin:0;}
body{font-size:12px;font-family:consolas;overflow:hidden;background:#252525;color:#fff;}
div{position:absolute;top:0;left:0;z-index:-1;opacity:0.5;}
</style>
<title>Game</title>
</head>
<body>
<svg width="0" height="0" id="mysvg" onclick="fdest(event)">
<circle cx="0" cy="0" r="4" id="c1" fill="#fff"/>
</svg>
<div id="update">info</div>
<script>
var mysvg=document.getElementById("mysvg");
var c1=document.getElementById("c1");
var update=document.getElementById("update");
var sw=window.innerWidth;
var sh=window.innerHeight;
var cx=sw/2;
var cy=sh/2;
var dx=sw/2;
var dy=sh/2;
mysvg.setAttribute("width",sw);
mysvg.setAttribute("height",sh);
c1.setAttribute("cx",cx);
c1.setAttribute("cy",cy);
update.innerHTML="svg width: "+sw+"px<br>svg height: "+sh+"px<br>circle cx: "+cx+"px<br>circle cy: "+cy+"px<br>dest. x: "+dx+"px<br>dest. y: "+dy+"px";
function fdest(){
dx=event.clientX;
dy=event.clientY;
update.innerHTML="svg width: "+sw+"px<br>svg height: "+sh+"px<br>circle cx: "+cx+"px<br>circle cy: "+cy+"px<br>dest. x: "+dx+"px<br>dest. y: "+dy+"px";
}
function adv(){
if(cx<dx){cx=cx+1};if(cx>dx){cx=cx-1};
if(cy<dy){cy=cy+1};if(cy>dy){cy=cy-1};
c1.setAttribute("cx",cx);
c1.setAttribute("cy",cy);
update.innerHTML="svg width: "+sw+"px<br>svg height: "+sh+"px<br>circle cx: "+cx+"px<br>circle cy: "+cy+"px<br>dest. x: "+dx+"px<br>dest. y: "+dy+"px";
}
setInterval(adv,1);
</script>
</body>
</html>
