Overview of the Game Blackjack For those who have never played Blackjack, here's a quick overview of the game to get your familiar with what you will be doing.
There are 2 participants - you (the player) and the dealer. The objective of the game is to add cards to your hand until the sum of the cards total 21. You and the dealer can keep adding cards (valued from 1-11) to your hands until you reach 21. Initially you will have two cards, and you can decide if you want the dealer to deal you cards (call "Hit Me") or to not add any more cards (call "Stay"). If either side goes over 21, they "bust". When the betting is over and both sides stop adding cards to their hand, the side with the higher value (that MUST be less than or equal to 21). If the player gets 21, they win no matter what. Similarly, if the dealer "busts", then the player automatically wins.
Our Blackjack Game
For our blackjack game, we will create randomizers for the dealer's and the player's card which will generate the result of the game - win or bust. As players, we have a choice to place a bet of 5$ to play safe or to hard and place a bet of $100. Clicking on place bet will finalize your bets and clicking on play will test your fate. After the results are out, You can click on new hand to play a new game. If your luck is bad and you run out of money, Don't worry! We place a more cash button which will allow us to get back some money and continue playing. How I wish life was the same when I went broke.
A.HTML Layout
Step 1:
Create a Hw8 folder, and open NotePad++. Save the file as BlackJack.html.
Step 2:
1. Write out the HTML Skeleton (See Lab 1 if you have trouble with this).
o Include the <style> and <script> tags within your <head> tag.
2. Center everything in the body.
3. Create a heading of the largest size ie. h1 that says, "Let's Play Blackjack" 4. Insert a horizontal line below the heading.
5. Make a table. This table will contain 2 rows and 4 cells in each row. In the first row, you will use the <th> tags for the four column headers ("Your Total", "Dealer Total", "Bet Amount", "Cash Remaining"), and in the second row you will use the <td> tags for the cells.
6. For the <td> tags, put <p> tags in between the <td> tags and add in between the <p> tags. Example:
7. For the cell under the "Cash Remaining" column, replace with the value of $2000, which is the amount of cash we will start with.
B.CSS Styling
Things look a bit out right now, so we'll need to add some CSS tags to make it look better.
Step 1:
Within the <style> tags, you will:
1. Download the cards and Blackjack image from the lab page on the course website and save it in the HW8 folder.
2. For your body, change the font color to white.
3. Set the background to be the image you just downloaded. Give an id of bg to it.
4. For td, change the width, height, background-color and text-align attributes. The width should be 120px, the height to 50px, the background to color white and text should be aligned to center.
5. For hr, set the width to 50%.
6. For th, set the color to white.
7. For img, set height to 200px.
8. Give the table border to 2px.
9. For the rest of the webpage, add the further styling to make it look nicer.
C.HTML Buttons
Now that we have our HTML layout and CSS styling in place, you'll need to add buttons to give the user something to use to play the game.
For this page, we're going to have SIX buttons - a button for betting $5 and $100, a button for place bet, a new hand button, a play button and a more cash button.
Explanation of Button functionality
• 5$ - Adds 5$ to bet
• 100$ - Adds 100$ to bet
• Place bet - Button which places the bet and allows you to play the game
• Play - Gives you a random number for dealer and player which decides the game
• New Hand - Allows you to create a new game
• More Cash - Allows you to add $100 to your remaining cash
1) After the end of your table, add a <p> tag with the id of 'result" after your table.
2) The buttons will be on two different rows. You will NOT be using any <table> or <tr> tags.
Instead, you will separate each row using two <br/> tags. Add <button> tags with: a) Row 1 contains: $5, $100, Place Bet
b) Row 2 contains: Play, New Hand, More Cash
3) Add on onclick="" to each of the button tags.
D.JavaScript Functionality
Like in the previous lab, you are going to use JavaScript to create the backbone of this game.
Step 1:
1. Inside your <head> tag, include a <script> tag much like we've done before. Your variable declarations will go in the <script> tag.
2. For this page, we need a total of six variables:
o player - keeps track of player's hand o dealer - keeps track of dealer's hand o bet - current bet amount o totalBet - Total bet amount o cash - The amount of cash remaining o betPlaced - Boolean placed for place bet o name - your name
3. Declare the variables above, and then set player, dealer, bet, totalBet equal to 0 (the starting amount). Set name equal to your name (in quotes) and cash equal to 2000. Set betPlaced to false
Step 2:
In order to output values inside each of the <td> cells, we need to include a reference id to our <p> tags. In this lab, we have 4 different ids, one for each of the cells (not including the "result" tag you added earlier).
Go back to your <td> tags and assign an id to each <p> tag inside the <td>, have the ids be:
• "Player" for Your Total
• "Dealer" for Dealer Total
• "Bet" for Bet Amount • "Cash" for Cash
Your tags will look something like the following: <td><p id="Player"> </p></td>
Step 3:
Now that we have all of the structure in place let's bring our buttons to life. When the $100 button is clicked, we want to add 100 to the value of bet, and also call the function displayBet() to display our bet. To call a function, simply, type in the name of the function.
• In your onclick for this button, add $100 to the value of bet with bet+=100;. Call the function displayBet with displayBet();.
We do the same thing when you click on $5 button except the bet is incremented by $5
When you click on the $100 button, nothing should happen right now. Why? You CALL the functions when you click on the buttons, but you have not yet DEFINED the functions yet. Think of a function call as telling someone to build a window. If you haven't given anyone instructions on how to build the window, as in, if you haven't specified how the window should look like, what the dimensions are, or how the window should function, you can't build the window properly.
What is this function doing?
In the displayBet() function, we look for the tag that contains the id of "Bet" and puts the totalBet amount into the HTML at that tag. This effectively displays the bet.
If you click on the Bet $100 button, your bet amount should increment by how much money you added.
Step 4:
Now let's implement the functionality for Place Bet button. When the user clicks on place bet, it changes the Boolean value of betPlaced to true to ensure that the bet amount is now fixed. It now tells the player "Try your luck and Hit Play!"
In your onclick for button Place Bet, we call the function placeBet()
Similar to display bet, we create the function of placeBet within our javascript tags.
We will define the contents of placeBet() as follows:
Step 5:
Now the user is ready to play the game. We click the play button which calls the play() function. The javascript built in random number generator will simulate the scores for us.
This is what clicking the play button will do:
• When the player clicks the play button, it will call the function play() so that the game will determine a random value between 1 (Ace) and 11 (face card) for the player, and add it to a previous value the player already may have gotten (starting from zero). The total number will be shown on the screen.
• Then it will check if the player has already gotten 21 or more. If the player has, we will check several cases to determine the winnings or losses.
• Finally, it will display the proper result message as well as update the user's cash based on if the user had won or lost.
1) Create the following within the <script> tags:
2) We need to call the function hence when play button is clicked, we call the function play() in onclick.
3) We will continue to define the play function. We use if-else statements to decide whether bet is placed or not.
4) In the else section we continue our function to play the game. We use the line below to generate a random number between 1 to 23 for the dealer and 1 to 25 for the player.
5) We need to show what number was generated for Player. To do so, we will update the innerHTML of the Player id. How do we do this? Hint: Do you remember we displayed the bet amount in displayBet()? It is very similar to it. We also do the same for Dealer and Bet id.
6) Now we use another series of if-else statements to decide who won and who loss.
7) Deduct the bet amount from cash using the equation cash=cash-totalBet.
8) If cash <0, we give an alert saying - "You have no money left!"
9) There are Five cases to consider with priority to decide the winner
a) If the player busts, the player loses no matter what (busted means more than 21). The result message you should display is: "Busted! You lose!"
b) If the dealer busts and the player hasn't busted, then the dealer loses. The player will receive 2x the bet amount as winnings added to the winnings total. The result message you should display is: "Dealer busted! " + name + " wins!"
c) If the player gets 21, then the player wins no matter what. They player will receive 3x the bet. The result message you should display is: name + " got 21! " + name + " wins!"
d) If neither conditions 1-3 are true, then if the player has a larger value than the dealer, then the player wins. The player will receive 2x the bet. The result message you should
display is: name + " wins!"
e) If neither conditions 1-4 are true, then if the dealer has equal or greater value than the player, then the player loses. The result message you should display is: "Dealer wins!"
10) We will achieve this using a series of if/else-if statements.
If/else-if statements are a special case of if/else statements that making nesting them extremely easy. They show mutual exclusivity. A condition may only proceed if it has failed all previous tests, and will exit the test as soon as it becomes true.
In the above sample, I bet $300. Then, I clicked on Place Bet and then Play. The dealer got 20 while I got 16. Hence, I lost the round and also lost $300 from my cash.
There are 4 other cases as defined in the red numbered steps above. Make sure you are able to get the other cases when you click play.
Step 6:
For the last thing, we need to make our new hand button and more cash button function correctly. We will be implementing both these functions.
newHand() is will clear all values except the cash in order for a fresh start.
1) Create a function newHand().
2) We need to clear all the value except the cash. To do this we set the innerHTML of each variable to empty strings ("") and for id Cash we assign it the variable cash.
3) We will be doing this for the id's - Player, dealer, Bet and Result.
4) We set our Boolean betPlaced to false and set the total bet and bet to 0.
5) Lastly, inside the onclick in the new hand button, we call the function newHand()
Our more cash button should call a function called updateMoney() which will show the updated value of our cash.
1) We add an onclick function to more cash button. Within this function, we will increment the cash by $100. The method is similar to our 5$ and 100$ button.
2) We will call a function called updateMoney() within this onclick.
3) After our newHand function, we will write our updateMoney function.
4) This function is similar to our displayBet() but in this case we will only change our Cash id to display the changes.
Step 7:
That's it! You're all done! Now all you have to do is test it and make sure everything works. You should be able to place bets of varying dollar amounts, and it should be subtracted from your net winnings properly. You should win some games versus the dealer, and lose some. Your net winnings should be updated after each game accordingly.
E.Putting it all online Step 1: Modify your CSE3Page.html to include a link to your BlackJack.html.