This is my first post. I'm new to coding and one of my projects is to create a simple version of Blackjack using Javascript. I made a basic website for it here and I've encountered a problem. The dealer occasionally gets dealt 3 or more cards. The dealer should always have 2 cards. (unless you hit or stay.) Adding cards to the dealer like the player isn't required so I did not write code for it. I have the dealer sum limit set to 13 (I've tried lower/higher numbers, but that doesn't really "fix" the issue.") and also edited the for loops. I thought it could be an array problem. Perhaps I have the arrays too simplified and need to rename the cards?
Here is my code any help or tips would be appreciated!
var dealerSum = 0;
var yourSum = 0;
var dealerAceCount = 0;
var yourAceCount = 0;
var hidden;
var deck;
var canHit = true;
window.onload = function () {
buildDeck()
shuffleDeck()
startGame()
}
function buildDeck() {
let values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
let types = ["C", "D", "H", "S"]
deck = []
for (let i = 0; i < types.length; i++) {
for (let j = 0; j < values.length; j++) {
deck.push(values[j] + "-" + types[i]);
}
}
// console.log(deck);
}
function shuffleDeck() {
for (let i = 0; i < deck.length; i++) {
let j = Math.floor(Math.random() * deck.length);
let temp = deck[i];
deck[i] = deck[j];
deck[j] = temp;
}
// console.log(deck);
}
function startGame() {
hidden = deck.pop();
dealerSum += getValue(hidden);
dealerAceCount += checkAce(hidden);
// console.log(hidden);
// console.log(dealerSum);
while (dealerSum < 13) {
let cardImg = document.createElement("img");
let card = deck.pop();
cardImg.src = "./cards/" + card + ".png";
dealerSum += getValue(card);
dealerAceCount += checkAce(card);
document.getElementById("dealer-cards").append(cardImg);
}
console.log(dealerSum)
for (let i = 0; i < 2; i++) {
let cardImg = document.createElement("img");
let card = deck.pop();
cardImg.src = "./cards/" + card + ".png";
yourSum += getValue(card);
yourAceCount += checkAce(card);
document.getElementById("your-cards").append(cardImg);
}
console.log(yourSum);
document.getElementById("refresh").addEventListener("click", refresh);
document.getElementById("hit").addEventListener("click", hit);
document.getElementById("stay").addEventListener("click", stay);
}
function hit() {
if (!canHit) {
return;
}
let cardImg = document.createElement("img");
let card = deck.pop();
cardImg.src = "./cards/" + card + ".png";
yourSum += getValue(card);
yourAceCount += checkAce(card);
document.getElementById("your-cards").append(cardImg);
if (reduceAce(yourSum, yourAceCount) > 21) {
canHit = false;
}
}
function stay() {
dealerSum = reduceAce(dealerSum, dealerAceCount);
yourSum = reduceAce(yourSum, yourAceCount);
canHit = false;
document.getElementById("hidden").src = "./cards/" + hidden + ".png";
let message = "";
if (yourSum > 21) {
message = "You lose! Better luck next time. Refresh to try again!"
}
else if (dealerSum > 21) {
message = "You win! Refresh to play again!"
}
else if (yourSum == dealerSum) {
message = "Tie! Refresh to play again!";
}
else if (yourSum > dealerSum) {
message = "You win! Refresh to play again!";
}
else if (yourSum < dealerSum) {
message = "You lose! Better luck next time. Refresh to play again!";
}
document.getElementById("dealer-sum").innerText = dealerSum;
document.getElementById("your-sum").innerText = yourSum;
document.getElementById("result").innerText = message;
}
function refresh() {
window.location.reload();
}
function getValue(card) {
let data = card.split("-");
let value = data[0];
if (isNaN(value)) {
if (value == "A") {
return 11;
}
return 10;
}
return parseInt(value);
}
function checkAce(card) {
if (card[0] == "A") {
return 1;
}
return 0;
}
function reduceAce(playerSum, playerAceCount) {
while (playerSum > 21 && playerAceCount > 0) {
playerSum -= 10;
playerAceCount -= 1;
}
return playerSum;
}