0

这是我的代码：

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 动画，但我怎样才能使这种跳跃效果？就像这里使用的一样

4

2 回答 2

2

这是您的小提琴叉子的链接：

http://jsfiddle.net/dJut2/

我做了两个改变：

  1. Jquery 希望 top 在 .css(...) 中使用 2 参数回调时有一个初始值，所以我在 CSS 中将其设置为 50%：.player{ ... top: 50%; }

  2. 我在输入响应/碰撞函数中使用另一个三元检查添加了“重力”。它检查 38/up-key 是否作为输入 case 传递，并在顶部添加 2：... + (a==38 ? 2 : 0)

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

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

于 2013-07-16T16:01:50.150 回答
0

如果您想做与您链接的平台游戏类似的事情（这很棒），为什么不直接查看它的源代码呢？http://taffatech.com/Platformer.js 

if(Player.isUpKey == true)
{


if(!Player.jumping){
       Player.jumping = true;
       Player.velY = -Player.speed*2;
      }


}

如果你看那里，你会发现他实际上并没有使用 CSS 动画，而是在每一帧重新计算玩家的位置。如果玩家按下向上键，他们的 y 速度会增加，然后每一帧都会调用它来移动玩家

//gravity would be a numeric variable, this makes the player  constantly move 
//back downwards when they leave the ground

Player.velY += gravity;      

//adjusting the player's position according to new 
//calculated x and y velocity

Player.x += Player.velX;    
Player.y += Player.velY;

这类似于大多数游戏引擎的工作方式，重新计算场景并强制每一帧，以便它们可以不断地对正在发生的事情做出反应。物理引擎不是动画，而是进行数学运算并在屏幕上相应地移动事物。

于 2013-07-16T16:46:16.103 回答