js - 使用 onkeyup 的时间跨度

Question

我正在制作一款基本的 2 人 RPS 游戏，但我无法实现这个想法。

有一个 3 秒的倒计时计时器，一旦倒计时结束，必须有 0.5 秒的时间跨度才能按下按钮。但我无法弄清楚或找到如何制作时间跨度..

我当前的代码：

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

function timerFunc() { 
    document.getElementById("timer").innerHTML=counter < 3 ? 3 - counter : "";
    if (counter == 3) {

    document.body.onkeyup = function(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';
  }
}
        clearInterval(timer);
        counter++;
        timer = setTimeout(timerFunc, 500);
        return;
    } else if (counter == 4) {
        clearTimeout(timer);
    }
    counter++;
}

（代码已被编辑，我无法找出 keyups 的 addeventlisteners 所以我用 if else 做了它，即使它看起来超级混乱）

时间跨度仍然无法正常工作

Answer 1

var timer = setInterval(timerFunc, 1000);
var counter = 0;

function timerFunc() { 
    document.getElementById("timer").innerHTML=counter < 3 ? 3 - counter : "";
    if (counter == 3) {
        document.body.onkeyup == function() {} // 
        clearInterval(timer);
        counter++;
        timer = setTimeout(timerFunc, 500);
        return;
    } else if (counter == 4) {
        clearTimeout(timer);
    }
    counter++;
}

Answer 2

游戏完全正常运行，具有 3 秒倒计时和 0.5 秒点击时间跨度，可能看起来像这样：

const PLAYERS = {
    player1: {
        name: 'Player 1',
        keys: ['q', 'w', 'e'],
        throw: ['scissors', 'rock', 'paper'],
        played: false
    },
    player2: {
        name: 'Player 2',
        keys: ['r', 't', 'y'],
        throw: ['scissors', 'rock', 'paper'],
        played: false
    }
};

const PLAYERS_VALS = Object.values(PLAYERS);

let count = 3;
let countdown = document.querySelector('#countdown');
countdown.innerHTML = count;
let canPlay = false;

const PLAY = key => {
    PLAYERS_VALS.forEach((player, i) => {
        if (player.keys.includes(key) && player.played == false) { // DO WHATEVER ONCE X PLAYER CLICKS
            player.played = true; // PREVENT CHANGING CHOICE
            let idx = player.keys.indexOf(key);
            document.querySelector(`#player${i + 1}`).innerHTML = `${player.name} threw <b>${player.throw[idx]}</b>`;
        }
    });
};

let cntID;
const COUNTDOWN = () => {
    // ADD THE 3 SECONDS COUTDOWN
    cntID = setInterval(() => {
        count--;
        countdown.innerHTML = count;
        if (count === 0) {
            canPlay = true; // ALLOW THE CLICKS
            countdown.innerHTML = 'GO!';
            clearInterval(cntID); // STOP COUNTDOWN ONCE IT REACHES 0

            // ADD THE .5 SECONDS TIMESPAN TO CLICK
            setTimeout(() => {
                canPlay = false; // DISABLE THE CLICKS
                countdown.innerHTML = 'Ended.';
            }, 500);
        }
    }, 1000);
};

COUNTDOWN();

const RESTART = () => {
    count = 3;
    countdown.innerHTML = count;
    PLAYERS_VALS.forEach((player, i) => {
        player.played = false;
        document.querySelector(`#player${i + 1}`).innerHTML = `${player.name}`;
    });
    COUNTDOWN();
};


document.body.addEventListener('keydown', e => {
    if (canPlay) PLAY(e.key);
});

document.querySelector(`#restart`).addEventListener('click', e => {
    RESTART();
});

<div id="countdown"></div>
<div id="player1">Player 1</div>
<div id="player2">Player 2</div>
<button id="restart">Restart</button>

js - 使用 onkeyup 的时间跨度

js - timespan to use onkeyup

html

javascript

timer