hi I am trying to make a game like online bowling and I can not get the ball to lunch correctly in js. when I click on it the ball goes the wrong way or off the screen
var xup
var yup
var x = 50;
var y = 95
document.onmouseup = function(e){
xup = -(e.pageX/screen.width)
yup = -(e.pageY/screen.height)
let d = setInterval(function(){
x += xup
y += yup
document.getElementById("player").innerHTML = '<circle id="ball" cx="'+x+'%" cy="'+y+'%" r="1%" fill="url(#ball)" />'
if(y<=20){
d=null
}
},10)
}<svg style='position: absolute;left: 0;top: 1%;' width='100%' height='100%'>
<defs>
<radialGradient id="ball" cx="50%" cy="25%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#ff00ff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#800080;stop-opacity:1" />
</radialGradient>
</defs>
<g id="player">
<circle id="ball" cx="50%" cy="95%" r="1%" fill="url(#ball)" />
</g>