Sams Teach Yourself JavaScript in 24 Hours Free Open Book

Sams Teach Yourself JavaScript in 24 Hours

Previous Page
Next Page

Adding Style with CSS

The game will also need a small CSS file to define the appearance of some of the game elements. Listing 22.2 shows the CSS file for the Poker Solitaire game.

Listing 22.2. The CSS File for the Poker Solitaire Game

h1 {
   font-size: 125%;
}
td.score {
   font-size: 80%;
   border: 1px solid silver;
   width: 53px;
}
#total {
   border: 1px solid black;
   font-size: 105%;
   padding: 5px;
}
#totalscore {
   text-align: center;
}

The CSS rules set the size of H1 headers, and then define a border, width, and font size for td elements in the score class, which will display each row's score. Finally, a border, font size, and padding are defined for the "Total Score" display, and the numeric score is centered.

Try It Yourself

Putting It All Together

To get the game working, you'll need to use the complete JavaScript file that incorporates the functions you learned about earlier in this hour. Listing 22.3 shows the JavaScript file for the game.

Listing 22.3. The Complete JavaScript File for the Poker Solitaire Game

// global variables
var tally = new Array(14)
var nextcard = 1;
var nexti = new Image(53,68);
// numeric comparison for sort()
function numsort(a, b) {
   return a - b;
}
function InitGame() {
   if (!document.getElementById) return;
   stat=document.getElementById("status");
   stat.innerHTML="Next Card";
   nextcard = 1;
// array for board contents
   board = new Array(26);
   for (i=1; i<26; i++) {
      board[i] = new Card(0,"x");
      obj=document.getElementById("card"+i);
      obj.src = "blank.gif";
      obj.onclick = PlaceCard;
   }
   // fill the deck (in order, for now)
   deck = new Array(53);
   for (i=1; i<14; i++) {
     deck[i] = new Card(i,"c");
     deck[i+13] = new Card(i,"h");
     deck[i+26] = new Card(i,"s");
     deck[i+39] = new Card(i,"d");
   }
   // Clear the scores
   Score();
   // shuffle the deck
   n = Math.floor(100 * Math.random() + 200);
   for (i=1; i<n; i++) {
      c1 = Math.floor(52*Math.random() + 1);
      c2 = Math.floor(52*Math.random() + 1);
      temp = deck[c2];
      deck[c2] = deck[c1];
      deck[c1] = temp;
  }
  // draw the first card on screen
  next=document.getElementById("dcard");
  next.src = deck[nextcard].fname();
  // preload the next image
  nexti.src = deck[nextcard+1].fname();
   obj=document.getElementById("newgame")
   obj.onclick=InitGame;
} // end InitGame
// place the draw card on the board where clicked
function PlaceCard(e) {
   if (!e) var e = window.event;
   // which space on the board was clicked?
   thiscard = (e.target) ? e.target: e.srcElement;
   pos = thiscard.id.substring(4);
   if (board[pos].suit != "x") {
      return;
   }
   drawcard=document.getElementById("dcard");
   thiscard.src = deck[nextcard].fname();
   drawcard.src = "blank.gif";
   board[pos] = deck[nextcard];
   nextcard++;
   Score();
   // Game over?
   if (nextcard > 25) {
      EndGame();
   }
   else {
      drawcard.src = deck[nextcard].fname();
   // cache next image for draw pile
      nexti = new Image(53,68);
      nexti.src = deck[nextcard+1].fname();
   }
}
// check for completed rows and display row scores
function Score() {
   score=document.getElementById("totalscore");
   totscore = 0;
// rows
   for (x=0; x<5; x++) {
      r = x * 5 + 1;
      a =
AddScore(board[r],board[r+1],board[r+2],board[r+3],board[r+4]
,"row"+x);
      totscore += a;
   }
// columns
   for (x=0; x<5; x++) {
      r = x + 1;
      a =
AddScore(board[r],board[r+5],board[r+10],board[r+15],board[r+20]
,"col"+x);
      totscore += a;
   }
// diagonals
      a = AddScore(board[5],board[9],board[13],board[17]
,board[21],"diag1")
      totscore += a;
      a = AddScore(board[1],board[7],board[13],board[19]
,board[25],"diag2")
      totscore += a;
      score.firstChild.nodeValue = totscore;
}
// check for poker hands
function AddScore(c1,c2,c3,c4,c5,scorebox) {
   obj=document.getElementById(scorebox);
   straight = false;
   flush = false;
   royal = false;
   pairs = 0;
   three = false;
// sorted array for convenience
   nums = new Array(5);
   nums[0] = c1.num;
   nums[1] = c2.num;
   nums[2] = c3.num;
   nums[3] = c4.num;
   nums[4] = c5.num;
   nums.sort(numsort);
// no score if row is not filled
   if (c1.num == 0 || c2.num == 0 || c3.num == 0
       || c4.num == 0 || c5.num == 0) {
      obj.innerHTML="";
       return 0;
   }
// flush
   if (c1.suit == c2.suit && c2.suit == c3.suit
      && c3.suit == c4.suit && c4.suit == c5.suit) {
      flush = true;
   }
// straight
   if (nums[4] - nums[3] == 1
    && nums[3] - nums[2] == 1
    && nums[2] - nums[1] == 1
    && nums[1] - nums[0] == 1) {
      straight = true;
   }
// royal straight (10, J, Q, K, A)
   if (nums[1] == 10 && nums[2] == 11 && nums[3] == 12
    && nums[4] == 13 && nums[0] == 1) {
      straight = true;
      royal = true;
   }
// royal flush, straight flush, straight, flush
   if (straight && flush && royal) {
      obj.innerHTML="Royal Flush<br>250";
      return 250;
   }
   if (straight && flush) {
      obj.innerHTML="Straight Flush<br>50";
      return 50;
   }
   if (straight) {
      obj.innerHTML="Straight<br>4";
      return 4;
   }
   if (flush) {
      obj.innerHTML="Flush<br>5"
      return 5;
   }
// tally array is a count for each card value
   for (i=1; i<14; i++) {
      tally[i] = 0;
   }
   for (i=0; i<5; i++) {
      tally[nums[i]] += 1;
   }
   for (i=1; i<14; i++) {
// four of a kind
      if (tally[i] == 4) {
         obj.innerHTML="Four of a Kind<br>25";
         return 25;
      }
      if (tally[i] == 3) three = true;
      if (tally[i] == 2) pairs += 1;
   }
// full house
   if (three && pairs == 1) {
      obj.innerHTML="Full House<br>8";
      return 8;
   }
// two pair
   if (pairs == 2) {
      obj.innerHTML="Two Pair<br>2";
      return 2;
  }
// three of a kind
   if (three) {
      obj.innerHTML="Three of a Kind<br>3";
      return 3;
   }
// just a pair
   if (pairs == 1) {
      obj.innerHTML="Pair<br>1";
      return 1;
   }
// nothing
   obj.innerHTML="No Score<br>0";
   return 0;
// end AddScore()
}
// game over - final score
function EndGame() {
   stat=document.getElementById("status");
   stat.innerHTML="<b>Game Over</b>";
}
// make a filename for an image, given Card object
function fname() {
   return this.num + this.suit + ".gif";
}
// constructor for Card objects
function Card(num,suit) {
   this.num = num;
   this.suit = suit;
   this.fname = fname;
}
// event handlers to start game
window.onload=InitGame;

