What happens: Pressing the space button causes the ball to move up and then stop. When pressed again, it moves down.
What I need: I want the ball to move up and then move down when I press the space button!
I'm trying to figure out how to repeat this action twice with just one click. It seems simple enough; I attempted to loop the function twice when the space bar is pressed, but it didn't work as expected. Any suggestions?
var body = document.getElementById('body');
var basketball = document.getElementById('basketball');
var x = 0;
var y = 0;
var counter = 0;
var inc = Math.PI / 100;
body.addEventListener('keydown',function(e){
var ek = e.which;
if(ek==32){
for( var i = 0; i<=1 ;i+=0.01){
x+=i;
y+= Math.sin( counter );
counter+=inc;
basketball.style.left=x;
basketball.style.bottom=y;
}
}
});* {
transition: all 1s;
}
#basketball {
width: 75px;
position: absolute;
bottom: 0;
left: 10;
}<html>
<head>
<link rel="stylesheet" href="css/index_style.css">
<title>Basket</title>
</head>
<body id="body">
<img src="https://thumbs.dreamstime.com/b/basketball-ball-transparent-checkered-background-realistic-vector-illustration-91566559.jpg" id="basketball">
<script src="js/mine.js"></script>
</body>
</html>