Blackjack game app in javascript

Today I learnt about objects. In the part 3 of this series, I talked about the blackjack game when I was learning about the if/else if / else statements. This brings all what I have learnt together; variables, conditionals, loops, DOM, functions, arrays and objects. The blackjack is a game where each participant attempts to beat the dealer by getting a count as close to 21 as possible, without going over 21. It is up to each individual player if an ace is worth 1 or 11. Face cards are 10 and any other card is its pip value.

blackjack

Here is the html part

<body>
   <h1>Blackjack</h1>
        <p id="message-el">Want to play a round?</p>
        <p id="cards-el">Cards:</p>
        <p id="sum-el">Sum:</p>
        <button onclick="startGame()">START GAME</button>
        <button onclick="newCard()">NEW CARD</button>
        <p id="player-el"></p>
    <script src ="js/blackjack.js"></script>
</body>

Javascript file The objects are declared with its variables

let player = {
    name: "Nkem",
    chips: 200,
    sayHello: function() {
        console.log("Heisann!");
    }
}

The name of the player is Nkem and I have started the game with 200 dollars chips. Not to bad for starting. Don’t you think?

placingbets

The second part is to declare the rest of the variable that will be used in this program

let cards = [];
let sum = 0;
let hasBlackJack = false;
let isAlive = false;
let message = "";
let messageEl = document.getElementById("message-el");
let sumEl = document.getElementById("sum-el");
let cardsEl = document.getElementById("cards-el");
let playerEl = document.getElementById("player-el");

playerEl.textContent = player.name + ": $" + player.chips;

Here you will see the cards is declared in array, because it is more than one card and a vairable can only take a value at a time so an array will be a better fit for this. Sum is the sum of the cards. This is set to zero for accurate calculation at the end of the day. MessageEL, sumEL, CardsEL and playerEL are variables declared from the HTML document. The playerEL.textContent is the vairable declared for the object variables.

Next is to create a function that will generate random numbers for the cards. Playing cards is a game of luck. Generating random numbers will be the best choice for this. Math object was used here.

function getRandomCard() {
    let randomNumber = Math.floor( Math.random()*13 ) + 1;
    if (randomNumber > 10) {
        return 10;
    } else if (randomNumber === 1) {
        return 11;
    } else {
        return randomNumber;
    }
}

Math.random() method only generates numbers between 0 and 1. This includes the decimal number between them. In this game, the ace is equals to 11. So if the random number gives one, it will return 11.

The next function is to the startgame function. This is executed when the button is clicked.

function startGame() {
    isAlive = true;
    let firstCard = getRandomCard();
    let secondCard = getRandomCard();
    cards = [firstCard, secondCard];
    sum = firstCard + secondCard;
    renderGame();
}

This function calls the randomcard function for the first and second card and then displays the contents of the card when the renderGame function is called.

This is the renderGame function

function renderGame() {
    cardsEl.textContent = "Cards: "
    for (let i = 0; i < cards.length; i++) {
        cardsEl.textContent += cards[i] + " "
    }

    sumEl.textContent = "Sum: " + sum
    if (sum <= 20) {
        message = "Do you want to draw a new card?";
    } else if (sum === 21) {
        message = "You've got Blackjack!";
        hasBlackJack = true;
    } else {
        message = "You're out of the game!";
        isAlive = false;
    }
    messageEl.textContent = message;
}

Another function is created called the new card function is this for the third random card which is optional

function newCard() {
    if (isAlive === true && hasBlackJack === false) {
        let card = getRandomCard();
        sum += card;
        cards.push(card);
        renderGame() ;  
    }
}

It is only generated the first two did not generate a blackjack that is the sumation of the first two card was not up to 21 then another random card could be generated for a better chance to win the game.

Day 6 of 100 Days of Code