如何在双人计分游戏中实现玩家回合跟踪？附现有代码

DevOps 小满

2026-5-13

解决双人计分游戏的回合跟踪问题

我看了你的代码，问题出在回合跟踪的逻辑上——你现在的turnTacker（应该是笔误，正确拼写是turnTracker）写法会导致点击任意按钮都可能给对方加分，完全没起到限制连续点击的作用。咱们调整一下思路，核心是：只有当前回合的玩家点击自己的按钮才有效，加分后立刻切换回合。

修复后的完整代码

先给你调整好的代码，后面再解释关键改动点：

score.html（优化了提示布局，可选）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Two-Player Score Game</title>
    <link rel="stylesheet" href="score.css">
</head>
<body>
    <h1 id="winMessage"></h1>
    <h2>
        <span id="p1Display">0</span> to <span id="p2Display">0</span>
    </h2>
    <p>Play to: <span id="winningscoreDisplay">5</span></p>
    <input type="number" id="numInput" min="1" value="5">
    <button id="p1">Player 1</button>
    <button id="p2">Player 2</button>
    <button id="reset">Reset</button>
    <script src="score.js"></script>
</body>
</html>

score.js（核心逻辑修复）

// 先获取所有DOM元素
const p1Button = document.getElementById('p1');
const p2Button = document.getElementById('p2');
const resetButton = document.getElementById('reset');
const p1Display = document.getElementById('p1Display');
const p2Display = document.getElementById('p2Display');
const winMessage = document.getElementById('winMessage');
const winningscoreDisplay = document.getElementById('winningscoreDisplay');
const numInput = document.getElementById('numInput');

// 游戏状态变量
let p1Score = 0;
let p2Score = 0;
let winningscore = 5;
let gameOver = false;
let currentPlayer = 1; // 1代表Player1回合，2代表Player2回合

// Player1按钮点击事件
p1Button.addEventListener("click", function () {
    if (!gameOver && currentPlayer === 1) {
        p1Score++;
        p1Display.textContent = p1Score;
        
        // 检查是否获胜
        if (p1Score === winningscore) {
            winMessage.textContent = `Congratulations! Player 1 wins with a score of ${p1Score} to ${p2Score}`;
            p1Display.classList.add("winner");
            gameOver = true;
        } else {
            // 切换到Player2回合
            currentPlayer = 2;
        }
    }
});

// Player2按钮点击事件
p2Button.addEventListener("click", function () {
    if (!gameOver && currentPlayer === 2) {
        p2Score++;
        p2Display.textContent = p2Score;
        
        // 检查是否获胜
        if (p2Score === winningscore) {
            winMessage.textContent = `Congratulations! Player 2 wins with a score of ${p2Score} to ${p1Score}`;
            p2Display.classList.add("winner");
            gameOver = true;
        } else {
            // 切换到Player1回合
            currentPlayer = 1;
        }
    }
});

// 重置按钮事件
resetButton.addEventListener("click", resetGame);

// 获胜分数输入框事件
numInput.addEventListener("change", function () {
    winningscore = Number(this.value);
    winningscoreDisplay.textContent = this.value;
    resetGame();
});

// 重置游戏函数
function resetGame() {
    p1Score = 0;
    p2Score = 0;
    p1Display.textContent = 0;
    p2Display.textContent = 0;
    winMessage.textContent = "";
    p1Display.classList.remove("winner");
    p2Display.classList.remove("winner");
    gameOver = false;
    currentPlayer = 1; // 重置回合到Player1
}

可选的score.css（提升用户体验）

.winner {
    color: green;
    font-weight: bold;
}

button {
    padding: 8px 16px;
    margin: 0 5px;
    cursor: pointer;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

关键改动解释

明确回合跟踪变量：用currentPlayer代替原来的turnTacker，清晰标记当前该谁行动，初始值设为1（默认Player1先开始）。
按钮点击限制：每个按钮只有在currentPlayer匹配自己的编号且游戏未结束时，才执行加分逻辑——这样就彻底避免了连续点击同一按钮刷分的问题。
获胜提示优化：把获胜提示单独放在一个<h1>标签里，比原来修改分数显示更清晰，完全符合你想要的"congratulations Player 1 win score of 5 to 4"格式。
代码冗余清理：把重复的重置逻辑抽成resetGame函数，避免代码重复，也更容易维护。
可扩展的回合提示：如果想更直观，还可以给当前回合的按钮加高亮样式，或者在页面上显示"Player X's Turn"，只需要在resetGame和按钮点击后更新提示即可。

这样修改后，游戏就完全符合你的需求了：玩家必须交替点击自己的按钮，直到某一方达到设定分数，获胜后会显示清晰的胜负提示，重置功能也能正确恢复初始状态。

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