Blackjack - The Essential Guide to HTML5 - page 323

HTML5, CSS, and JavaScript features
Lets now look at the specific features of HTML5, CSS, and JavaScript that provide what we need to
implement the blackjack card game. Except for basic HTML tags and functions and variables, the
explanations here are complete. If you have read the other chapters, you will notice that much of this
chapter repeats explanations given previously. Remember that you can skip ahead to the “Building the
application” section to see the complete code for the game with comments and then return to this section
for more explanation.
Source for images for card faces and setting up the Image objects
I did find an excellent source for the card faces: www.eludication.org/playingcards.html . This site
uses something called the Creative Common License, and the rules of the Creative Common License are
described at http://creativecommons.org/licenses/by-sa/2.5 / . It requires any user to give credit,
and I will demonstrate how I chose to do this.
After copying the files to your computer, we need a way to access 53 (52 cards plus one image for the
back) image files without writing 53 different file names. This can be accomplished because the file names
follow a pattern. The builddeck function is the following:
function builddeck() {
var n;
var si;
var suitnames= ["clubs","hearts","spades","diamonds"];
var i;
i=0;
var picname;
var nums=["a","2","3","4","5","6","7","8","9","10","j","q","k"];
for (si=0;si<4;si++) {
for (n=0;n<13;n++) {
picname=suitnames[si]+"-"+nums[n]+"-75.png";
deck[i]=new MCard(n+1,suitnames[si],picname);
i++;
}
}
}
Notice the nested for loops. A for statement is a way to program code to repeat, generally referred to as
looping , for a specified amount of time. The three parts inside the parentheses specify an initial
statement, a condition for continuing, and an increment action. These can be any expressions, but,
typically, they refer to a single variable, called the looping or index variable . The first statement
initializes the variable; the second indicates a comparison operation; and the third is an increment or
decrement expression. for statements are common when dealing with arrays.
In this function, the outer loop manages the suits and the inner loop the cards within each suit. The
picname variable will be set to the names of the files that we downloaded from the source. The MCard
function is the constructor function to create a MCard object, that is, objects of the class we defined as a
programmer-defined class of objects. n+1 will be used as the value of the card, and there will be some
adjustment for the face cards.