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!

Hi marcus try looking in this other questions. The problem is similar you can adapt to your own needs. http://stackoverflow.com/questions/5203407/javascript-multiple-keys-pressed-at-once — MRodrigues, May 27 '16 at 15:10

Will · Accepted Answer · 2016-05-27T20:37:42.213

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:

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.
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);

My answer is simply to help the OP prevent his extra event being fired. — Will, May 27 '16 at 19:02
@markE - I understood what you said and that's what I said also: "You could have used a variable and set it to zero or 39 - 40." — Will, May 27 '16 at 20:05
Thanks for this answer, and sorry for my late reply, been a crazy weekend. Now i can continue on this project, thanks to your help! — Marcus, May 29 '16 at 10:28

score 0 · Answer 2 · answered May 27 '16 at 15:12

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);

Html5 canvas game moving x, y

2 Answers2