Javascript 弹跳球动画没有'；行不通_Javascript_Jquery_Css_Animation

Javascript 弹跳球动画没有'；行不通

javascript jquery css animation

Javascript 弹跳球动画没有'；行不通,javascript,jquery,css,animation,Javascript,Jquery,Css,Animation,我想创建一个简单的弹跳球。每当我按下向上箭头键时，球就会升高并落下。我实现了一个可变的“重力”，它降低了球的速度。好吧，那很有效。但在一次又一次单击向上箭头键之后，动画速度越来越快。我不明白为什么，因为我刚刚开始编程，而且我还没有真正的经验下面是HTML和CSS的代码 <html> <head> <style> #objekt{ width:20px; height:20px;

我想创建一个简单的弹跳球。每当我按下向上箭头键时，球就会升高并落下。我实现了一个可变的“重力”，它降低了球的速度。好吧，那很有效。但在一次又一次单击向上箭头键之后，动画速度越来越快。我不明白为什么，因为我刚刚开始编程，而且我还没有真正的经验

下面是HTML和CSS的代码

<html>  
<head>
    <style>
        #objekt{
            width:20px;
            height:20px;
            background-color: blue;
            position:absolute;
            border-radius: 100%;
        }
        #line{
            width:100%;
            height:1px;
            background-color:black;
            position:absolute;
            top:220px;
        }
    </style>
    <script type = "text/javascript" src = "jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
        var objekt = $("#objekt");
        var x = 30;
        var y = 200;
        var vely = -3;
        var velx = 1;
        var gravity = 0.05;
        var bounce = -3;

        $(document).on("keydown", function(e){
            if(e.which == 38){  
                setInterval(function jumpObjekt(){
                    y += vely;
                    vely += gravity;
                    console.log(vely);
                    if(y > 200) vely = bounce;
                    if(bounce < 0){
                        bounce = bounce + 0.01;
                    } else {
                        bounce = 0;
                    }
                }, 10);
                vely = -3;
            }
        });

        setInterval(function(){
            objekt.css({
                    top: y,
                    left: x,
            });
        },10);
    });
    </script>
</head>

<body>
    <div id = "objekt"></div>
    <div id = "line"></div>
</body>


#目标{
宽度：20px；
高度：20px；
背景颜色：蓝色；
位置：绝对位置；
边界半径：100%；
}
#线{
宽度：100%；
高度：1px；
背景色：黑色；
位置：绝对位置；
顶部：220px；
}
$（文档）.ready（函数（）{
var objekt=$（“#objekt”）；
var x=30；
变量y=200；
var=-3；
var-velx=1；
var重力=0.05；
var bounce=-3；
$（文档）.on（“向下键”，函数（e）{
如果（e.which==38）{
setInterval（函数jumpObjekt（）{
y+=0；
重力+=重力；
console.log（fly）；
如果（y>200）y=bounce；
如果（反弹<0）{
反弹=反弹+0.01；
}否则{
反弹=0；
}
}, 10);
vely=-3；
}
});
setInterval（函数（）{
objekt.css({
上图：y，
左:x,，
});
},10);
});

您需要将

setInterval

函数指定给一个变量，这样每次按向上箭头键后就可以

clearInterval

您还需要在keydown函数中初始化

bounce

变量

更新的JS

var bounceHandler;
$(document).on("keydown", function(e){
    if(e.which == 38){  
        clearInterval(bounceHandler);
        var bounce = -3;
        bounceHandler = setInterval(function jumpObjekt(){
            y += vely;
            vely += gravity;
            console.log(vely);
            if(y > 200) vely = bounce;
            if(bounce < 0){
                bounce = bounce + 0.01;
            } else {
                bounce = 0;
            }
        }, 10);
        vely = -3;
    }
});

var-bounceHandler；
$（文档）.on（“向下键”，函数（e）{
如果（e.which==38）{
净空间隔（弹跳手柄）；
var bounce=-3；
bounceHandler=setInterval（函数jumpObjekt（）{
y+=0；
重力+=重力；
console.log（fly）；
如果（y>200）y=bounce；
如果（反弹<0）{
反弹=反弹+0.01；
}否则{
反弹=0；
}
}, 10);
vely=-3；
}
});

你能用代码添加一个JSFIDLE吗？@MarkHill只需编辑问题并自己添加一个即可。提供的所有代码都应该足以提供帮助。