在javascript / html5游戏中仅使用2个按钮移动3个​​不同的垂直位置

Question

我是html5游戏和javascript的新手，我需要一些帮助。

我正在创建一个简单的2D迷你游戏，但我遇到了问题。有了职位。

我有3个不同的垂直位置（或3行）， p_top ， p_mid 和 p_bot 。我的任务是用两个按钮移动这些位置的球。

我的按钮只是向上和向下箭头。如果我按向上，我将红球向上移动一个位置，如果我按向下，我将红色球向下移动一个位置。

问题： 如果球位于 p_bot 并且我想按向上，则会转到 p_top 。如果球位于 p_top 并按向下，则会转到 p_bot 。

我该如何解决这个问题？这就是我正在做的事情。我不太确定我在 update（）; 上的算法是不是很好，或者它们的关键事件监听器是否有问题。

//Keyboard event listener
var keysDown = {};

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

var update = function(){
    if(38 in keysDown) { //key UP
        if(ball.y == p_bot){
            ball.y = p_mid; 
        }
        if(gninja.y == p_mid){
            ball.y = p_top;
        }
    }
    if(40 in keysDown) { //key DOWN
        if(ball.y == p_top){
            ball.y = p_mid;
        }
        if(gninja.y == p_mid){
            ball.y = p_bot;
        }
    }
};

Answer 1

第一个问题是你的更新是快速调用的，你没有看到中间pos，因为当你在keysDown对象中按下键时，它总是在，并且更新全部是〜16ms对吗？

第一个解决方案：

如果你想要玩家必须按2次从机器人到最高，你应该只使用这样的密钥 删除keydown侦听器，删除keyup中的delete：

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

然后在更新检查时删除密钥

if ( 40 in keysDown )
{
  delete keysDown[ 40 ];
  // do you old stuff here should work
}

第二个解决方案：

否则，如果你想使用keydown，你可以使用时间戳来防止事件更新比你看到的更快（并且它更舒服，因为你可以调整它）。

在更新功能之前

var lastCheck = Date.now();
function update()
{
  if ( Date.now() - lastCheck > 200 ) // 200 is 200ms, tweak this
  {
    // old stuff inside
  }
}

提示：

然后一个提示我可以给你不使用如果如果你喜欢和寻找更好的解决方案在这种情况下你可以使用数组并保存你的位置索引只是移动这个索引

var pos = [ 10, 50, 150 ]; // 10 is top pos and 150 bot pos
var currentPosId = 0; // player y is pos[ currentPosId ]

然后在你更新功能中你检查键并执行currentPosId ++或 - 我让你找到如何做（如果你以后添加其他pos，它将更适合调整和添加位置）。