Javascript Letter Key Binding

Question

I am trying to make these events happen when the D key ( for right movement ) and the A key ( for left movement ) but when I enter their correct key codes in the correct places it does not function when I press the D or S key to move. Can anyone tell me what is wrong? I'm using a recent version of Mozilla FireFox but I don't believe it's a requestAnimFrame problem.

document.onkeydown = function(e) { e = e || window.event; switch(e.which || e.keyCode) { case 37: leftpress = true; Context.clearRect( 0, 0, CanWidth, CanHeight ); // Clear the Canvas Context.fillStyle = 'green'; OldBackgroundX = BackgroundX; BackgroundX = BackgroundX + 5; Context.drawImage( FirstBackgroundImg, BackgroundX, BackgroundY, 1600, 800 ); Context.fillText( "You move left.", 200, 100 ); leftanimate = true; if ( jumppress == true ) { leftjump = true; } break; // case 38: // jump(); // up/jump //break; case 39: if ( rightpress == true ) { rightanimate = true; } /*console.log("You move right"); Context.fillStyle = 'green'; OldBackgroundX = BackgroundX; BackgroundX = BackgroundX - 20; Context.drawImage( FirstBackgroundImg, BackgroundX, BackgroundY, 1600, 800 ); Context.drawImage( ArrowRightImg, 400, 200 );// right Context.fillText( "You move right.", 200, 100 ); break; case 40: // down*/ break; default: return; // exit this handler for other keys } e.preventDefault(); // prevent the default action (scroll / move caret) }; document.onkeypress = function(event) { event = event || window.event; switch(event.which || event.keyCode) { case 32: jumppress = true; if ( jumppress == true ) { PJ = true; } if ( rightpress == true ) { archjump = true; } if ( leftpress == true ) { leftjump = true; } // up/jump break; /* * * Player Right Animation * * * */ var Animation; case 39: rightpress = true; if ( rightpress == true ) { Context.clearRect( 0, 0, CanWidth, CanHeight ); // Clear the Canvas //console.log("You move right"); Context.fillStyle = 'green'; BackgroundX = BackgroundX - 5; Context.drawImage( FirstBackgroundImg, BackgroundX, BackgroundY, 1600, 800 ); rightanimate = true; if ( jumppress == true ) { archjump = true; } } break; } } document.onkeyup = function(event) { event = event || window.event; switch(event.which || event.keyCode) { case 32: jumppress = false; break; case 39: rightpress = false; break; case 37: leftpress = false; } }

caseyWebb · Accepted Answer · 2014-03-31 15:57:57Z

You are using the wrong key codes to bind to WASD; the codes you are using correspond to the arrow keys themselves.

var KEY = { WASD_LEFT: 65, WASD_RIGHT: 68, WASD_UP: 87, WASD_DOWN: 83 } document.onkeydown = function (e) { switch (e.keyCode) { case KEY.WASD_LEFT: alert('Left'); break; case KEY.WASD_RIGHT: alert('Right'); break; case KEY.WASD_UP: alert('Up'); break; case KEY.WASD_DOWN: alert('Down'); break; default: return; // exit this handler for other keys } };

Here's a nice reference for JS key codes, and a fiddle for funsies.

Thanks. The A key works, but for some reason still the D right key will not work.
Try using document.onkeydown = function (e) { alert(e.keyCode); }; and click D to see what the code is
It is 68, I think I just have to have the correct event switch to get it to work.

Collectives™ on Stack Overflow

Javascript Letter Key Binding

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related