JS双人RPS游戏3秒倒计时后0.5s按键时间窗实现问题求助

问题根因 #

你当前代码无法实现时间窗效果的核心原因有两个：

• 0.5秒时间窗结束后没有解绑键盘事件，导致按键响应会一直生效，没有做到时间窗关闭的效果
• 计数器逻辑和事件绑定/解绑的时机不匹配，导致时间窗的触发和终止没有对应上

修复后代码 #

var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');
var timer = setInterval(timerFunc, 1000);
var counter = 0;

// 单独抽离按键处理函数，方便后续绑定和解绑
function handleKeyPress(e) {
    if(e.keyCode == 49){
        p1.innerHTML = 'scissors';
    }else if(e.keyCode == 50){
        p1.innerHTML = 'paper';
    }else if(e.keyCode == 51){
        p1.innerHTML = 'rock';
    }else if(e.keyCode == 56){
        p2.innerHTML = 'scissors';
    }else if(e.keyCode == 57){
        p2.innerHTML = 'paper';
    }else if(e.keyCode == 48){
        p2.innerHTML = 'rock';
    }
}

function timerFunc() { 
    document.getElementById("timer").innerHTML=counter < 3 ? 3 - counter : "";
    if (counter == 3) {
        // 倒计时结束，绑定按键事件，开启0.5秒时间窗
        document.body.onkeyup = handleKeyPress;
        clearInterval(timer);
        counter++;
        timer = setTimeout(timerFunc, 500);
        return;
    } else if (counter == 4) {
        // 0.5秒时间窗结束，解绑按键事件，关闭响应
        document.body.onkeyup = null;
        clearTimeout(timer);
        // 此处可扩展胜负判断逻辑
        return;
    }
    counter++;
}

核心修改说明 #

• 把按键处理逻辑抽成了单独的handleKeyPress函数，不需要修改你原来的if else按键判断逻辑，也不需要用到addEventListener就能实现绑定和解绑
• 在counter等于3（3秒倒计时结束）的时候绑定按键事件，开启响应时间窗
• 在counter等于4（0.5秒时间窗结束）的时候直接把document.body.onkeyup赋值为null，解绑事件，后续按键就不会再触发出拳逻辑，符合时间窗的要求
• 修复了counter等于4的分支里没有提前return的问题，避免counter被额外累加影响逻辑

内容的提问来源于stack exchange，提问作者bambie vE