Question

我让我的代码工作，你可以使用箭头键控制元素。但是，我只希望我的元素向上 - 向左 - 向右移动。所以当我按下UP时，我不能同时按下RIGHT（扫射）。但我不确定如何防止这种情况？谁能让我朝着正确的方向前进？

我如何检查我的动作，

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

我确信有一个简单的解决方案，但我一直在考虑这个问题太久了，所以正确方向上的任何精确定位都会很棒！

Answer 1

我喜欢miqdadamirali的答案，但让我们看看我们是否可以简化它。

试试这个：

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

这里有两个假设：

每次触发keydown事件时都会调用执行移动的代码块。我假设你出现在这里是为了说明目的。
根据您的描述，一次只能有一个移动，所以我们应该随时在keysDown对象中只有一个属性。您可以使用变量并将其设置为零或39 - 40。

修改

为了说明更简化的版本，这里是代码。

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

在对第二个键执行任何操作之前，请检查是否可以移动

试试这个：

// 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帆布游戏移动x，y

2 个答案: