JavaScript卡牌游戏分数无法累加问题求助

你的分数每次重置为0有两个核心原因：

• 分数变量player1Score和player2Score定义在$(document).ready()的回调函数内部，每次页面加载或逻辑执行时都会重新初始化为0，无法保留之前的数值。
• 当前代码是页面加载完成后直接执行一轮游戏逻辑，但没有绑定Play按钮的点击事件，点击按钮不会触发新的游戏回合，且每次刷新页面都会重新初始化分数。

另外代码里还有两个小问题：

• 重复声明了selectedCard和suitType变量，会覆盖之前的取值。
• 比分判断时用了HTML转义字符</>，应该替换为原生的</>运算符。

JavaScript 代码 #

// 把分数变量放在全局作用域，确保持久保存
let player1Score = 0;
let player2Score = 0;

// 存储卡牌图片数组
const arrClubs=['2_of_clubs.png','3_of_clubs.png', '4_of_clubs.png', '5_of_clubs.png', '6_of_clubs.png', '7_of_clubs.png', '8_of_clubs.png', '9_of_clubs.png', '10_of_clubs.png', 'jack_of_clubs.png','queen_of_clubs.png', 'king_of_clubs.png', 'ace_of_clubs.png']
const arrDiamonds=['2_of_diamonds.png','3_of_diamonds.png', '4_of_diamonds.png', '5_of_diamonds.png', '6_of_diamonds.png', '7_of_diamonds.png', '8_of_diamonds.png', '9_of_diamonds.png', '10_of_diamonds.png', 'jack_of_diamonds.png','queen_of_diamonds.png', 'king_of_diamonds.png', 'ace_of_diamonds.png']
const arrHearts=['2_of_hearts.png','3_of_hearts.png', '4_of_hearts.png', '5_of_hearts.png', '6_of_hearts.png', '7_of_hearts.png', '8_of_hearts.png', '9_of_hearts.png', '10_of_hearts.png', 'jack_of_hearts.png','queen_of_hearts.png', 'king_of_hearts.png', 'ace_of_hearts.png']
const arrSpades=['2_of_spades.png','3_of_spades.png', '4_of_spades.png', '5_of_spades.png', '6_of_spades.png', '7_of_spades.png', '8_of_spades.png', '9_of_spades.png', '10_of_spades.png', 'jack_of_spades.png','queen_of_spades.png', 'king_of_spades.png', 'ace_of_spades.png']

// 封装生成随机卡牌的函数
function getRandomCard() {
    const suitType = Math.ceil(Math.random() * 4);
    const cardIndex = Math.floor(Math.random() * 13); // 修正为13，对应13张牌的索引范围
    let selectedCard;

    switch(suitType) {
        case 1:
            selectedCard = arrClubs[cardIndex];
            break;
        case 2:
            selectedCard = arrDiamonds[cardIndex];
            break;
        case 3:
            selectedCard = arrHearts[cardIndex];
            break;
        case 4:
            selectedCard = arrSpades[cardIndex];
            break;
    }
    return { cardIndex, selectedCard };
}

// 封装单轮游戏逻辑
function playRound() {
    // 玩家1抽牌
    const player1 = getRandomCard();
    document.getElementById('p1Card').src = "./images/cards/" + player1.selectedCard;

    // 玩家2抽牌
    const player2 = getRandomCard();
    document.getElementById('p2Card').src = "./images/cards/" + player2.selectedCard;

    // 判断胜负并更新分数
    if (player1.cardIndex < player2.cardIndex) {
        player2Score++;
        document.getElementById('player2Results').value = player2Score;
    } else if (player1.cardIndex > player2.cardIndex) {
        player1Score++;
        document.getElementById('player1Results').value = player1Score;
    } else {
        console.log('平局！');
    }
}

$(document).ready(function(){
    // 初始化分数显示
    document.getElementById('player1Results').value = player1Score;
    document.getElementById('player2Results').value = player2Score;

    // 绑定Play按钮点击事件
    $('#play').click(playRound);
});

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>War</title>
</head>
<body>
    <div> Game</div>
    <img src="./images/cards/black_joker.png" id="p1Card">
    <img src="./images/cards/red_joker.png" id="p2Card">

    <input type="text" readonly id="player1Results"/>
    <input type="text" readonly id="player2Results"/>
<button id="play">Play</button>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="./js/index.js"></script>
</body>
</html>

• 将分数变量移到全局作用域，避免每次执行游戏逻辑时重新初始化。
• 把抽牌和游戏逻辑封装成函数，通过Play按钮的点击事件触发，而非页面加载就执行。
• 修复了卡牌索引的取值范围（从12改为13，匹配每个花色13张牌的数量）。
• 用switch替代重复的if-else，优化代码结构。
• 初始化时就显示分数的初始值0。

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