Sponsored Ads

Create and shuffle a deck of cards.

We start with the virtual deck of cards within Perl. The creation of the deck is handled by nested loops, which says, "For each suit, make my a card for each card number: 2 through Ace". 4 suits times 13 numbers = 52 cards. Each card is stored in an array position in the format "$num.$suit".

This not string concatenation, in the classic Perl sense. This is string building, so as "A.C" is the Ace of Clubs, "7.H" is the 7 or hearts, and so on for 52 combos. The "dot" here is critical for later string processing.

@init_suits =  ('C','H','D','S');
@init_nums = (2,3,4,5,6,7,8,9,10,'J','Q','K','A');
   foreach $suit (@init_suits){
      foreach $num (@init_nums){
         $init_cards[$i] = "$num.$suit";
         $i++;
      }
   } 
			

Now that the deck has been created, we need to randomize the array positons. This creates a new array of 52 cards in a "shuffled" state. I realize that I could have just chosen one card without the necessity of creating a fully randomized deck, but, heck, why not show the whole jalopy:

srand;
while (@init_cards){
   push(@new, splice(@init_cards, rand @init_cards, 1));
}			
			

We've created a shuffled array called "@new" containing all 52 cards, in random order. It's needlessly complicated for this one card example, but I've laid out the groundwork for more interesting demonstrations.

Pick One Card

For the purposes of ye olde random card, I need to pick one card from the deck. My main question is "Hey, can I trust the dealer?" It's a web server, without subjectivity. I'm going to let him deal me one from the top.

$this_card = $new[0];
			

Essentially, $this_card now holds the information for one card in a "number dot suit" code.

HTML and CSS Magic

There are many ways to skin a cat and many ways to display simulated cards over the web. You could create individual image files for all 52 cards in the deck, but that would be a waste of bandwidth and effort. Also, images for the web are usually bitmapped or raster based. meaning when to enlarge them, the edges become jagged.

A solution that lowers bandwidth, allows for clean enlargement of cards, and everything else was developed by Mike Hall at BrainJar.com. Consider his source to be a better repository that mine.

We going to create cards using HTML and CSS. The first thing to realize is that the suit markers can be rendered as text in most browsers, because they are symbols reserved within the HTML specification called "Entities":

♣ - Clubs = ♣
♥ - Hearts = ♥
♦ - Diamonds = ♦
♠ - Spades = ♠
      

Next we have to determine the positions of the suit markers for specific cards. BrainJar.com's Example tells us that there are 3 possible columns of dots per card, and that each column can have 5 mark positions. That leaves us with 15 marker positions to layout in CSS and to track in our brains:

.spotA1 { position: absolute; left: 0.60em; top: 0.5em; }
.spotA2 { position: absolute; left: 0.60em; top: 1.5em; }
.spotA3 { position: absolute; left: 0.60em; top: 2.0em; }
.spotA4 { position: absolute; left: 0.60em; top: 2.5em; }
.spotA5 { position: absolute; left: 0.60em; top: 3.5em; }

.spotB1 { position: absolute; left: 1.55em; top: 0.5em; }
.spotB2 { position: absolute; left: 1.55em; top: 1.0em; }
.spotB3 { position: absolute; left: 1.55em; top: 2.0em; }
.spotB4 { position: absolute; left: 1.55em; top: 3.0em; }
.spotB5 { position: absolute; left: 1.55em; top: 3.5em; }

.spotC1 { position: absolute; left: 2.50em; top: 0.5em; }
.spotC2 { position: absolute; left: 2.50em; top: 1.5em; }
.spotC3 { position: absolute; left: 2.50em; top: 2.0em; }
.spotC4 { position: absolute; left: 2.50em; top: 2.5em; }
.spotC5 { position: absolute; left: 2.50em; top: 3.5em; }