Looking to improve my blackjack game, I've implemented a card shuffle function. However, I'm struggling with getting the shuffled card results to display in the innerText after clicking the new game button.
Despite reviewing and fine-tuning the code, checking variable placement and semicolons, the issue persists without any visible effect.
/*
Custom Blackjack Game
*/
//Card Variables
let suits = ['Hearts', 'Clubs', 'Diamonds', 'Spades'],
values = ['Ace', 'King', 'Queen', 'Jack',
'Ten', 'Nine', 'Eight', 'Seven', 'Six',
'Five', 'Four', 'Three', 'Two'
];
//DOM Variables
let textArea = document.getElementById('text-area'),
newGameButton = document.getElementById('new-game-button'),
hitButton = document.getElementById('hit-button'),
stayButton = document.getElementById('stay-button');
//Game Variables
let gameStarted = false,
gameOver = false,
playerWon = false,
dealerCards = [],
playerCards = [],
dealerScore = 0,
playerScore = 0,
deck = [];
hitButton.style.display = 'none';
stayButton.style.display = 'none';
showStatus();
newGameButton.addEventListener('click', function() {
gameStarted = true;
gameOver = false;
playerWon = false;
deck = createDeck();
shuffleDeck(deck);
dealerCards = [getNextCard(), getNextCard()];
playerCards = [getNextCard(), getNextCard()];
newGameButton.style.display = 'none';
hitButton.style.display = 'inline';
stayButton.style.display = 'inline';
showStatus();
});
function createDeck() { //Create a deck of 52 cards
let deck = [];
for (let suitIdx = 0; suitIdx < suits.length; suitIdx++) {
for (let valueIdx = 0; valueIdx < values.length; valueIdx++) {
let card = {
suit: suits[suitIdx],
value: values[valueIdx]
}
deck.push(card);
}
}
return deck;
}
function shuffleDeck(deck) {
for (let i = 0; i < deck.length; i++) {
let swapIdx = Math.trunc(Math.random() * deck.length);
let tmp = deck[swapIdx];
deck[swapIdx] = deck[i];
deck[i] = tmp;
}
}
function getCardString(card) {
return card.value + ' of ' + card.suit;
}
function getNextCard() {
return deck.shift();
}
function showStatus() {
if (!gameStarted) {
textArea.innerText = 'Welcome to Blackjack!';
return;
}
}
for (var i = 0; i < deck.length; i++) {
textArea.innerText = "\n" + getCardString(deck[i]);
}<h1 id="title">Welcome to Blackjack!</h1>
<h4>by Andrean Hendy</h4>
<p id="text-area">Welcome to Blackjack!</p>
<button id="new-game-button">New Game!</button>
<button id="hit-button">Hit!</button>
<button id="stay-button">Stay</button>Check out the code on plunkr: http://embed.plnkr.co/rAzcbmTyH8vIRBI3appX/
The expectation is to display the shuffled result of the 52-deck card after shuffling.