Déplacement div horizontalement alors qu'il se déplace verticalement

Question

Je suis en train de créer un jeu, un jeu de plateforme. J'ai déjà le personnage qui se déplace horizontalement, cependant, je ne sais pas vraiment comment je vais le faire sauter ... et bouger en même temps.

J'ai décidé de ne pas utiliser jQuery animate pour déplacer le personnage, donc je ne sais pas comment activer le personnage en même temps qu'un saut. J'ai vu un exemple de saut parfait et de déplacement avec jQuery sur ce JSFiddle, mais il utilise animate.

Comment puis-je faire le saut de caractère (en douceur), et pouvoir se déplacer en saut en même temps (sans utiliser Animer)?

J'ai un CodePen (CSS dans le stylo est SCSS, mais il est ici CSS), mais voici le code de toute façon:

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>

Quelqu'un peut-il s'il vous plaît aider?

Answer 1

Vous pouvez ajouter un transition: 0.5s à votre classe .player, cela facilitera le mouvement. Je considèrerais aussi utiliser css translate pour déplacer l'objet car changer les appels en haut, à gauche, à droite et en bas permet d'effectuer un redessin qui entraînera la chute des images en fin de course.

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

Voici une lecture agréable sur l'animation perfomance: http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/

si vous voulez "tomber" après le saut, vous aurez également besoin d'ajouter du code pour que

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