javascript - 使div在动画到顶部时返回到其原始位置(如跳跃效果)

Question

这是我的代码:

var pane = $('#Container'),
        box = $('#PLayer'),
        w = pane.width() - box.width(),
        d = {},
        x = 3;

    function newv(v, a, b) {
        var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
        return n < 0 ? 0 : n > w ? w : n;
    }

    $(window).keydown(function (e) { d[e.which] = true; });
    $(window).keyup(function (e) { d[e.which] = false; });

    setInterval(function () {
        box.css({
            left: function (i, v) { return newv(v, 37, 39); },
            top: function (i, v) { return newv(v, 38, 40); }
        });
    }, 20);

    <div id="Container" class="Container">
    <div id="PLayer"  class="player" ></div>
      </div>

通过这段代码，我设法使用箭头键使 div 具有动画效果，但是我怎样才能实现跳跃效果呢？就像使用的here

Answer 1

这是您的 fiddle fork 的链接:

http://jsfiddle.net/dJut2/

我做了两处更改:

1. Jquery 希望 top 在 .css(...) 内使用 2 参数回调时具有初始值，因此我在 CSS 中将其设置为 50%: .player{ ... top :50%； }

2. 我在输入响应/碰撞函数中使用另一个三元检查添加了“重力”。它检查 38/向上键是否作为输入大小写传递，并将 2 添加到顶部: ... + (a==38 ? 2 : 0)

   <

顺便说一句，详细的变量名称或注释确实可以使您的代码更易于阅读。此外，三元运算符不如某些 if 语句高效或可读。最后，您应该将输入响应和碰撞功能分解为特定情况，以便稍后可以分别对它们进行专门编辑，而无需重构。

最后，如果您想模拟“跳跃”，则需要某种定时输入情况。这可以通过加速度变量自动完成(将其设置为一个数字，每帧从顶部减去它，并在地面上时每帧地板在 0 处递减；在这种情况下可以删除我添加的重力)或一些一种特定的动画(每帧减去 4，即 20 帧)。