samedi 12 janvier 2019

destination

<html>
<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:&nbsp;&nbsp;"+sw+"px<br>svg height: "+sh+"px<br>circle cx:&nbsp;&nbsp;"+cx+"px<br>circle cy:&nbsp;&nbsp;"+cy+"px<br>dest. x:&nbsp;&nbsp;&nbsp;&nbsp;"+dx+"px<br>dest. y:&nbsp;&nbsp;&nbsp;&nbsp;"+dy+"px";

function fdest(){
dx=event.clientX;
dy=event.clientY;
update.innerHTML="svg width:&nbsp;&nbsp;"+sw+"px<br>svg height: "+sh+"px<br>circle cx:&nbsp;&nbsp;"+cx+"px<br>circle cy:&nbsp;&nbsp;"+cy+"px<br>dest. x:&nbsp;&nbsp;&nbsp;&nbsp;"+dx+"px<br>dest. y:&nbsp;&nbsp;&nbsp;&nbsp;"+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:&nbsp;&nbsp;"+sw+"px<br>svg height: "+sh+"px<br>circle cx:&nbsp;&nbsp;"+cx+"px<br>circle cy:&nbsp;&nbsp;"+cy+"px<br>dest. x:&nbsp;&nbsp;&nbsp;&nbsp;"+dx+"px<br>dest. y:&nbsp;&nbsp;&nbsp;&nbsp;"+dy+"px";
}
setInterval(adv,1);

</script>
</body>
</html>

By -