二十一点中的 showResult 函数不起作用
showResult function in blackjack not working
尽管在其中传递了计算游戏获胜者的正确参数，但我的 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', 'score': 0},
'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;
}
只是盯着这里的代码，但您似乎没有return从您的 computeWinner() 中获取任何东西。我像这样添加了一个 return：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', 'score': 0},
'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。
尽管在其中传递了计算游戏获胜者的正确参数，但我的 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', 'score': 0},
'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;
}
只是盯着这里的代码，但您似乎没有return从您的 computeWinner() 中获取任何东西。我像这样添加了一个 return：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', 'score': 0},
'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。