JavaScript石头剪刀布：5局结束重置与emoji样式调整问题

问题1：5局限制+自动停止重置实现 #

• 不要用for循环实现：for循环是同步阻塞逻辑，运行时会锁死页面交互，根本无法响应逐次点击的用户操作，完全不适合这类事件触发的异步交互场景。
• 具体实现逻辑：
  1. 全局新增roundCount变量，初始值为0，用来记录已完成的总局数（平局也要计入局数），同时可以定义MAX_ROUND常量固定为5，后续要改局数直接改常量值即可。
  2. 每次用户点击选择按钮时，先判断当前局数是否已经达到上限，达到上限直接return终止逻辑，不执行游戏判定。
  3. 每完成一次胜负判定（不管结果是胜/负/平），就给roundCount加1。
  4. 局数累加到5时，先触发最终胜者判定，然后给所有选择按钮加disabled属性禁止继续点击，延迟1.5秒左右执行重置逻辑：把分数、局数计数归0，清空提示文本、胜者文本，恢复按钮可点击状态。
  5. 原有userScore++/computerScore++计分逻辑不需要调整，保持现有“只有分出胜负才加分、平局不加分”的规则即可。
• 补充原有胜者判定逻辑的bug修复：原逻辑是单一方到5分才判定胜者，适配5局规则后，5局打完直接对比双方分数，分高者胜，分数相等则判定平局。

问题2：放大提示文本中的emoji图标 #

• 不需要额外获取DOM操作样式，直接在拼接提示文本的时候，给emoji套上带内联样式的span标签即可，同时加上垂直对齐属性避免图标和文字错位：
  比如原有拼接写法：

  $showScore.innerHTML = "The machine chooses "+$icons[2]+", you BEAT him!";
  

  可以抽离公共拼接方法，避免每个分支重复写样式代码：

  const iconStr = (index) => `<span style="font-size: 1.8em; vertical-align: middle; margin: 0 4px;">${$icons[index]}</span>`;
  

  后续拼接时直接调用iconStr(下标)即可，font-size数值可以根据视觉效果自行调整。
• 如果不想写内联样式，也可以在CSS中为h5标签下的span统一设置样式，效果一致。

修改后完整可运行代码 #

JS代码 #

// Global DOM variables
const $selectBtn = document.querySelectorAll("[data-selector]");
const $displayUserScore = document.querySelector("#user-score");
const $DisplayComputerScore = document.querySelector("#computer-score")
const $showScore = document.querySelector("h5");
const $theWinnerIs = document.querySelector('#result-winner');
const $icons = ["🪨", "🧻", "✂️"];

// Game config variables
const choices = ["rock", "paper", "scissors"];
const MAX_ROUND = 5;
let userScore = 0;
let computerScore = 0;
let roundCount = 0;

// Bind click event for select buttons
$selectBtn.forEach(function(button){
    button.addEventListener("click", function() {
        // Stop logic when reach max round
        if (roundCount >= MAX_ROUND) return;

        let computerOption = computerRandom()
        const userOption = button.dataset.selector;
     
        playGame(userOption, computerOption);
        roundCount++;
        // Show winner only when game end
        if (roundCount === MAX_ROUND) {
            theWinner();
            $selectBtn.forEach(btn => btn.disabled = true);
            setTimeout(resetGame, 1500);
        }
        
        // Game judgment logic
        function playGame(userOption, computerOption) {
            // Common emoji render method
            const iconStr = (index) => `<span style="font-size: 1.8em; vertical-align: middle; margin: 0 4px;">${$icons[index]}</span>`;

            if (userOption === "rock") {
                if (computerOption === "scissors") {
                    userScore++;
                    $displayUserScore.innerHTML = userScore;
                    $showScore.innerHTML = `The machine chooses ${iconStr(2)}, you BEAT him!`;
                } else if (computerOption === "paper") {
                    computerScore++;
                    $DisplayComputerScore.innerHTML = computerScore;
                    $showScore.innerHTML = `The machine chooses ${iconStr(1)}, you LOSE!`;
                } else if (userOption === computerOption) {
                    $showScore.innerHTML = "Draw!";
                }
            }

            if (userOption === "paper") {
                if (computerOption === "rock") {
                    userScore++;
                    $displayUserScore.innerHTML = userScore;
                    $showScore.innerHTML = `The machine chooses ${iconStr(0)}, you BEAT him!`;
                } else if (computerOption === "scissors") {
                    computerScore++;
                    $DisplayComputerScore.innerHTML = computerScore;
                    $showScore.innerHTML = `The machine chooses ${iconStr(2)}, you LOSE!`;
                } else if (userOption === computerOption) {
                    $showScore.innerHTML = "Draw!";
                }
            }

            if (userOption === "scissors") {
                if (computerOption === "paper") {
                    userScore++;
                    $displayUserScore.innerHTML = userScore;
                    $showScore.innerHTML = `The machine choses ${iconStr(1)}, you BEAT him!`;
                } else if (computerOption === "rock") {
                    computerScore++;
                    $DisplayComputerScore.innerHTML = computerScore;
                    $showScore.innerHTML = `The machine chooses ${iconStr(0)}, you LOSE!`;
                } else if (userOption === computerOption) {
                    $showScore.innerHTML = "Draw!";
                }
            }
        }

        // Final winner judgment
        function theWinner() {
            if (userScore > computerScore) {
                $theWinnerIs.innerHTML = "You!";
            } else if (computerScore > userScore) {
                $theWinnerIs.innerHTML = "The machine!";
            } else {
                $theWinnerIs.innerHTML = "Draw!";
            }
        }
    })
})

// Reset game state
function resetGame() {
    userScore = 0;
    computerScore = 0;
    roundCount = 0;
    $displayUserScore.innerHTML = 0;
    $DisplayComputerScore.innerHTML = 0;
    $showScore.innerHTML = "";
    $theWinnerIs.innerHTML = "";
    $selectBtn.forEach(btn => btn.disabled = false);
}

// Generate random computer choice
function computerRandom () {
    const randomNumber = Math.floor(Math.random() * choices.length);
    return choices[randomNumber];
}

补充CSS样式（优化禁用按钮视觉效果） #

把下面代码追加到原有CSS文件即可：

.btn-selector:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

HTML部分不需要做任何修改。

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