Question

[JS] [HTML]

wanting to add this logic to existing code(see below) of a blackjack game, where it will show the Suit emblem instead of spelled out suit name. example: display 7 ♣ instead of 7 clubs.

//this is the logic, main obj is to display suits emblems to existing code

if (card.Suit == 'Hearts')

icon='♥';

else if (card.Suit == 'Spades')

icon = '♠';

else if (card.Suit == 'Diamonds')

icon = '♦';

else

icon = '♣';

//existing code blackjack.js

//variables for cards
let suits= ['Hearts','Clubs', 'Diamonds', 'Spades'];
let values= ['Ace', 'King', 'Queen','Jack', 'Ten', 'Nine', 'Eight', 'Seven', 'Six', 'Five',
'Four', 'Three', 'Two'];

//DOM variables
let textArea= document.getElementById('text_area');
let newGameButton= document.getElementById('newGame_button');
let stayButton= document.getElementById('stay_button');
let hitButton= document.getElementById('hit_button');

//Game variables
let gameStarted = false,
gameOver= false,
playerWon= false,
push = 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;
push = false;

deck = createDeck();
shuffleDeck(deck);
dealerCards = [ getNextCard(), getNextCard ()];
playerCards= [getNextCard(), getNextCard() ];

newGameButton.style.display='none';
hitButton.style.display='inline';
stayButton.style.display='inline';
showStatus();

});

hitButton.addEventListener('click', function() {
playerCards.push(getNextCard());
checkForEnd();
showStatus();
});

stayButton.addEventListener('click', function() {
gameOver = true;
checkForEnd();
showStatus();
});

function createDeck() {
let deck= [];
for (let i=0; i<suits.length; i++) {
for (let j=0; j<values.length; j++) {
let card = {
suit: suits[i],
value: values[j]
};
deck.push(card);
}
}
return deck;
}

function shuffleDeck(deck) {
for (let i=0; i<deck.length; i++) {
let swap= Math.trunc(Math.random() * deck.length);
let temp= deck[swap];
deck[swap] = deck[i];
deck[i]= temp;
}
}

function getCard(card) {
return card.value + " " + card.suit;
}

function getNextCard() {
return deck.shift();
}

//this function will determine an ace-9 and default jack,queen, king to 10
function getCardValue(card) {
switch (card.value) {
case 'Ace':
return 1;
case 'Two':
return 2;
case 'Three':
return 3;
case 'Four':
return 4;
case 'Five':
return 5;
case 'Six':
return 6;
case 'Seven':
return 7;
case 'Eigth':
return 8;
case 'Nine':
return 9;
default:
return 10;
}
}

//this will get tally the scores by calling function getCardValue and adding to score
function getScore(cardArray) {
let score = 0;
let hasAce = false;
for (let i = 0; i <cardArray.length; i++) {
let card = cardArray[i];
score += getCardValue(card);
if (card.value === 'Ace') {
hasAce = true;
}
}
if (hasAce && score + 10 <= 21) {
return score + 10;
}
return score;
}

//this sets the scores for player and dealer variables
function updateScores() {
dealerScore = getScore(dealerCards);
playerScore = getScore(playerCards);
}

function checkForEnd() {
  
updateScores();
if(gameOver){
//Let Dealer take card
while(dealerScore < playerScore && playerScore <= 21 && dealerScore <= 21) {
dealerCards.push(getNextCard());
updateScores();
}
}

if(playerScore > 21){
playerWon = false;
gameOver = true;
}
else if( dealerScore > 21){
playerWon = true;
gameOver = true;
}
else if( dealerScore === playerScore){
push= true;
gameOver=true;
}
else if(gameOver){
if(playerScore > dealerScore){
playerWon = true;
}
else {
playerWon = false;
}
}
}

function showStatus() {
if(!gameStarted){
textArea.innerText = "Play Blackjack";
return;
}

let dealerCard = '';
var el = document.createElement('div');
var icon = '';
for(let i = 0; i < dealerCards.length; i++){
dealerCard += getCard(dealerCards[i]) + '\n';

}

let playerCard = '';
for(let i = 0; i < playerCards.length; i++){
playerCard += getCard(playerCards[i]) + '\n';
  
}
//call function that sets the scores
updateScores();

textArea.innerText =
'Dealer has:\n' +
dealerCard + '(score: '+ dealerScore + ') \n\n' +

'Player has:\n' +
playerCard +
'(score: ' + playerScore + ')\n\n';

if (gameOver) {
if (playerWon) {
textArea.innerText += "YOU WIN!";
}
else if (push) {
textArea.innerText += "PUSH!!";
}
else {
textArea.innerText += "YOU LOSE";
}
newGameButton.style.display = 'inline';
hitButton.style.display = 'none';
stayButton.style.display = 'none';
}
}

//existing HTML file

<!DOCTYPE html>
<html lang="en">
<head>
<title>BlackJack </title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content=" A simple blackjack game">
</head>
<body>
  
<main>
  
<h1>Blackjack</h1>

<p id="text_area">Let's play blackjack</p>
<button id="newGame_button">New Game</button>
<button id="hit_button">Hit</button>
<button id="stay_button">Stay</button>
  
