The illusion of man jumping with keydown

StackOverflow https://stackoverflow.com/questions/21549724

  •  06-10-2022
  •  | 
  •  

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

Était-ce utile?

La solution 2

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.

Autres conseils

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/

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);
    });
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top