讓一個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> 

這段代碼我設法通過使用箭頭鍵使格動畫卻怎麼也我做那跳躍效應？像使用here

Answer 1

在這裏，一個是你的小提琴叉子鏈接：

http://jsfiddle.net/dJut2/

我做了兩個變化：

1. jQuery的希望頂部有一個初始值，同時使用在.css（...）中的2參數回調，所以我把它設置爲CSS中的50％：.player{ ... top: 50%; }

2. 我在輸入響應/碰撞函數中使用另一個三元檢查來添加「重力」。它檢查針對38 /向上鍵是否爲輸入的情況下通過，並增加了2到頂端：... + (a==38 ? 2 : 0)

順便說一句，冗長的變量名稱或意見能真正讓你的代碼更易於閱讀。另外，三元運算符不如一些if語句那樣高效或可讀。最後，您應該將輸入響應和碰撞功能分解爲特定情況，以便您可以稍後專門編輯它們，而不必重構。

最後，如果你想模擬一個'跳'，你需要有某種定時輸入的情況。這可以通過一個加速度變量自動完成（將其設置爲一個數字，從每一幀的頂部減去它，並在地面上將每個地板的地板減至0;我添加的重力可以在這種情況下移除）或一些一種特定的動畫（每20幀減去4幀）。

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; 

這類似於如何大多數遊戲引擎的工作原理，重新計算的情況下，迫使每一幀使他們可以不斷地對發生的事情做出反應。物理引擎不是動畫，而是在數學上做相應的事情，並在屏幕上相應地移動東西。