二十一点中的 showResult 函数不起作用

编程问答 2022-05-02

问题描述

尽管在其中传递了计算游戏获胜者的正确参数，但我的 21 点显示结果函数无法正常工作。我将函数嵌套在交易按钮的函数中以测试它是否有效。

As you can see in this screenshot,when I console log the computeWinner function it works perfectly but it won't show up on the screen.

具体的computeWinner函数：

function computeWinner() {
    let winner;

if (YOU['score'] <= 21) {
if (YOU['score'] > DEALER['score'] || (DEALER)['score'] > 21) {
console.log('You won');
winner = YOU;

} else if (YOU['score'] < DEALER['score']) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] === DEALER['score']) {
    console.log('You drew');
}

} else if (YOU['score'] > 21 && DEALER['score'] <= 21) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] > 21 && DEALER['score'] > 21) {
    console.log('You drew');

}

console.log('Winner is',winner);
}

具体的showResult函数：

function showResult(winner) {
    let message,messageColor;
    
    if (winner === YOU) {
    message = 'You won';
    messageColor = 'green';
    winSound.play();
    


} else if (winner === DEALER) {
    message = 'You lost';
    messageColor = 'red';
    lossSound.play();

} else {
    message = 'You drew';
    messageColor = 'black';
}

document.querySelector('#blackjack-result').textContent = message;
document.querySelector('#blackjack-result').style.color = messageColor;



}

我如何将其放置在交易按钮功能中：

function blackjackDeal() {

    
    showResult(computeWinner());
    let yourImages = document.querySelector('#your-Box').querySelectorAll('img');
    let dealerImages = document.querySelector('#dealer-Box').querySelectorAll('img');
    

    for (i=0; i < yourImages.length; i++) {
        yourImages[i].remove();
    }


    for (i=0; i < dealerImages.length; i++) {
        dealerImages[i].remove();
    }

YOU['score'] = 0;
DEALER['score'] = 0;

document.querySelector('#your-blackjack-result').textContent = 0;
document.querySelector('#your-blackjack-result').style.color = 'white';

document.querySelector('#dealer-blackjack-result').textContent = 0;
document.querySelector('#dealer-blackjack-result').style.color = 'white';
}

还有整个 javascript，如果它有帮助的话：

//Challenge 5: Blackjack

let blackjackGame = {

'dealer': {'scoreSpan': '#dealer-blackjack-result','div': '#dealer-Box','score': 0},'you': {'scoreSpan': '#your-blackjack-result','div': '#your-Box','cards': ['2','3','4','5','6','7','8','9','10','K','J','Q','A'],'cardsMap': {'2': 2,'3': 3,'4': 4,'5': 5,'6': 6,'7': 7,'8': 8,'9': 9,'10': 10,'K': 10,'J': 10,'Q': 10,'A': [1,11]}

};


const YOU = blackjackGame['you']
const DEALER = blackjackGame['dealer']

const hitSound = new Audio('static/sounds/swish.m4a');
const winSound = new Audio('static/sounds/cash.mp3');
const lossSound = new Audio('static/sounds/aww.mp3');

document.querySelector('#blackjack-hit-button').addEventListener('click',blackjackHit);
document.querySelector('#blackjack-stand-button').addEventListener('click',dealerLogic);
document.querySelector('#blackjack-deal-button').addEventListener('click',blackjackDeal);

function blackjackHit() {
let card = randomCard();
showCard(card,YOU);
updatescore(card,YOU);
showscore(YOU);}


function randomCard() {
    let randomIndex = Math.floor(Math.random() * 13);
    return blackjackGame['cards'][randomIndex];
    }


function showCard(card,activePlayer) {
    if (activePlayer['score'] <= 21) {
    let cardImage = document.createElement('img');
    cardImage.src = `static/images/${card}.png`;
    document.querySelector(activePlayer['div']).appendChild(cardImage);
    hitSound.play(); }  
}

function blackjackDeal() {

    
    showResult(computeWinner());
    let yourImages = document.querySelector('#your-Box').querySelectorAll('img');
    let dealerImages = document.querySelector('#dealer-Box').querySelectorAll('img');
    

    for (i=0; i < yourImages.length; i++) {
        yourImages[i].remove();
    }


    for (i=0; i < dealerImages.length; i++) {
        dealerImages[i].remove();
    }

YOU['score'] = 0;
DEALER['score'] = 0;

document.querySelector('#your-blackjack-result').textContent = 0;
document.querySelector('#your-blackjack-result').style.color = 'white';

document.querySelector('#dealer-blackjack-result').textContent = 0;
document.querySelector('#dealer-blackjack-result').style.color = 'white';
}

function updatescore(card,activePlayer) {


if (card === 'A') {

    if (activePlayer['score'] + blackjackGame['cardsMap'][card][1] <= 21) {
activePlayer['score'] += blackjackGame['cardsMap'][card][1];

}  else { 

activePlayer['score'] += blackjackGame['cardsMap'][card][0];}



} else {

activePlayer['score'] += blackjackGame['cardsMap'][card];
}
}

function showscore(activePlayer) {

if (activePlayer['score'] > 21) {
    document.querySelector(activePlayer['scoreSpan']).textContent = 'BUST!';
    document.querySelector(activePlayer['scoreSpan']).style.color = 'red';
    
}

else {
document.querySelector(activePlayer['scoreSpan']).textContent = activePlayer['score'];
}

}

function dealerLogic() {
let card = randomCard();
showCard(card,DEALER);
updatescore(card,DEALER);
showscore(DEALER);




}

function computeWinner() {
    let winner;

if (YOU['score'] <= 21) {
if (YOU['score'] > DEALER['score'] || (DEALER)['score'] > 21) {
console.log('You won');
winner = YOU;

} else if (YOU['score'] < DEALER['score']) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] === DEALER['score']) {
    console.log('You drew');
}

} else if (YOU['score'] > 21 && DEALER['score'] <= 21) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] > 21 && DEALER['score'] > 21) {
    console.log('You drew');

}

console.log('Winner is',winner);
}

function showResult(winner) {
    let message,messageColor;
    
    if (winner === YOU) {
    message = 'You won';
    messageColor = 'green';
    winSound.play();
    


} else if (winner === DEALER) {
    message = 'You lost';
    messageColor = 'red';
    lossSound.play();

} else {
    message = 'You drew';
    messageColor = 'black';
}

document.querySelector('#blackjack-result').textContent = message;
document.querySelector('#blackjack-result').style.color = messageColor;



}

最后，HTML 和 CSS（如有必要）：

<div class="container-5"> 

<h2>Blackjack Challenge</h2>
<h3><span id="blackjack-result">Let's Play</span></h3>

<div class="flex-blackjack-row-1">
    <div id="your-Box">
        <h2>You: <span id="your-blackjack-result">0</span></h2>
    </div>
<div id="dealer-Box">
    <h2>Dealer: <span id="dealer-blackjack-result">0</span></h2>
</div>
</div>
<div class="flex-blackjack-row-2">
    <button class="btn-lg btn-primary mr-2" id="blackjack-hit-button">Hit</button>
    <button class="btn-lg btn-warning mr-2" id="blackjack-stand-button">Stand</button>
    <button class="btn-lg btn-danger mr-2" id="blackjack-deal-button">Deal</button>
</div>


<div class="flex-blackjack-row-3">
   
    <table>
        <tr>
            <th>Wins</th>
            <th>Losses</th>
            <th>Draws</th>
        </tr>

<tr>
    <td><span id="wins">0</span></td>
    <td><span id="losses">0</span></td>
    <td><span id="draws">0</span></td>
    
</tr>

    </table>

</div>


</div>








<script src ="static/script.js">
</script>

</body>
</html>

.flex-blackjack-row-1,.flex-blackjack-row-2 
{
display: flex;
border: 1px solid black;
padding: 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
color: #ffffff;
background: url('https://image.freepik.com/free-vector/poker-table-background-green-color_47243-1068.jpg') center;}


.flex-blackjack-row-3 {

    display: flex;
    border: 1px solid black;
    padding: 10px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;    

}


.flex-blackjack-row-1 div {

border: 1px solid black;
padding: 10px;
height: 350px;
text-align: center;
flex: 1;
}

.flex-blackjack-row-1 img {

    width: 25%;
    padding: 10px;
}

.flex-blackjack-row-2 button {

border: 1px solid black;
padding: 10px;
}

.flex-blackjack-row-2 div {

border: 1px solid black;
padding: 10px;
}


table,th,td {

padding: 5px;
border: 1px solid black;

}






.flex-blackjack-row-2 {
    display: flex;
border: 1px solid black;
padding: 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}

解决方法

只是盯着这里的代码，但您似乎没有从 computeWinner() 返回任何内容。我添加了这样的回报：return winner;。看看这是否是您的预期输出。

    //Challenge 5: Blackjack

let blackjackGame = {

'dealer': {'scoreSpan': '#dealer-blackjack-result','div': '#dealer-box','score': 0},'you': {'scoreSpan': '#your-blackjack-result','div': '#your-box','cards': ['2','3','4','5','6','7','8','9','10','K','J','Q','A'],'cardsMap': {'2': 2,'3': 3,'4': 4,'5': 5,'6': 6,'7': 7,'8': 8,'9': 9,'10': 10,'K': 10,'J': 10,'Q': 10,'A': [1,11]}

};


const YOU = blackjackGame['you']
const DEALER = blackjackGame['dealer']

const hitSound = new Audio('static/sounds/swish.m4a');
const winSound = new Audio('static/sounds/cash.mp3');
const lossSound = new Audio('static/sounds/aww.mp3');

document.querySelector('#blackjack-hit-button').addEventListener('click',blackjackHit);
document.querySelector('#blackjack-stand-button').addEventListener('click',dealerLogic);
document.querySelector('#blackjack-deal-button').addEventListener('click',blackjackDeal);

function blackjackHit() {
let card = randomCard();
showCard(card,YOU);
updateScore(card,YOU);
showScore(YOU);}


function randomCard() {
    let randomIndex = Math.floor(Math.random() * 13);
    return blackjackGame['cards'][randomIndex];
    }


function showCard(card,activePlayer) {
    if (activePlayer['score'] <= 21) {
    let cardImage = document.createElement('img');
    cardImage.src = `static/images/${card}.png`;
    document.querySelector(activePlayer['div']).appendChild(cardImage);
    hitSound.play(); }  
}

function blackjackDeal() {

    
    showResult(computeWinner());
    let yourImages = document.querySelector('#your-box').querySelectorAll('img');
    let dealerImages = document.querySelector('#dealer-box').querySelectorAll('img');
    

    for (i=0; i < yourImages.length; i++) {
        yourImages[i].remove();
    }


    for (i=0; i < dealerImages.length; i++) {
        dealerImages[i].remove();
    }

YOU['score'] = 0;
DEALER['score'] = 0;

document.querySelector('#your-blackjack-result').textContent = 0;
document.querySelector('#your-blackjack-result').style.color = 'white';

document.querySelector('#dealer-blackjack-result').textContent = 0;
document.querySelector('#dealer-blackjack-result').style.color = 'white';
}

function updateScore(card,activePlayer) {


if (card === 'A') {

    if (activePlayer['score'] + blackjackGame['cardsMap'][card][1] <= 21) {
activePlayer['score'] += blackjackGame['cardsMap'][card][1];

}  else { 

activePlayer['score'] += blackjackGame['cardsMap'][card][0];}



} else {

activePlayer['score'] += blackjackGame['cardsMap'][card];
}
}

function showScore(activePlayer) {

if (activePlayer['score'] > 21) {
    document.querySelector(activePlayer['scoreSpan']).textContent = 'BUST!';
    document.querySelector(activePlayer['scoreSpan']).style.color = 'red';
    
}

else {
document.querySelector(activePlayer['scoreSpan']).textContent = activePlayer['score'];
}

}

function dealerLogic() {
let card = randomCard();
showCard(card,DEALER);
updateScore(card,DEALER);
showScore(DEALER);




}

function computeWinner() {
    let winner;

if (YOU['score'] <= 21) {
if (YOU['score'] > DEALER['score'] || (DEALER)['score'] > 21) {
console.log('You won');
winner = YOU;

} else if (YOU['score'] < DEALER['score']) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] === DEALER['score']) {
    console.log('You drew');
}

} else if (YOU['score'] > 21 && DEALER['score'] <= 21) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] > 21 && DEALER['score'] > 21) {
    console.log('You drew');

}

return winner;
}

function showResult(winner) {
console.log('Winner is',winner);
    let message,messageColor;
    
    if (winner === YOU) {
    message = 'You won';
    messageColor = 'green';
    winSound.play();
    


} else if (winner === DEALER) {
    message = 'You lost';
    messageColor = 'red';
    lossSound.play();

} else {
    message = 'You drew';
    messageColor = 'black';
}

document.querySelector('#blackjack-result').textContent = message;
document.querySelector('#blackjack-result').style.color = messageColor;



}
    .flex-blackjack-row-1,.flex-blackjack-row-2 
{
display: flex;
border: 1px solid black;
padding: 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
color: #ffffff;
background: url('https://image.freepik.com/free-vector/poker-table-background-green-color_47243-1068.jpg') center;}


.flex-blackjack-row-3 {

    display: flex;
    border: 1px solid black;
    padding: 10px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;    

}


.flex-blackjack-row-1 div {

border: 1px solid black;
padding: 10px;
height: 350px;
text-align: center;
flex: 1;
}

.flex-blackjack-row-1 img {

    width: 25%;
    padding: 10px;
}

.flex-blackjack-row-2 button {

border: 1px solid black;
padding: 10px;
}

.flex-blackjack-row-2 div {

border: 1px solid black;
padding: 10px;
}


table,th,td {

padding: 5px;
border: 1px solid black;

}






.flex-blackjack-row-2 {
    display: flex;
border: 1px solid black;
padding: 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
<div class="container-5"> 

<h2>Blackjack Challenge</h2>
<h3><span id="blackjack-result">Let's Play</span></h3>

<div class="flex-blackjack-row-1">
    <div id="your-box">
        <h2>You: <span id="your-blackjack-result">0</span></h2>
    </div>
<div id="dealer-box">
    <h2>Dealer: <span id="dealer-blackjack-result">0</span></h2>
</div>
</div>
<div class="flex-blackjack-row-2">
    <button class="btn-lg btn-primary mr-2" id="blackjack-hit-button">Hit</button>
    <button class="btn-lg btn-warning mr-2" id="blackjack-stand-button">Stand</button>
    <button class="btn-lg btn-danger mr-2" id="blackjack-deal-button">Deal</button>
</div>


<div class="flex-blackjack-row-3">
   
    <table>
        <tr>
            <th>Wins</th>
            <th>Losses</th>
            <th>Draws</th>
        </tr>

<tr>
    <td><span id="wins">0</span></td>
    <td><span id="losses">0</span></td>
    <td><span id="draws">0</span></td>
    
</tr>

    </table>

</div>


</div>

这里还有一个 fiddle。

blackjackjavascript

相关问答

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其...
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。...
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbc...