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: ``` The man!

``` My CSS: ``` html, body { height: 100%; } body { margin: 0; padding: 0; overflow: hidden; } #canvas { position: relative; min-width…

Accepted Answer

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.

The illusion of man jumping with keydown

Solution

Problem

Related problems