javascript - 单击箭头按钮时如何更快地移动矩形？

Question

如何在单击箭头按钮时使矩形像往常一样移动得更快，然后由于我将手指移开，它应该再次以正常值移动。

这是我的代码的样子，包括动画功能:我试图增加 x、y 值，但它立即跳到另一个方 block

Answer 1

与其让玩家以 60 的恒定速度移动，不如尝试让它以可变速度变化。 IE。

var speed = 60;

...


case 'east':
    gameState.playerPosition.x +=speed;
    break;
case'west':
    gameState.playerPosition.x -=speed;
    break;
case'north':
    gameState.playerPosition.y -=speed;
    break;
case'south':
    gameState.playerPosition.y +=speed;

然后不是改变 keyup 的方向，而是改变 keydown 的方向和速度。然后，当 keyup 事件触发时，将速度改回正常。

document.addEventListener('keydown', event => {
    speed = 120;
    if(event.key==='ArrowRight'){
        gameState.direction = "east";
    }else if(event.key==='ArrowLeft'){
       gameState.direction = "west"
    }else if(event.key === 'ArrowUp'){
       gameState.direction = "north"
    }else if(event.key === 'ArrowDown'){
       gameState.direction = "south"
    }
    console.log('Key ' + event.key + ' was pressed.'); 
});   

document.addEventListener('keyup', event => {
    speed = 60;
});