x:50 y:50
<br />
<!--more-->
<style>
html,body{
height:100%;
margin:0;
overflow:hidden;
}
body{
font-family:arial;
background:#333;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
p{
margin:0;
color:#f00;
}
svg{
border:1px solid #333;
}
</style>
<title>Path generator</title>
<body>
<svg height="500" id="mySVG4" width="1080">
<circle cx="50" cy="50" fill="#333" id="ball" r="10"/>
</svg>
<div id="posi">
x:50 y:50</div>
<script>
var x=50;
var y=50;
function UPClick(){
if(y>10){
document.getElementById("ball").setAttribute("cy",y=y-10);
document.getElementById("posi").innerHTML="x:"+x+" y:"+y;
}}
function DOClick(){
if(y<490){
document.getElementById("ball").setAttribute("cy",y=y+10);
document.getElementById("posi").innerHTML="x:"+x+" y:"+y;
}}
function LEClick(){
if(x>10){
document.getElementById("ball").setAttribute("cx",x=x-10);
document.getElementById("posi").innerHTML="x:"+x+" y:"+y;
}}
function RIClick(){
if(x<1070){
document.getElementById("ball").setAttribute("cx",x=x+10);
document.getElementById("posi").innerHTML="x:"+x+" y:"+y;
}}
document.addEventListener('keydown',(event)=>{
const keyName=event.key;
if(keyName=="ArrowUp"){UPClick();}
if(keyName=="ArrowDown"){DOClick();}
if(keyName=="ArrowLeft"){LEClick();}
if(keyName=="ArrowRight"){RIClick();}
});
</script>