<script src="blackjack.js"></script>
</main>
</body>
</html>

Answer 1

Note: Done accordingly. Please comment for any problem. Please Uprate. Thanks.

Updated code is highlighted. First we are returning icon from getCard method but it was string. To convert it in html form we have created a temp div then setting value to that and finally extracting data from that div.

Code:

//variables for cards
let suits= ['Hearts','Clubs', 'Diamonds', 'Spades'];
let values= ['Ace', 'King', 'Queen','Jack', 'Ten', 'Nine', 'Eight', 'Seven', 'Six', 'Five',
'Four', 'Three', 'Two'];

//DOM variables
let textArea= document.getElementById('text_area');
let newGameButton= document.getElementById('newGame_button');
let stayButton= document.getElementById('stay_button');
let hitButton= document.getElementById('hit_button');

//Game variables
let gameStarted = false,
gameOver= false,
playerWon= false,
push = 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;
push = false;

deck = createDeck();
shuffleDeck(deck);
dealerCards = [ getNextCard(), getNextCard ()];
playerCards= [getNextCard(), getNextCard() ];

newGameButton.style.display='none';
hitButton.style.display='inline';
stayButton.style.display='inline';
showStatus();

});

hitButton.addEventListener('click', function() {
playerCards.push(getNextCard());
checkForEnd();
showStatus();
});

stayButton.addEventListener('click', function() {
gameOver = true;
checkForEnd();
showStatus();
});

function createDeck() {
let deck= [];
for (let i=0; i<suits.length; i++) {
for (let j=0; j<values.length; j++) {
let card = {
suit: suits[i],
value: values[j]
};
deck.push(card);
}
}
return deck;
}

function shuffleDeck(deck) {
for (let i=0; i<deck.length; i++) {
let swap= Math.trunc(Math.random() * deck.length);
let temp= deck[swap];
deck[swap] = deck[i];
deck[i]= temp;
}
}

function getCard(card) {
   if (card.suit == 'Hearts')
       icon='&hearts;';
   else if (card.suit == 'Spades')
       icon = '&spades;';
   else if (card.suit == 'Diamonds')
       icon = '&diams;';
   else
       icon = '&clubs;';
   return card.value + " " + icon;
}

function getNextCard() {
return deck.shift();
}

//this function will determine an ace-9 and default jack,queen, king to 10
function getCardValue(card) {
switch (card.value) {
case 'Ace':
return 1;
case 'Two':
return 2;
case 'Three':
return 3;
case 'Four':
return 4;
case 'Five':
return 5;
case 'Six':
return 6;
case 'Seven':
return 7;
case 'Eigth':
return 8;
case 'Nine':
return 9;
default:
return 10;
}
}

//this will get tally the scores by calling function getCardValue and adding to score
function getScore(cardArray) {
let score = 0;
let hasAce = false;
for (let i = 0; i <cardArray.length; i++) {
let card = cardArray[i];
score += getCardValue(card);
if (card.value === 'Ace') {
hasAce = true;
}
}
if (hasAce && score + 10 <= 21) {
return score + 10;
}
return score;
}

//this sets the scores for player and dealer variables
function updateScores() {
dealerScore = getScore(dealerCards);
playerScore = getScore(playerCards);
}

function checkForEnd() {
  
updateScores();
if(gameOver){
//Let Dealer take card
while(dealerScore < playerScore && playerScore <= 21 && dealerScore <= 21) {
dealerCards.push(getNextCard());
updateScores();
}
}

if(playerScore > 21){
playerWon = false;
gameOver = true;
}
else if( dealerScore > 21){
playerWon = true;
gameOver = true;
}
else if( dealerScore === playerScore){
push= true;
gameOver=true;
}
else if(gameOver){
if(playerScore > dealerScore){
playerWon = true;
}
else {
playerWon = false;
}
}
}

function showStatus() {
if(!gameStarted){
textArea.innerText = "Play Blackjack";
return;
}

let dealerCard = '';
var el = document.createElement('div');
var icon = '';
for(let i = 0; i < dealerCards.length; i++){
   dealerCard += getCard(dealerCards[i]) + '\n';
}

let playerCard = '';
for(let i = 0; i < playerCards.length; i++){
   playerCard += getCard(playerCards[i]) + '\n';
}
//call function that sets the scores
updateScores();

var tempPlayer = document.createElement('div');
tempPlayer.innerHTML = playerCard;
var playerHtmlObject = tempPlayer.firstChild;

var tempDealer = document.createElement('div');
tempDealer.innerHTML = dealerCard;
var dealerHtmlObject = tempDealer.firstChild;

textArea.innerText =
'Dealer has:\n' +
dealerHtmlObject.textContent + '(score: '+ dealerScore + ') \n\n' +

'Player has:\n' +
playerHtmlObject.textContent +
'(score: ' + playerScore + ')\n\n';

if (gameOver) {
if (playerWon) {
textArea.innerText += "YOU WIN!";
}
else if (push) {
textArea.innerText += "PUSH!!";
}
else {
textArea.innerText += "YOU LOSE";
}
newGameButton.style.display = 'inline';
hitButton.style.display = 'none';
stayButton.style.display = 'none';
}
}

Output: