javascript - 在垂直移动的同时水平移动div

Question

我目前正在创建一款游戏，一款平台游戏。我已经让 Angular 色水平移动，但是，我真的不知道如何让他跳跃......并同时移动。

我决定不使用 jQuery animate 来移动 Angular 色，因此我不知道如何使 Angular 色在跳跃的同时移动。我在这个JSFiddle上看到了一个用jQuery完美跳跃和移动的例子，但是它使用 animate。

如何让 Angular 色跳跃(平滑)，和能够同时移动和跳跃(不使用动画)？

我有一个CodePen (Pen 中的 CSS 是 SCSS，但这里是 CSS)，但无论如何，这里是代码:

var game_anim = function() {

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

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

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

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

	});

	

}

$(document).ready(function() {

	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">
	<div class = "player">
		<div class = "eyes eye_R"></div>
		<div class = "eyes eye_L"></div>
		<div class = "mouth"></div>
	</div>
</div>

有人可以帮忙吗？

Answer 1

您可以向您的.player类添加一个transition: 0.5s，这将使移动更加平滑。我还考虑使用 css 翻译来移动对象，因为更改顶部、左侧、右侧和底部会调用重绘，这会导致帧在后面下降。

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
    }
}