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

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

http://jsfiddle.net/dJut2/

我做了两处修改：

在.css（...）中使用2参数回调时，Jquery希望top有一个初始值，所以我在CSS中将它设置为50％：.player{ ... top: 50%; }
< / LI>
我在输入响应/碰撞功能中使用另一个三元检查添加了“重力”。它会检查38 / up-key是否作为输入案例传递，并在顶部添加2：... + (a==38 ? 2 : 0)

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

最后，如果你想模拟'跳'，你需要有一些定时输入的情况。这可以通过加速变量自动完成（将其设置为一个数字，从每个帧的顶部减去它，并在地面时将每个地板的地板减少到0;在这种情况下我添加的重力可以被移除）或者一些一种特定的动画（每帧减去4帧20帧）。

Answer 2

如果你想做一些类似于你联系的平台游戏（这很棒），为什么不直接查看它的源代码呢？ 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;

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

当动画到顶部时（如跳跃效果）使div返回到它的原始位置

2 个答案: