Day 6 of learning JavaScript: Blackjack app
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.