Html5 Leinwand Spiel bewegt x, y

Question

Ich habe meinen Code zu arbeiten, und Sie können ein Element mit den Pfeiltasten steuern. Allerdings möchte ich nur, dass sich mein Element von oben nach unten, von links nach rechts bewegt. Also, wenn ich UP drücke, sollte ich nicht in der Lage sein, RECHTS gleichzeitig zu drücken (strafing). Aber ich bin mir nicht sicher, wie ich das verhindern kann? Wer kann mich in die richtige Richtung bringen?

Wie ich meine Bewegung überprüfen,

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

Ich bin sicher, dass es eine einfache Lösung ist, aber ich habe an diesem zu lange gesucht, so dass alle Genauigkeiten in der richtigen Richtung wären toll!

Answer 1

I miqdadamirali Antwort mag, aber mal sehen, ob wir es ein bisschen vereinfachen können.

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

Zwei Annahmen hier:

1. Der Codeblock, der die Bewegungs tut, ist jedes Mal ein keydown Ereignis ausgelöst wird, genannt. Ich nehme an, dass Sie hier zur Veranschaulichung zeigen.
2. Auf der Basis Ihrer Beschreibung kann immer nur ein Objekt auf einmal verschoben werden. Daher sollten wir im Objekt "keysDown" immer nur eine Eigenschaft haben. Sie könnten eine Variable verwendet haben und ihn auf Null setzen oder 39 - 40.

EDIT:

Um die noch vereinfachte Version zu zeigen, hier ist der 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

Vor allem mit dem zweiten Schlüssel zu tun, überprüfen Sie es möglich ist, diese zu bewegen

Versuchen:

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