I'm trying to let a user move an element on the page using the arrow keys. So far, I have movement working for up/down/left/right, but not for diagonal (two arrow keys pressed simultaneously).
My listener looks like this:
addEventListener('keydown', function(e){
move = false;
x = false;
y = false;
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
switch(keycode){
case 37:
move = true;
x = 'negative';
//prevent page scroll
e.preventDefault()
break;
case 38:
move = true;
y = 'negative'
//prevent page scroll
e.preventDefault()
break;
case 39:
move = true;
x = 'positive'
//prevent page scroll
e.preventDefault()
break;
case 40:
move = true;
y = 'positive'
//prevent page scroll
e.preventDefault()
break;
}
if(move){
animation.move(x,y);
}
return false;
})
The idea was that if the user presses an arrow key, it sets x and y to either negative or positive, and fires off the move() function, which will move the element a preset number of pixels in the desired direction, and that if two keys were pressed, a second event would fire... I also hope to be able to have the user seemlessly change directions by releasing and pressing keys rapidly Neither of these are happening, however, if the user presses another direction key, they seem to need to wait a momment for movement to happen, unless they completely release the key and then press another one, and it won't respond to the second key at all until the first is released.
Fiddle: http://jsfiddle.net/ATUEx/
Create a temporary cache to remember your key strokes.
An implementation of handling two keys would follow this pattern:
<keydown>
- Clear previous time-out.
- Check whether the a key code has been cached or not.
If yes, and valid combination:
- Delete all cached key codes
- Execute function for this combination
else
- Delete all cached key codes
- Store the new key code
- Set a time out to clear the keycodes (see below), with a reasonable delay
- Repeat 1
A reasonable delay: Experiment to know which timeout is sufficient for you. When the delay is too short, the next initiated event will not find a previously entered key code.
When the delay is too long, the key strokes will stack when you don't want it.
Code
I have created an efficient function, keeping your code in mind. You should be able to implement it very easily.
(function(){ //Anonymous function, no leaks
/* Change the next variable if necessary */
var timeout = 200; /* Timeout in milliseconds*/
var lastKeyCode = -1;
var timer = null;
function keyCheck(ev){
var keyCode = typeof ev.which != "undefined" ? ev.which : event.keyCode;
/* An alternative way to check keyCodes:
* if(keyCode >= 37 && keyCode <= 40) ..*/
/*37=Left 38=Up 39=Right 40=Down */
if([37, 38, 39, 40].indexOf(keyCode) != -1){
/* lastKeyCode == -1 = no saved key
Difference betwene keyCodes == opposite keys = no possible combi*/
if(lastKeyCode == -1 || Math.abs(lastKeyCode - keyCode) == 2){
refresh();
lastKeyCode = keyCode;
} else if(lastKeyCode == keyCode){
clear([lastKeyCode]);
} else {
/* lastKeyCode != -1 && keyCode != lastKeyCode
and no opposite key = possible combi*/
clear([lastKeyCode, keyCode]);
lastKeyCode = -1
}
ev.preventDefault(); //Stop default behaviour
ev.stopPropagation(); //Other event listeners won't get the event
}
/* Functions used above, grouped together for code readability */
function reset(){
keyCombi([lastKeyCode]);
lastKeyCode = -1;
}
function clear(array_keys){
clearTimeout(timer);
keyCombi(array_keys);
}
function refresh(){
clearTimeout(timer);
timer = setTimeout(reset, timeout);
}
}
var lastX = false;
var lastY = false;
function keyCombi(/*Array*/ keys){
/* Are the following keyCodes in array "keys"?*/
var left = keys.indexOf(37) != -1;
var up = keys.indexOf(38) != -1;
var right = keys.indexOf(39) != -1;
var down = keys.indexOf(40) != -1;
/* What direction? */
var x = left ? "negative" : right ? "positive" : false;
var y = up ? "negative" : down ? "positive" : false;
/* Are we heading to a different direction?*/
if(lastX != x || lastY != y) animation.move(x, y);
lastX = x;
lastY = y;
}
//Add event listener
var eventType = "keydown";window["on"+eventType] = keyCheck;
})();
At the end of the anonymous function, the keydown event listener is added. This event is fired only once (when the key is pressed down). When a second key is pressed fast enough, the code recognises two key strokes after each other, and calls keyCombi().
I have designed keyCombi to be intelligent, and only call animation.move(x,y) when the values are changed. Also, I've implemented the possiblity to deal with two directions at a time.
Note: I have contained the functions within an anonymous function wrapper, so that the variables are not defined in the global (window) scope. If you don't care about scoping, feel free to remove the first and last line.
Here is your code for you, slightly revised ... http://jsfiddle.net/w8uNz/ It just WORKS. Moves element across the parent element.
Rob W is right, you should have a dynamic cache of keys being pressed down at a period of time. But for what ? if you are making a dynamic game - there must be much higher abstraction for that. And overall, you need to improve your level of coding if you want to do stuff like that. (Or it will just generate headaches for you.)
Logically this sounds rather simple:
- the first key triggers a key down event, store this event in a stack
- then the second key triggers a key down event, store this event in a stack
- now you have two key downs and no key up
- if a key up fires you have three possibilities
- you have only one event => go in that direction
- you have two events => go diagonally
- you have more than two events, or an invalid option (e.g. right and left) => do nothing, or whatever you feel like
- clear the stack
