Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

The illusion of man jumping with keydown

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

like image 566
Legarndary Avatar asked Feb 04 '14 10:02

Legarndary


2 Answers

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/

like image 172
Manuel Richarz Avatar answered Nov 02 '22 03:11

Manuel Richarz


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.

like image 34
Tony Avatar answered Nov 02 '22 03:11

Tony