Watch Out

Because this is the longest code listing in this book, I recommend you download the files from this book's website rather than type it all in. You'll need the card graphics to make it work anyway.


To try the game, make sure you have everything you need in one folder:

  • The HTML document

  • The CSS file (pokersol.css)

  • The JavaScript file (pokersol.js)

  • All 53 graphics (52 cards plus blank.gif)

You can now load the HTML file to test the game. Figure 22.3 shows the Poker Solitaire game after a complete gameit shouldn't take you long to beat my score.

Figure 22.3. The Poker Solitaire example at the end of a game.



Previous Page
Next Page
Index: [SYMBOL][A][B][C][D][E][F][G][H][I][J][K][L][M][N][O][P][Q][R][S][T][U][V][W][X][Y]


     Main Menu
Sams Teach Yourself JavaScript in 24 Hours
Table of Contents
Copyright
About the Author
Acknowledgments
Part I: Introducing the Concept of Web scripting and the JavaScript Language
Part II: Learning JavaScript Basics
Part III: Learning More About the DOM
Part IV: Working with Advanced JavaScript Features
Part V: Building Multimedia Applications with JavaScript
Part VI: Creating Complex Scripts
Hour 21. Building JavaScript Drop-Down Menus
Hour 22. Creating a JavaScript Game
About the Game
Creating the HTML Document
Creating the Script
Adding Style with CSS
Summary
Q&A
Quiz Questions
Quiz Answers
Exercises
Hour 23. Creating JavaScript Applications
Hour 24. Your Future with JavaScript
Part VII: Appendixes
Index


More Books
PHP Hacks
Processing Xml With Java - A Guide To Sax, Dom, Jdom, Jaxp, And Trax
The Koran (Holy Qur'an)
Macromedia Flash 8 Bible
Search Engine Optimization for Dummies
YouTube Traffic
PHP 5 for Dummies
Harry Potter and The Chamber of Secrets
Harry Potter and the Sorcerer's Stone
The Pilgrim's Progress
Wireless Hacks
Flash Hacks. 100 Industrial-Strength Tips & Tools
PayPal Hacks. 100 Industrial-Strength Tips and Tools
Amazon Hacks
Pdf Hacks
The Da Vinci Code
Google Hacks
The Holy Bible
Windows XP For Dummies
Harry Potter and the Half-Blood Prince
Seo Book
Upgrading and Repairing Networks
Macromedia Dreamweaver 8 UNLEASHED
Windows XP Annoyances
Windows XP Hacks
Microsoft Windows XP Power Toolkit
Teach Yourself MS Office In 24Hours
iPod & iTunes Missing Manual
PC Hacks 100 Industrial-Strength Tips and Tools
PC Overclocking, Optimization, and Tuning - 2th Edition
PC Hardware In A Nutshell 3rd Edition
PC Hardware in a Nutshell, 2nd Edition
Upgrading and Repairing PCs
Google for Dummies
MySQL Cookbook
Teach Yourself Macromedia Flash 8 In 24 Hours
PHP CookBook
Sams Teach Yourself JavaScript in 24 Hours
PHP5 Manual
Free Games Paper Airplanes
500 Juegos Gratis 500 Giochi Gratis 500 Jeux Gratuits 500 Jogos Gratis 500 Kostenlose Spiele