垂直移動水平移動div

Question

我目前正在創建一個遊戲，一個平臺遊戲。我已經有角色水平移動，但是，我不知道我會如何讓他跳躍......並同時移動。

我決定不使用jQuery animate來移動角色，因此我不知道如何讓角色在跳躍的同時移動。我見過這個JSFiddle上的完美跳躍和移動jQuery的例子，但它使用animate。

我該如何讓角色跳躍（順利），和 能夠同時跳動（不使用動畫）？

我有一個CodePen（中筆CSS是SCSS，但它的CSS在這裏），但這裏是代碼反正：

var game_anim = function() { 
 

 
\t var level = [ 
 
\t \t [0, 1, "l", 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, "l", "l", 1], 
 
\t \t [0, 0, 0, 0, 2, 2, 2, 2, 2, 2], 
 
\t \t [0, 0, 0, 0, 0, 3, 3, 0, 3], 
 
\t ]; 
 

 
\t var $player = $(".player"); 
 
\t var $game = $(".game"); 
 

 
\t $(document).keydown(function(event) { // keycodes: left = 37, right = 39 
 
\t \t if (event.which == 39 || event.which == 68) { // right arrow or D 
 
\t \t \t if ($player.position().left < $game.width() - $player.width()) { 
 
\t \t \t \t $player.css("left", "+=10"); 
 
\t \t \t } 
 
\t \t } 
 
\t \t if (event.which == 37 || event.which == 81 || event.which == 65) { // left arrow or Q on AZERTY or A on QWERTY 
 
\t \t \t if ($player.position().left > 0) { 
 
\t \t \t \t $player.css("left", "-=10"); 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t if (event.which == 38) { 
 
\t \t \t if ($player.position().top > 0) { 
 
\t \t \t \t $player.css("top", "-=10"); 
 
\t \t \t } 
 
\t \t } 
 

 
\t }); 
 

 
\t 
 

 
} 
 

 
$(document).ready(function() { 
 

 
\t game_anim(); 
 

 
});

.game { 
 
    position: absolute; 
 
    left: calc((100% - 800px)/2); 
 
    height: 500px; 
 
    width: 800px; 
 
    border: 2px solid black; 
 
} 
 

 
.block { 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
} 
 

 
.stone { 
 
    background-color: black; 
 
} 
 

 
.lava { 
 
    background-color: red; 
 
} 
 

 
.player { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: #3747C0; 
 
    bottom: 0; 
 
    position: absolute; 
 
} 
 
.player .eyes { 
 
    border-radius: 50%; 
 
    background-color: white; 
 
    position: absolute; 
 
    height: 10px; 
 
    width: 10px; 
 
} 
 
.player .eye_R { 
 
    left: 7px; 
 
    top: 10px; 
 
} 
 
.player .eye_L { 
 
    left: 32px; 
 
    top: 10px; 
 
} 
 
.player .mouth { 
 
    height: 8.5px; 
 
    width: 32px; 
 
    background-color: white; 
 
    border-radius: 5px; 
 
    left: calc((50px - 32px)/2); 
 
    bottom: 10px; 
 
    position: absolute; 
 
} 
 

 
.ypos-0 { 
 
    bottom: 0px; 
 
    position: absolute; 
 
} 
 

 
.ypos-1 { 
 
    bottom: 50px; 
 
    position: absolute; 
 
} 
 

 
.ypos-2 { 
 
    bottom: 100px; 
 
    position: absolute; 
 
} 
 

 
.ypos-3 { 
 
    bottom: 150px; 
 
    position: absolute; 
 
} 
 

 
.ypos-4 { 
 
    bottom: 200px; 
 
    position: absolute; 
 
} 
 

 
.ypos-5 { 
 
    bottom: 250px; 
 
    position: absolute; 
 
} 
 

 
.ypos-6 { 
 
    bottom: 300px; 
 
    position: absolute; 
 
} 
 

 
.ypos-7 { 
 
    bottom: 350px; 
 
    position: absolute; 
 
} 
 

 
.ypos-8 { 
 
    bottom: 400px; 
 
    position: absolute; 
 
} 
 

 
.xpos-0 { 
 
    left: 0px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-1 { 
 
    left: 50px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-2 { 
 
    left: 100px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-3 { 
 
    left: 150px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-4 { 
 
    left: 200px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-5 { 
 
    left: 250px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-6 { 
 
    left: 300px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-7 { 
 
    left: 350px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-8 { 
 
    left: 400px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-9 { 
 
    left: 450px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-10 { 
 
    left: 500px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-11 { 
 
    left: 550px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-12 { 
 
    left: 600px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-13 { 
 
    left: 650px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-14 { 
 
    left: 700px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-15 { 
 
    left: 750px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-16 { 
 
    left: 800px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-17 { 
 
    left: 850px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.xpos-18 { 
 
    left: 900px; 
 
    /*position: absolute;*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class = "game"> 
 
\t <div class = "player"> 
 
\t \t <div class = "eyes eye_R"></div> 
 
\t \t <div class = "eyes eye_L"></div> 
 
\t \t <div class = "mouth"></div> 
 
\t </div> 
 
</div>

是否有人可以幫忙嗎？

Answer 1

您可以向您的.player類添加transition: 0.5s，這將平滑移動。我還會考慮使用css translate來移動對象，因爲改變頂部，左側，右側和底部的調用會導致重繪，從而導致幀下降。

http://www.w3schools.com/css/css3_transitions.asp

這裏的動漫性能比較不錯讀： http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/

，如果你想跳，你還需要爲

if (event.which == 38) { 
    if ($player.position().top > 0) { 
     $player.css("top", "-=10"); 
     setTimeout(function(){ 
      $player.css("top", "+=10"); 
     }, 500); //500 since I suggested 0.5s in css transition 
    } 
}