Html5 canvas game moving x, y

Question

I got my code to work, and you can control an element using the arrow keys. However, i only want my element to move up-down-left-right. So when i press UP, i should not be able to press RIGHT at the same time (strafing). But I'm not sure how to prevent this? Anyone that can put me in the right direction?

How i check my movement,

// Tracking keys
var keysDown = {};

// Moving the player around on the map            
if(39 in keysDown)  { player.x+=gameSettings.speed; } // Move Right
if(37 in keysDown)  { player.x-=gameSettings.speed; } // Move Left 
if(38 in keysDown)  { player.y-=gameSettings.speed; } // Move Up
if(40 in keysDown)  { player.y+=gameSettings.speed; } // Move Down

addEventListener('keydown', function(e) {
   keysDown[e.keyCode] = true; 
}, false);

addEventListener('keyup', function(e) {
   delete keysDown[e.keyCode]; 
}, false);

I'm sure there is an easy solution, but I've been looking at this too long, so any pinpoints in the right direction would be great!

Answer 1

I like miqdadamirali's answer, but lets see if we can simplify it a bit.

Try this:

// Tracking keys
var keysDown = {};

// Moving the player around on the map            
if(39 in keysDown)  { player.x+=gameSettings.speed; } // Move Right
if(37 in keysDown)  { player.x-=gameSettings.speed; } // Move Left 
if(38 in keysDown)  { player.y-=gameSettings.speed; } // Move Up
if(40 in keysDown)  { player.y+=gameSettings.speed; } // Move Down

addEventListener('keydown', function(e) {
   // we only want to set the key if it's empty
   if (Object.keys(keysDown).length === 0) {
       keysDown[e.keyCode] = true;
       // call the function to make the actual movement
   }
}, false);

addEventListener('keyup', function(e) {
   delete keysDown[e.keyCode]; 
}, false);

Two assumptions here:

1. The block of code that does the moving is called every time a keydown event is fired. I assume you are showing here for illustration purpose.
2. Based on your description, there can only be one moving at a time, so we should only have one property in the keysDown object at any time. You could have used a variable and set it to zero or 39 - 40.

EDIT:

To illustrate the even more simplified version, here's the code.

// Tracking keys
var keyPressed = 0;

// Moving the player around on the map            
if(keyPressed === 39)  { player.x+=gameSettings.speed; } // Move Right
if(keyPressed === 37)  { player.x-=gameSettings.speed; } // Move Left 
if(keyPressed === 38)  { player.y-=gameSettings.speed; } // Move Up
if(keyPressed === 40)  { player.y+=gameSettings.speed; } // Move Down

addEventListener('keydown', function(e) {
   // we only want to set the key if keyPressed is zero
   if (keyPressed === 0) {
       keyPressed = e.keyCode;
       // call the function to make the actual movement
   }
}, false);

addEventListener('keyup', function(e) {
   keyPressed = 0;
}, false);

Answer 2

Before doing anything to the second key, check it is possible to move

Try This:

// Tracking keys
var keysDown = {};
var canMove = true; // If it can move.

// Moving the player around on the map            
if(39 in keysDown)  { player.x+=gameSettings.speed; } // Move Right
if(37 in keysDown)  { player.x-=gameSettings.speed; } // Move Left 
if(38 in keysDown)  { player.y-=gameSettings.speed; } // Move Up
if(40 in keysDown)  { player.y+=gameSettings.speed; } // Move Down

addEventListener('keydown', function(e) {
   if (canMove) {
      keysDown[e.keyCode] = true; 
      canMove = false;
   }
}, false);

addEventListener('keyup', function(e) {
   if (keysDown[e.keyCode]) { 
        delete keysDown[e.keyCode]; 
        canMove = true;
   }
}, false);