The illusion of man jumping with keydown

Question

So I am trying to make a little page where you can get a man to jump over a box, its all in CSS and jQuery.

I have made it so if you press the right arrow key the whole background is moving left and the other way around on left arrow key, to make the illusion that the man is moving. Know when you hit space I change the man bottom position to make I look like he is jumping.

But when I hit space it stops the moving effect so the man is just jumping straight up an down.

My html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>The man!</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery1.10.2.js"></script>
<script type="text/javascript" src="main_script.js"></script>
</head>
<body>
    <div id="canvas">
        <div id="grass"></div>
        <div id="box"></div>
        <div id="man"></div>
    </div>
</body>
</html>

My CSS:

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#canvas {
    position: relative;
    min-width: 2500px;
    height: 100%;
}

#grass {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: green;
}

#box {
    position: absolute;
    bottom: 100px;
    left: 2000px;
    width: 100px;
    height: 100px;
    background: brown;
}

#man {
    position: fixed;
    bottom: 100px;
    left: 500px;
    width: 73px;
    height: 161px;
    background-image: url(images/mand.png);
    background-repeat: no-repeat;
    background-position: 0 0;
        -webkit-transition: bottom 0.5s ease-in-out;
        -moz-transition: bottom 0.5s ease-in-out;
        -ms-transition: bottom 0.5s ease-in-out;
        -o-transition: bottom 0.5s ease-in-out;
        transition: bottom 0.5s ease-in-out;
}

And my script:

    $( document ).ready(function() {

    });

    $(document).keydown(function(event) {
    console.log("Key pressed: " + event.keyCode);

    if(event.keyCode == 39) {
        event.preventDefault();
        $("#canvas").animate({
        marginLeft: "-=10px"
      }, 1)
    }

    if(event.keyCode == 37) {
        event.preventDefault();
        if($("#canvas").css('margin-left') < '0px') {
            $("#canvas").animate({
            marginLeft: "+=10px"
            }, 1)
        }
    }

    if(event.keyCode == 32) {
        event.preventDefault();
        setTimeout(function() {
        $("#man").css("bottom", "300px");
        setTimeout(function() {
        $("#man").css("bottom", "100px");
        },500);},0); 
    }
});

I have also made a little fiddle of it: JSFiddle

@ManuelRicharz - That is not working, the jumping still stops the backgrounds animation. — Legarndary, Feb 04 '14 at 10:55
You want to capture more keys at the same time. so you have to bind keydown and keyup events and build a key-stack. from this keystack you can handle your actions. in keydown you add the pressed key into your key-stack. with keyup you remove the key from key-stack. i'll make a demo. — Manuel Richarz, Feb 04 '14 at 11:02
pressing the space bar often and fast lets your person fly -- cheatmode — john Smith, Feb 04 '14 at 11:19

score 3 · Answer 1 · answered Feb 04 '14 at 11:13

You need a running loop. In my example i used a setTimeout with 10ms but this is not the best solution. better use animationFrame for something like this.

but this should give you an beginning point of what you want:

bind keydown and keyup to build a keyStack:

var keyStack = {};

$(document).keydown(function (e) {
    keyStack[e.keyCode] = true;
});

$(document).keyup(function (e) {
    delete keyStack[e.keyCode];
});

generate a loop to run your game:

updateCanvas = function() {
    //... your code to update your canvas

    //create a loop
    setTimeout(updateCanvas, 10);
}

and start your loop:

updateCanvas();

example: http://jsfiddle.net/Valtos/89mQc/6/

This is a really good awnser, i just like Tonys setup a little better, sorry, but thank you for your time :) — Legarndary, Feb 04 '14 at 14:05

score 2 · Accepted Answer · edited May 23 '17 at 10:29

It's seems it can't send call event handler for 2 down keys at the same time. It is normal actually (see more details here: JavaScript multiple keys pressed at once). You need to handle keyDown and keyUp events for switching "running" state like this (pseudocode! see woking example in fiddle below):

$(document).keydown(function(event) {
    // switch your man to a "running" state
    startRunning();
})
.keyup(function(event) {
    // switch to a "hold" state
    stopRunning();
});

Full demo.

score 0 · Answer 3 · answered Feb 04 '14 at 11:05

So with mine I have added the up arrow as jump as well.

So the play that I get working is tap the up arrow. Then repress left. So if it was already held down let go and repress.

Fiddle

if(event.keyCode == 32 || event.keyCode == 38) {
    event.preventDefault();
    $("#man").animate({
        bottom: 300
    }, 1000, "linear", function () {
        setTimeout(function () {
            $("#man").animate({
                bottom: 100
            }, 1000);
        }, 500);
    });
}

The illusion of man jumping with keydown

My html:

My CSS:

And my script:

3 Answers3