我如何设置事件监听器并防止密钥垃圾邮件

Question

我正在制作一款 2D 格斗游戏。仅使用 javascript、css 和 html 我被困在如何防止攻击按钮被疯狂发送垃圾邮件上。如果我每秒按攻击键 5 次，它也会注册并播放动画。我想将密钥寄存器限制为每 750 毫秒 1 次。

我将如何做到这一点？我认为这与时间戳有关，但我无法理解逻辑

这是我没有限制的：

window.addEventListener('keydown', (event) =>{
    switch (event.key) {
        case ' ':
            if (player_1.position.x < (player_2.position.x + 25))
                {player_1.attack_player_1()
                // setTimeout(() => {sword_swing.play()},200)}
                setTimeout(() => {sfx_player_1.sword_swing.play()},200)}
            else {player_1.attack_player_1_reversed()
                setTimeout(() => {sfx_player_1.sword_swing.play()},200)
            }
            break
        }
    });

Answer 1

我假设您可能需要多个函数的时间间隔，为此您必须使用单独的变量跟踪每个函数的时间间隔，而不是我创建了一个 class 以将其用作减速助手。这是一个示例，您可以在代码中对其进行编辑。

class slowDown {
    constructor(cb,timeGap){
        this.last = 0
        this.run = function(){
            let current = Date.now(),
                shouldRun = (current - this.last) >= timeGap
            if(shouldRun){
                cb(current - this.last)
                this.last = current
            }            
        }
    }
}

// example use
const press = new slowDown(timeElapsed => {
    // define function here which you wanted to slow down
    console.log("pressed after " + timeElapsed + " ms")
},750)

window.addEventListener("keydown",()=>{
    press.run()
})

Answer 2

它加深了您期望的行为。如果你按下开火键并继续按下你就会发动攻击。一种解决方案是限制@svarog 在你的问题下的评论中已经告诉的内容。

另一种解决方案是在按下按钮后仍然阻塞 a) 它按下另一个按钮或 b) 设置超时，例如 1 秒，超时已过期。

在任何情况下，我更愿意使用 e.keyCode 而不是 e.key。

例子

document.onkeydown = check 
let lastKeyCode = '';
function check(e) {
    if (e.keyCode == 32) {  

      if(lastKeyCode == 32) return false;
      // do something
      lastKeyCode = 32;
    }

    /// other events
}

我如何设置事件监听器并防止密钥垃圾邮件

how do i set an eventlistener and prevent key spamming

javascript

event-listener