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;

}
}

Answer 1

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.