Reputation: 346
I've been trying to program a pingpong game without jQuery (challenge from Software Design teacher), and am planning on using onkeypress
to move the paddles. However, I'm not sure how to attach a specific key to the function specified in the event handler.
It's not terribly relevant, but here's my code:
HTML:
<div id="Paddle1" class="paddle" onkeypress="PaddleMovement1(event)"></div>
<div id="Paddle2" class="paddle" onkeypress="PaddleMovement3(event)"></div>
JavaScript:
var PaddleMovement1 = function(){
document.getElementById('Paddle1Up').style.animationPlayState="running";
setTimeout(Paddle1Stop1, 25)
var Paddle1Stop1 = function(){
document.getElementById('Paddle1Up').style.animationPlayState="paused";
};
};
var PaddleMovement2 = function(){
document.getElementById('Paddle1Down').style.animationPlayState="running";
setTimeout(Paddle1Stop2, 25)
var Paddle1Stop2 = function(){
document.getElementById('Paddle1Down').style.animationPlayState="paused";
};
};
var PaddleMovement3 = function(){
document.getElementById('Paddle2Up').style.animationPlayState="running";
setTimeout(Paddle2Stop1, 25)
var Paddle2Stop1 = function(){
document.getElementById('Paddle2Up').style.animationPlayState="paused";
};
};
var PaddleMovement4 = function(){
document.getElementById('Paddle2Down').style.animationPlayState="running";
setTimeout(Paddle2Stop2, 25)
var Paddle2Stop2 = function(){
document.getElementById('Paddle2Down').style.animationPlayState="paused";
};
};
Finally, the complete thing can be found in this jsfiddle:
Upvotes: 0
Views: 1056
Reputation: 1075925
keypress
is only fired for keypresses that result in typeable characters, not other keys. To detect other keys, use keydown
and keyup
. This should be fairly clear from the specification:
A user agent must dispatch this event when a key is pressed down, if and only if that key normally produces a character value.
This page is a handy guide to the madness that is keyboard events in JavaScript across browsers...
Separately, for your purposes I'd probably trap the events on document
rather than on a specific element (keydown
and keyup
bubble, so that works).
For example:
(function() {
if (document.addEventListener) {
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keydown", keyUpHandler, false);
}
else if (document.attachEvent) {
document.attachEvent("onkeydown", function() {
keyDownHandler(window.event);
});
document.attachEvent("onkeydown", function() {
keyUpHandler(window.event);
});
}
else {
// If you want to support TRULY antiquated browsers
document.onkeydown = function(event) {
keyDownHandler(event || window.event);
};
document.onkeyup = function(event) {
keyUpHandler(event || window.event);
};
}
function keyDownHandler(e) {
var key = e.which || e.keyCode;
display("keydown: " + key);
}
function keyDownHandler(e) {
var key = e.which || e.keyCode;
display("keyup: " + key);
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
})();
Upvotes: 2