平滑和快速的精靈動畫（CSS）

我想使用JavaScript/jQuery製作太空入侵者遊戲。現在我的問題是我無法讓飛船在屏幕上平穩移動。平滑和快速的精靈動畫（CSS）

我正在使用事件來更改sprite的CSS位置n像素。當我給它一個很高的價值時，精靈移動得很快但並不順利。當我選擇將精靈移動1px時，看起來更平滑，但速度很慢。任何想法如何處理它？

PS我不是問動畫庫。我只想用JavaScript/jQuery來實現它。

$(document).ready(function() { 
    var xPos, yPos; 

    var height = $(document).height(); 
    var width = $(document).width(); 

    function move(dir) { 
      console.log(height + "," + width); 
    xPos = parseInt($('#sprite').css('left')); 
    yPos = parseInt($('#sprite').css('top')); 

    switch (dir) { 
     case 'up': 
     if (yPos > 10) { $('#sprite').css('top', yPos - 10 + "px"); } 
     break; 
     case 'down': 
     if (yPos < height-140) { $('#sprite').css('top', yPos + 10 + "px"); } 
     break; 
     case 'left': 
     if (xPos > 10) { $('#sprite').css('left', xPos - 10 + "px"); } 
     break; 
     case 'right': 
     if (xPos < width-140) { $('#sprite').css('left', xPos + 10 + "px"); } 
     break; 
    } 
    } 

    $(document).keydown(function(event) { 
     var mykey = String.fromCharCode(event.which);   
     if (mykey == "W" || mykey == "w") { move('up'); } 
     if (mykey == "S" || mykey == "s") { move('down') } 
     if (mykey == "A" || mykey == "a") { move('left') } 
     if (mykey == "D" || mykey == "d") { move('right') }   
    }); 

});

來源

2015-05-14 Tomasz Cz.

這似乎是一個完美的用例帆布 – fcalderan

你應該真的考慮使用一些html5遊戲引擎（crafty.js）。你採取的方式只會讓你陷入痛苦和痛苦的世界。如果你不想考慮使用引擎，那麼你應該做一些緩解，即開始移動1px的值，只要你持有一些關鍵逐漸增加運動的速度，可以說，10px（這應該最大）每個時間間隔。那麼你需要一些摩擦來平穩停止。最後，如果你可以實現對角線運動，那將會很好。 – Drops

只需添加CSS3 transition你的船：

#sprite{ 
    -webkit-transition : all 0.4s ease-in-out; 
    -moz-transition : all 0.4s ease-in-out; 
    -o-transition : all 0.4s ease-in-out; 
    transition : all 0.4s ease-in-out; 
}

然而，animating with translate is better than position top/left（由保羅·愛爾蘭的文章）。

此外，通過緩存$('#sprite')與

var $sprite = $('#sprite'); 

function move(dir) { 
    xPos = parseInt($sprite.css('left')); 
    yPos = parseInt($sprite.css('top')); 
    ...

優化代碼如果你不這樣做（如代碼是目前），你強迫jQuery來走遍整個DOM很多次，每次一個鍵被按下。如果你這樣做，這艘船就會被緩存起來，所以jQuery不必每次都查找它。我建議你看看jQache以便輕鬆緩存。

來源

2015-05-14 07:49:08

平滑和快速的精靈動畫（CSS）

回答

相關問題