Lab: Working with Playing Cards

playing cards, fanned Each playing card is specified by a suit (clubs, diamonds, hearts, spades) and a rank (2,3,4,5,6, 7, 8, 9, 10, J, Q, K, A). You should represent a deck of cards with a 52 element array consisting of the numbers from 0 to 51. Each suit should be represented by 13 consecutive integers: clubs will be 0-12, diamonds 13-25, hearts 26-38, spades 39-51. The lowest value in each suit will represents a '2' card, and the highest will represent an 'A' (ace). The following table shows some of the encodings:


Some of the card encodings
Value 0 1 2 11 12 13 16 21 22 26 51
Card 2C 3C 4C KC AC 2D 5D 10D JD 2H AS

A bit of simple arithmetic can accomplish the decoding of the integers from 0-51 into the cards they represent. Let n be such an integer. Then Math.floor(n/13) will be 0 for n=0-12 (the clubs), 1 for n=13-25 (the diamonds), etc. So the whole number of times 13 "goes into" n represents its suit. The rank of each card n is specified by the remainder of that division. The Javascript operator '%' calculates remainders. (It is also called the modulus operator.) For example, 13%5 is 3, and 22%3 is 1. Continuing our example, n%13, will return a value from 0-12, with 0 representing 2's, 9 representing 'J' (jacks), and 12 representing 'A' (aces).

Step 1:

Write a page, permute.html, that uses Javascript to generate and display a random permutation of the integers 1-10. Here's a possible design.

  1. Create a mostly empty permute.html, but with an empty Javascript function, permute() in the header (we'll define the function in a sec). So your <head> element will include a <script type="text/javascript"> element that contains the JS code to define permute.
  2. Define an array holding the 10 integers in the header as well. This should be a global JS variable, numbers
  3. Define permute to randomly permute the contents of the array via 1000 random swaps. You can generate random array indices using Math.random(). I.e., in each of the 1000 iterations, generate two random numbers between 0 and 9 and use those as indices into the array to determine which elements of the array are swapped.
  4. Define printPermutation in the header to use document.write to print the contents of numbers.
  5. In the body of the html, invoke permute, then printPermutation.

If you are having trouble remembering how to structure an html/javascript document that defines Javascript functions and then invokes them in the body, see a related example, params.html.

In your lab document, cut and paste the resulting output of permute.html and label it "Step 1".

Step 2:

In the file cards.js, write two javascript functions, suit() and rank() that take a single integer 0-51 as a parameter and return the suit and rank of the card, respectively. The function suit() should return 'C', 'D', 'H' or 'S'. The function rank() should return '2', '3', ...,'10', 'J', 'Q', 'K', 'A'. Your functions should be defined in a file named "cards.js". You may want to define a 13 element array called cardRank:

var cardRank = ['2','3', '4', ... 'K', 'A'];

(I'll leave you to supply the "..." part.) You can use this array to quickly convert the result of your % operator into a printable representation of a card's rank.)

To test your functions, also write a function testCards() that takes no parameters and loops through all the integers from 0 to 51 and generates an html representation of each card (use document.write()). Write an html file, testCards.html, that invokes testCards(). You should get a web page that looks something like:

Here are the cards:

2C
3C
4C
...
QS
KS
AS

So your page will have about 52 lines (one for each card). To debug, in WebStorm, place a breakpoint in the loop in testCards() and seeing what values are returned by suit() and rank().

Copy the output from your browser into the lab document, making sure to label the section "Step 2".

Step 3: Dividing a deal into four hands

To "shuffle" a deal, you will use random permutation. Augment cards.js to declare a global variable, deal, and set it to be an array of the integers from 0 to 51. You could do this literally with something like

var deal = [0, 1, 2, ....., 50, 51]

but I don't like typing that much, so I'll use a loop:

var deal = new Array();
for (var i=0;i<52;i++) { deal[i]=i;    }

Okay, now to "deal" the cards. Create four global variables called, north, south, east, west. Each will be an array of 13 integers (the 13 cards of each player's hand). Each of those integers will be in the range 0-51, as discussed in Step 1. Write a new function in cards.js called dealHands(). This function should first set deal to be a random permutation of the integers from 0-51. Do this by using a variation of the permute function from Step 1, and passing it deal as the parameter. Next dealHandsshould place the first 13 values in (the now randomized) deal into north, the next 13 into east, the next into south, and the last into west. You can use 4 for loops to do this, one for each hand. Here's an example: 

for (var i=0; i<13; i++) { north[i] = deal[i]; }

Be careful with the values you use inside the [ ] for the other three hands, you'll want to end up with the indices 0-12 referencing the values in all four of the arrays north, east, south, west.

Modify testCards.html so that it invokes dealHands(). Set a WebStorm breakpoint at bottom of dealHands and examine the values of north, south, east and west to see if they look okay when you load the page. Cut and paste an image from your debugging session that shows the values of these four variables. Label the image Step 3a.

Write a function called testDeal() that invokes dealHands() and then prints (via document.write) an html representation of each of the four hands. Use the rank and suit functions you've already written. Your first attempt might have something like

for (var i=0; i<13; i++) { document.write(rank(north[i])+suit(north[i])+" "); }

Alter testCards.html so that it calls testDeal. If you generate appropriate html to provide hand labels and line breaks you might get output something like :

North: 5D QC 3D AH 7S 2S 4D JC 10S 7D JH 4C AS
South: QD ....

Copy the output from your browser into the lab document, lab4.doc, making sure to label the section "Step 3b".

Submit a zip file containing your lab document, testCards.html and cards.js