The arrow key events fire only onkeydown
and not onkeypress
, so you might consider changing the event.
Hope this helps ;)
質問
I am building a game, and using JQuery for my event listeners. I find that the .on()
method would be suitable for what I am doing, but I can't seem to get both of my listeners to work in conjunction as planned.
I'm also not entirely sure to what I should be registering the .on()
calls to, so that might be my problem, as I am just using the $(document)
call.
Here is how I have my listeners setup:
$(document).ready(function(){
$(document).on("keypress", function(key){
switch(parseInt(key.which, 10)){
case AKey:
case LeftArrow:
player.move(Left);
break;
case DKey:
case RightArrow:
player.move(Right);
break;
}
});
$(document).on("keyup", function(key){
switch(parseInt(key.which, 10)){
case UpArrow:
case Spacebar:
player.shoot();
break;
}
});
});
Here is a JSFiddle to see it in action.
Please help!
解決
The arrow key events fire only onkeydown
and not onkeypress
, so you might consider changing the event.
Hope this helps ;)
他のヒント
Have you tried like this:
$(document).ready(function(){
$(document).on("keypress, keyup", function(key){
switch(parseInt(key.which, 10)){
case UpArrow:
case Spacebar:
player.shoot();
break;
case AKey:
case LeftArrow:
player.move(Left);
break;
case DKey:
case RightArrow:
player.move(Right);
break;
}
});
});
One thing to be aware of is keypress
will fire when a key is pressed and released, keydown
fires when a key is pressed, and keyup
fires when a key is released. I would imagine you'd want movement to occur using keydown
, and use keypress
for shooting.
I built a key binding library for this kind of thing, called keys.js. Check it out if you want something with a friendlier API.
You should not need to parse the key code.
This answer is just for fun / reference. Key codes are from here.
<html>
<head>
<title>UberkeyDetector</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var keys = {
backspace:8,
tab:9,
enter:13,
shift:16,
ctrl:17,
alt:18,
pause:19,
caps_lock:20,
escape:27,
page_up:33,
page_down:34,
end:35,
home:36,
left_arrow:37,
up_arrow:38,
right_arrow:39,
down_arrow:40,
insert:45,
delete:46,
_0:48,
_1:49,
_2:50,
_3:51,
_4:52,
_5:53,
_6:54,
_7:55,
_8:56,
_9:57,
a:65,
b:66,
c:67,
d:68,
e:69,
f:70,
g:71,
h:72,
i:73,
j:74,
k:75,
l:76,
m:77,
n:78,
o:79,
p:80,
q:81,
r:82,
s:83,
t:84,
u:85,
v:86,
w:87,
x:88,
y:89,
z:90,
left_window:91,
right_window:92,
select_key:93,
numpad_0:96,
numpad_1:97,
numpad_2:98,
numpad_3:99,
numpad_4:100,
numpad_5:101,
numpad_6:102,
numpad_7:103,
numpad_8:104,
numpad_9:105,
multiply:106,
add:107,
subtract:109,
decimal_point:110,
divide:111,
f1:112,
f2:113,
f3:114,
f4:115,
f5:116,
f6:117,
f7:118,
f8:119,
f9:120,
f10:121,
f11:122,
f12:123,
num_lock:144,
scroll_lock:145,
semi_colon:186,
equal_sign:187,
comma:188,
dash:189,
period:190,
forward_slash:191,
grave_accent:192,
open_bracket:219,
back_slash:220,
close_braket:221,
single_quote:222,
};
(function($){
$(document).ready(function() {
function whichKey( code ) {
for (var k in keys) {
if (keys[k] == code) return k;
}
return 'idk: '+code;
};
function say(ev, key) {
console.log(ev, key);
//$(document).append( ev + ' ' + key);
};
$(document).on("keypress", function(key){ say('keypress', whichKey( key.which) ); });
$(document).on("keyup", function(key){ say('keyup', whichKey( key.which) ); });
$(document).on("keydown", function(key){ say('keydown', whichKey( key.which) ); });
});
})(jQuery)
</script>
</head>
<body>
wot?
<form action="none">
<textarea id="none" name="none" cols="80" rows="10">
</textarea>
</form>
</body></html>