Today I started a new project after finishing the People Counter app last time. The app I want to create is called Blackjack. It's a very popular casino game and it works like that: You get 2 cards. If the sum of all cards is under 21, you are still in the game and if you want you can get a new card. If the sum is exactly 21, you've got a Blackjack and you won. If the sum of all cards is larger than 21, you've lost.

The app should look like this:

What I did first, was to create the cards in JavaScript and also the sum of the cards. Afterward, I learned about if...else conditionals. You use them to check a variable on different conditions. Here I checked whether the sum of all cards is less than 21, exactly 21 or higher than 21:

let firstCard = 10
let secondCard = 11
let sum = firstCard + secondCard

if (sum < 21){ // if 21 is larger than the sum, execute... 
    console.log("Do you want to draw a new card?")
}
else if (sum === 21){ // else if the sum is exactly 21, execute...;
    console.log("Whoo! You've got Blackjack!")
}
else { // else (every other option), execute...
    console.log("You're out of the game!")
}

In the braces, you write down the conditions with the mathematical operators. "=" sets a certain value, "==" checks if the value is the same but neglects the data types, so for example if you have a variable x with the value 2 and the condition tests for a string with the value 2, then the case is still true and the code gets executed. And lastly "===" checks for everything, also for data types. You should always use "===".

After I did this, I created two variables: hasBlackJack and isAlive. hasBlackJack is true when the player gets a Blackjack, so when the sum is exactly 21. isAlive is false when a player has lost the game and is out of the game. So he's not "alive" anymore.

let firstCard = 10
let secondCard = 11
let sum = firstCard + secondCard
let hasBlackJack = false // the set value of hasBlackJack is false, because you only have a BlackJack when the sum is 21.
let isAlive = true // the set value of isAlive is true, because the player only is out of the game when the sum is higher than 21.

if (sum < 21){ // if 21 is larger than the sum, execute... 
    console.log("Do you want to draw a new card?")
}
else if (sum === 21){ // else if the sum is exactly 21, execute...;
    console.log("Whoo! You've got Blackjack!")
    hasBlackJack = true // You have a BlackJack
}
else { // else (every other option), execute...
    console.log("You're out of the game!")
    isAlive = false // You're out of the game
}

These 2 new variables are booleans. They can have the value of true or false. I created the variables so that I can, later on, decide when to stop the game etc...

After this, I created another variable called "message", where I can save the messages that should be logged out.

let firstCard = 10
let secondCard = 11
let sum = firstCard + secondCard
let hasBlackJack = false
let isAlive = true
let message = "" // created empty string

if (sum < 21){ 
    message = "Do you want to draw a new card?" // message that should be shown in this case
}
else if (sum === 21){
    message = "Wohoo! You've got Blackjack!" // message that should be shown in this case
    hasBlackJack = true
}
else {
    message = "You're out of the game!" // message that should be shown in this case
    isAlive = false
}

console.log(message) // should be the second case, because the sum is 21.

After this, I also created the HTML and CSS files of the things we already have, so that we have something to look at:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Blackjack</title>
    <link rel="stylesheet" href="style.css" >
  </head>
  <body>
      <h1>Blackjack</h1>
      <p id="message-el">Wand to play a round?</p>
      <p>Cards:</p>
      <p>Sum:</p>
      <script src="index.js"></script>
  </body>
</html>

body{
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    background-image: url("images/table.jpg");
    background-size: cover;
    font-weight: bold;
}

h1{
    color: goldenrod;
}

#message-el {
    font-style: italic;
}

It's not finished yet, but I hope you learned something valuable.

Day 6 of learning JavaScript: Blackjack app

Subscribe to my newsletter

Sven Willhauk

Sven Willhauk