Blackjack


The game of Blackjack (also known as Twenty-One) is a pretty simple card game. Each card has a value associated with it. Players take cards in an effort to near a total value of 21, without going over. The player who gets the closest without going over, wins.


There are a few other rules involved (soft and hard totals, insurance, blackjack, etc.) but we won't concern ourselves with that. Instead, we'll make a simplified version of Blackjack that, given more time, could turn into a complete game.


We won't simulate dealing from a deck of playing cards. Instead, when a player needs a card we'll just pick a random number 1 through 11 (inclusive) and pretend the player got a card with that exact value. We also won't deal with a player getting a blackjack (being given 2 cards that automatically put them at 21, meaning that they automatically win even if another player is able to reach 21).


Here's what our rules will be:

  1. 2 players play at a time
  2. at the start of a round, each player is given 2 cards
  3. each player's total is equal to the sum of the 2 cards they were dealt
  4. the players' starting totals should be shown
  5. player 1 then elects whether to:
    1. "stay" (meaning, he/she wants NO more cards this round)
    2. "hit" (meaning, he/she should be dealt 1 more card and their total should be updated)
  6. a player who stays, is done for this round
  7. a player who hits, can elect whether he/she wants to hit again or stay
  8. if a player goes over 21, they shouldn't be given the option to stay/hit (this is called busting) as they have automatically lost
  9. player 2 then chooses his/her actions (hit, stay, etc.)
  10. after player 2 is done making his/her actions, we should figure out who won (if anyone) and display the proper message

Starting Out

Save this web page to your computer, rename it so that your initials are in it, then open it up in your favorite editor. Take a look at it.

Notice:

  1. there are some spans with a special id, used to represent each player's total (p1total, p2total) as well as whose turn it is (currentturn)
    • Note: We could set the innerHTML of each element to change what it says.
  2. A round of play will take several actions and function calls, so we'll need some global variables to keep track of:
    • player 1's total (call it, p1total)
    • player 2's total (call it, p2total)
    • whose turn it is (player 1's turn [make this equal 1 if it is player 1's turn], or player 2's turn [make this equal 2 if it is player 2's turn])
  3. We'll need a way to generate random numbers between 1 and 11 inclusive.

Lab 8 may be useful as a reference because it used global variables and random number generation.

Steps

This lab won't tell you exactly what to do. You've got several sources (past labs, in class demos, each other, etc) that are available to help you. That being said, here's how I recommend doing this lab (unless you're brave, for each step don't go to the next one if your past one isn't working):

  1. Make a drawCard function that returns a number 1 - 11 (since you'll use it in several places).
    • Test it by temporarily adding this to a button: onclick="alert(drawCard())"
  2. Get the "New Round" button working by having it call some sort of new round function.
    • It should make it currently player 1's turn by setting the proper global variable.
    • It should reset both player's totals to 0, then give each player 2 cards. Use several calls to alert() to make sure this is working.
  3. Get your doUpdate function working (see below) so that the web page correctly shows each player's total as well as whose turn it is. Make your new round function call this after it is nearly finished, so that the page is updated on a new round.
  4. If it is player 1's turn and the player clicks the "Stay" button, then make it player 2's turn . If it is already player 2's turn, determine who was closest to having a total of 21 without going over (this will probably require several if statements). That person is the winner. Tell them so. By this point, you should be nearly done except for the fact that players are stuck with whatever cards they initially were given.
  5. If the player clicks the "Hit" button, give them a card (add a random number 1 - 11 to their total). If this causes them to go over 21 tell them that they have busted, it should become the next player's turn. If player 2 has busted, then figure out who the winner is.

Functions

I highly recommend that you make (and test) these functions to help you out:

  1. hasBusted(cardTotal) : given an integer total, returns true if the total is > 21 and false if total < = 21.
  2. drawCard() : returns a random number 1 - 11.
  3. doUpdate() : this one updates the following (This way, whenever SOMETHING has changed, you can just do doUpdate() and you can be sure that the web page will be updated. Use document.getElementById('elementidhere').innerHTML = 'new value'; to update the HTML of, e.g., a span.):
    • player 1 total ('p1total' element)
    • player 2 total ('p2total' element)
    • current turn ('currentturn' element)

Finishing Up

If time is running out, BE SURE that you submit your lab to the class FTP directory.


If there is time, attempt one or more of the following and call me over to show me your lab:

  1. Properly deal with the problem that a player MIGHT be initially given 2 cards with a value of 11, meaning that they automatically lose. In real blackjack, this can never happen.
  2. When player 2 is choosing whether to hit/stay, display ONLY the original total of player 1. That way, player 2 is not able to see how high/low he/she must go in order win. When player 2 is done choosing his/her action, the totals should be updated.
  3. Have the game keep an ordered list representing a log of what has occured ("Player 1 was dealt a 2.", "Player 1 was dealt a 5.", "Player 1 has chosen to stay.", etc.)
  4. For the list idea, directly above, make use of &spades; &clubs; &hearts; and &diams; to pretend that a player was dealt a specific suit (e.g., "Player 2 was dealt a 5♠"). You could maybe even make the hearts and diamonds text be red.
  5. Give players an initial account balance, and have each game be worth $5. The winner of each round gets $5 from the loser (or, let the players determine how much each round is worth).
  6. Hide the hit and stay buttons until after the new round button has been pressed.