Detect multiple keys pressed to move a "character/player"

Question

I have an example of what I have got so far here (example 1), you'll need to click on the 'result' window so the keys will move the character (w, a, s and d keys move the character), also bear in mind that this has not been browser tested and only works in a select few modern browsers.

I can now get the image to move up/down/left/right as wanted and depending on the 'health' it moves a particular speed, and using a good example I found it rotates along with the mouse too, so it works in a birds eye view styled game.

Now, I'm a little confused about how I can get the image to move diagonally, I've tried using multiple if statements linking the possible combinations of keys, but it always takes the last key pressed.

I don't really know how to tackle the problem, do I need to put them in some sort of while loop to say while a certain key is pressed move it in that direction? Would that eliminate the need for the diagonal/multiple key press?

    if ((key == key_W && key == key_D) || (key == key_w && key == key_d) || (key == key_W && key == key_d) || (key == key_w && key == key_D)) {

        // Player Up/Right

    }

Or do I need to set some sort of array to generate a list of keys pressed?

I understand and I'm fully aware making games in Javascript/jQuery isn't the best method to make games, it's an experiment more than anything.

EDIT

There is now have a more workable, moving character here (example 2), but there is a delay in the movement, so to expand on my question, is there anyway to reduce this?

Hehe - its fun just to make the little guy run around. cool project. For people checking this out use WASD to move character and it follows mouse too. — mrtsherman, Oct 18 '11 at 16:06
As an aside I could only get this working in IE9, not Chrome or Firefox. — Andy Rose, Oct 18 '11 at 16:11
@Jleagle - you're correct, yes it does although not in Firefox. — Andy Rose, Oct 18 '11 at 16:15
@AndyRose It's probably because I'm using the CSS3 `rotate` which could be causing problems. And I haven't checked it for x-browser compatibility yet. But thank you for point it out :) — no., Oct 18 '11 at 16:38

score 4 · Accepted Answer · edited May 23 '17 at 12:12

4

Well this looks like a fun project so it got me curious and I started to look around. I found an article on Quirksmode that talks about using keycode vs character code. I see that you are detecting both upper and lower case letters. The following blurb seems to indicate that this is unnecessary. This article also has important docs on browser compatibility and special key compatibility between browsers and systems. For instance, the command button on a Mac keyboard. What is it? How is it detected and behaves in various browsers?

for instance, a lower case 'a' and an upper case 'A' have the same keyCode, because the user presses the same key, but a different charCode because the resulting character is different.

http://www.quirksmode.org/js/keys.html

So then the question becomes, how do you detect multiple key presses. I found this SO answer on it that is remarkably simple and straightforward.

Can jQuery .keypress() detect more than one key at the same time?

var keys = {};

$(document).keydown(function (e) {
    keys[e.which] = true;
});

$(document).keyup(function (e) {
    delete keys[e.which];
})

Update

Basically I just brought in the code from above, deleted your diagonal code and iterated over the keys array for all movement operations.

http://jsfiddle.net/mrtsherman/8NW2K/3/

edited May 23 '17 at 12:12

Community

1
1

answered Oct 18 '11 at 16:16

mrtsherman

39,342
23
87
111

Oh, in case it isn't obvious, what I expect you would do is keep all currently pressed keys in the keys array. Then iterate over the array and calculate a move event for each one. I guess technically you could do weird stuff like press up and down simultaneously, resulting in no movement. – mrtsherman Oct 18 '11 at 16:21
Updated Fiddle with an example. – mrtsherman Oct 18 '11 at 16:28
Ah, that works! Thank you! I'll probably need to tweak it around a little to make things smoother somehow, but this definitely gets the ball rolling a bit more! I'll wait and see if there are any other answers given with other solutions before I jumped in a mark as top, but this is very appreciated! – no. Oct 18 '11 at 16:34
@HelloJoe - yeah, i noticed that the behavior when switching between key combos is not smooth. I'm not sure why that happens. If you find a fix please post it because I would love to see it! – mrtsherman Oct 18 '11 at 17:07
I will do :) It's strange because if you refresh, and press S and D together, then release S (keeping D pressed), it will smoothly carry on just going from down/right to just right. But then after that it has the delay. I'm thinking it could be something with the `keyup` and it deleting itself. I'm not entirely sure though, I'll keep trying, it's fun messing around with it all haha – no. Oct 18 '11 at 17:24

score 3 · Answer 2 · edited Feb 24 '15 at 22:14

3

Jwerty is a great library which handles this sort of thing, i suggest you check it out:

https://keithamus.github.io/jwerty/

It's compatible with jQuery too!

edited Feb 24 '15 at 22:14

Keithamus

1,819
17
21

answered Oct 18 '11 at 16:08

472084

17,666
10
63
81

This looks interesting, this could definitely come in handy at some point, thank Jleagle :) – no. Oct 18 '11 at 16:35

Detect multiple keys pressed to move a "character/player"

2 Answers2