Blackjack游戏开发问题：数组元素重复显示与卡牌重置异常

问题分析 #

• 重复显示整个数组：每次点击抽新牌按钮时，newCard()函数调用了resetCard()，进而触发receivedCards()，而receivedCards()中的循环会把allCards数组的所有元素追加到cardsHtml中，导致每次抽牌都重复渲染所有已有的牌。
• 初始卡牌被覆盖：resetCard()调用receivedCards()时，会重新生成两张随机卡牌并重置sumCards，直接覆盖之前的初始卡牌和总和；同时初始的两张牌未存入allCards数组，导致无法保留。

解决方案 #

1. 初始化游戏时，将初始两张卡牌存入allCards数组，确保数据持久化。
2. 移除newCard()中的resetCard()调用，避免每次抽新牌都重置游戏状态。
3. 拆分渲染逻辑：初始化时清空cardsHtml并渲染所有卡牌；抽新牌时仅追加新增的单张卡牌。
4. 修复HTML按钮的onclick语法错误（缺少执行括号）。
5. 规范全局变量声明，避免隐式全局污染。

修正后的完整代码 #

JavaScript代码 #

// 规范全局变量声明
let allCards = []
let sumCards = 0
// 获取DOM元素（需确保HTML中有对应id的元素）
const cardsHtml = document.getElementById('cards')
const sum = document.getElementById('sum')
const button2 = document.getElementById('Pkreni')

function randomCard() {
    let randomNumber = Math.floor(Math.random() * 13) + 1
    if (randomNumber === 1) {   
        return 11
    } else if (randomNumber > 10) {
        return 10
    } else {
        return randomNumber
    }
}

// 初始化游戏：生成初始两张牌
function receivedCards() {
    // 重置游戏状态（仅点击TRY按钮时执行）
    allCards = []
    sumCards = 0
    
    let card1 = randomCard()
    let card2 = randomCard()
    // 将初始牌存入数组
    allCards.push(card1, card2)
    sumCards = card1 + card2

    // 清空后重新渲染所有初始牌
    cardsHtml.innerText = ''
    allCards.forEach(card => {
        cardsHtml.innerText += ` ${card}`
    })

    sum.innerHTML = "Sum: " + sumCards
    // 重置抽牌按钮显示状态
    button2.style.display = 'block'
}

// 抽新牌逻辑
function newCard() {
    if (sumCards < 21) {
        let newCard = randomCard()
        allCards.push(newCard)
        sumCards += newCard
        // 仅追加新牌，不重复渲染全部
        cardsHtml.innerText += ` ${newCard}`
        sum.innerHTML = "Sum: " + sumCards
    } else {
        button2.style.display = "none"
    }
}

HTML代码 #

<body>
    <h1>BlackJack</h1>
    <p>Do you want to pull new card?</p>
    <!-- 修复onclick语法错误，添加执行括号 -->
    <button id="kreni" onclick="receivedCards()">TRY</button>
    <br><br>
    <button id="Pkreni" onclick="newCard()">PULL UP MORE</button>
    <!-- 添加显示卡牌和总和的元素 -->
    <div id="cards"></div>
    <div id="sum"></div>
    <script src="index1.js"></script>
</body>

额外说明 #

• 原代码中未使用的sveKarte变量已移除；
• 新增DOM元素获取代码，确保cardsHtml、sum、button2能正确绑定页面元素；
• 抽新牌时仅渲染新增卡牌，彻底解决重复显示问题；
• 初始化游戏时会重置数组和总和，确保每次点击TRY按钮都是全新开局。

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