垂直移动div时水平移动div

Question

I am currently creating a game, a platformer. I already have the character moving around horizontally, however, I do not really know how I will make him jump... and move at the same time.

I decided not to use jQuery animate to move the character around, therefore I have no idea how to enable the character to move at the same time as a jump. I have seen an example of perfect jumping and moving with jQuery on this JSFiddle , however it uses animate .

How can I make the character jump (smoothly), and be able to move while jump at the same time (without using animate)?

I have a CodePen (the CSS in the Pen is SCSS, but it's CSS here), but here is the code anyways:

 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> 

Can someone please help?

Answer 1

You can add a transition: 0.5s to you .player class, this will smooth the movement. I'd also consider using css translate to move the object since changing top, left, right and bottom calls a redraw which will cause frame drops latter down the rode.

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

Here's a nice read on animation perfomance: http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/

if you want to "fall" after jumping you'll also need to add code for that

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