Question

会发生什么：当我按下空格键时，球会向上移动并停止；再按一次，球就会向下移动。

我需要什么：当我按下空格键时，球应该先向上然后向下移动！

我想要一些如何一键重复两次此功能的方法。按下空格键时，我尝试了两次循环，但是它没有按我预期的那样工作。有什么建议吗？

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>

Answer 1

尝试一下（该函数自行调用）：

var body = document.getElementById('body');
var basketball = document.getElementById('basketball');

var x = 0;
var y = 0;
var counter = 0;
var inc = Math.PI / 100  ;

function bounce(e, norecall){
    var ek = e.which; 
    console.log('keydown');
    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; 
        }
            
    }

    if (!norecall) { //only runs the first time (when norecall == undefined)
        bounce(e, true)
    }

}

body.addEventListener('keydown',bounce); //call bounce on keypress

*
{
    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>

这是通过调用bounce来调用函数undefined。 !norecall就是true，因此函数会自行调用，这次是norecall是true，因此不会再次调用该函数，因此模拟了被按下的鼠标两次，即可解决问题。

Answer 2

无需循环和填充，您只需使用css并添加一个将bottom从0更改为一个类，然后在一段时间后使用setTimeout将其删除（您需要点击示例，这样它将获得焦点和关键事件。

var body = document.getElementById('body');
var basketball = document.getElementById('basketball');


body.addEventListener('keydown',function(e){
   basketball.classList.add('up');
   setTimeout(function(){
      basketball.classList.remove('up'); 
   }, 300);
});

#basketball
{
    transition: all 1s;
    width: 75px;
    position: absolute;
    bottom: 0;
    left: 10;
}

#basketball.up {
  bottom: 25px;
}

<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>

简单的篮球运动Javascript

2 个答案: