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

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 に答える