弹跳球动画不起作用答案

【问题标题】：Bouncing Ball Animation doesn't work弹跳球动画不起作用
【发布时间】：2015-12-11 20:43:25
【问题描述】：

我想创建一个简单的弹跳球。每当我按下向上箭头键时，球应该会变得更高并落下。我实现了一个变量“重力”，它降低了球的速度。嗯，这行得通。但是在一次又一次地点击向上箭头键之后，动画越来越快。我不明白为什么，因为我才刚开始编程，而且我还没有真正的经验。

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

【问题讨论】：

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

标签： javascript jquery css animation

【解决方案1】：

您需要将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;
    }
});

Working Demo using your code

【讨论】：