垂直移动水平移动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 
    } 
}