Javascript Tutorials

JavaScript Zone

Script Tutorials

Introduction
Pre-requisites
Installation

12. Video Blackjack

Introduction

Downloads

Card Graphics zip file

Credits

Carl Kaneta

Links

Thompp's Javascripts Index
Thompp nation Home Page

Use this script to play blackjack - also known as Pontoon in the UK, and as "21".

Thanks to Carl Kaneta for the original card graphics.

Click below to try out the game..

Video Blackjack Demonstration

Pre-requisites

there are no pre-requisites for this tutorial

Installation

create a folder called "cards" and unload the card graphics zip file into this directory
Update your html page - add the following code as indicated:

1/3. Add the following code to the <head> part of the page: =========================================================== <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var deck=new Array; var hand=new Array(5); var hcrd=new Array(5); var hsut=new Array(5); var bank=new Array(5); var isPlaying=-1; var betn=1; var dpos=0; var crdts; var numhands = 4; var iplayer=0; var ibank=0; var igame=0; var icredits=50; /* ----------------------------------------------------------------------------------------- */ function initdeck() { crd=0; for(i=0;i<4;i++) { if(i==0){st="club";} else if(i==1){st="heart";} else if(i==2){st="diamond";}else{st="spade";} for(c=1;c<14;c++) { if(c==1){num="ace";}else if(c==11){num="jack";} else if(c==12){num="queen";}else if(c==13){num="king";}else{num=c;} deck[crd++]=st+"|"+num; } //for c } //for i credits.innerHTML="Credits: "+icredits; } /* ----------------------------------------------------------------------------------------- */ function shuffledeck() { for(i=0;i<500;i++) { //shuffle the cards(mix up the deck) tmp = Math.round(Math.random()*51); tmp2= Math.round(Math.random()*51); stmp = deck[tmp]; deck[tmp] = deck[tmp2]; deck[tmp2] = stmp; } } /* ----------------------------------------------------------------------------------------- */ function showcard(who,cnum) { if (who=="card") { p = hand[cnum].indexOf("|"); s = hand[cnum].substring(0,p); c = hand[cnum].substring(p+1,hand[cnum].length); if(cnum==0){document.images.card1.src="cards/"+s+c+".gif";} else if(cnum==1){document.images.card2.src="cards/"+s+c+".gif";} else if(cnum==2){document.images.card3.src="cards/"+s+c+".gif";} else if(cnum==3){document.images.card4.src="cards/"+s+c+".gif";} else{document.images.card5.src="cards/"+s+c+".gif";} } else { p = bank[cnum].indexOf("|"); s = bank[cnum].substring(0,p); c = bank[cnum].substring(p+1,bank[cnum].length); if(cnum==0){document.images.bank1.src="cards/"+s+c+".gif";} else if(cnum==1){document.images.bank2.src="cards/"+s+c+".gif";} else if(cnum==2){document.images.bank3.src="cards/"+s+c+".gif";} else if(cnum==3){document.images.bank4.src="cards/"+s+c+".gif";} else{document.images.bank5.src="cards/"+s+c+".gif";} } } /* ----------------------------------------------------------------------------------------- */ function showscore(who) { var iscore=valuehand(who); var mtext; mtext = "<b>Total<br><br>"+iscore; if (who == "card") { playerscore.innerHTML = mtext; } else { bankscore.innerHTML = mtext; } } /* ----------------------------------------------------------------------------------------- */ function valuehand(who) { var score=0; // return score var numaces=0; // need to count aces var icount=0; // count # of cards if (who=="card") // number of cards in hand { icount=iplayer; } else { icount=ibank; } for(i=0;i<icount;i++) // scan thru all cards { if (who=="card") // decode player card { p = hand[i].indexOf("|"); s = hand[i].substring(0,p); c = hand[i].substring(p+1,hand[i].length); } else // decode player card { p = bank[i].indexOf("|"); s = bank[i].substring(0,p); c = bank[i].substring(p+1,bank[i].length); } if (c == "ace"){score+=11;numaces++;} else if (c == "king"){score+=10;} else if (c == "queen"){score+=10;} else if (c == "jack"){score+=10;} else {score+=eval(c);} } // check for aces. go for value of ace=1 if makes you bust for(i=numaces; i>0; i--) { if (score > 21) { score-=10; } } // final score return score; } /* ----------------------------------------------------------------------------------------- */ function deal() { // make sure not in game here if (igame == 1) { alert("Can't re-deal - game in progress"); return; } // check credits if (icredits < 2) { alert("Game Over - you are out of credits\n\nRefresh screen if you want to play again."); return; } else { icredits-=2; credits.innerHTML="Credits: "+icredits; } // re-show card backs igame=1; document.images.card1.src="cards/cardback.gif"; document.images.card2.src="cards/cardback.gif"; document.images.card3.src="cards/cardback.gif"; document.images.card4.src="cards/cardback.gif"; document.images.card5.src="cards/cardback.gif"; document.images.bank1.src="cards/cardback.gif"; document.images.bank2.src="cards/cardback.gif"; document.images.bank3.src="cards/cardback.gif"; document.images.bank4.src="cards/cardback.gif"; document.images.bank5.src="cards/cardback.gif"; // re-shuffle cards if more than 5 hands played numhands++; if (numhands > 4) { numhands=0; dpos=0; shuffledeck(); } // show player cards dpos++; hand[0]=deck[dpos];showcard("card", 0); dpos++; hand[1]=deck[dpos];showcard("card", 1); iplayer=2; // show bank cards dpos++; bank[0]=deck[dpos];showcard("bank", 0); dpos++; bank[1]=deck[dpos]; ibank=2; // scores showscore("card"); bankscore.innerHTML = ""; // stick player if on blackjack } /* ----------------------------------------------------------------------------------------- */ function isblackjack(who) { // determine player - count number of cards = 2? if ( (who == "card") && (iplayer > 2) ) { return 0; } if ( (who == "bank") && (ibank > 2) ) { return 0; } // 2 cards - check score < 21? if ( valuehand(who) != 21) { return 0; } // score = 21 - read hand first if (who == "card") { p1 = hand[0].indexOf("|"); c1 = hand[0].substring(p1+1,hand[0].length); p2 = hand[1].indexOf("|"); c2 = hand[1].substring(p2+1,hand[1].length); } else { p1 = bank[0].indexOf("|"); c1 = bank[0].substring(p1+1,bank[0].length); p2 = bank[1].indexOf("|"); c2 = bank[1].substring(p2+1,bank[1].length); } // final test - if either card is a "10" dont have blackjack if ( (c1 == "10") || (c2 == "10") ) { return 0; } else { return 1; } } /* ----------------------------------------------------------------------------------------- */ function checkforwin() { pscore = valuehand("card"); // player's bscore = valuehand("bank"); // bank's score // dont need to check for blackjack here // five card trick if ( (iplayer == 5) && (ibank < 5) ) { return 0; } if ( (iplayer < 5) && (ibank == 5) ) { return 1; } // otherwise compare scores if (pscore > bscore) { return 0; } else { return 1; } } /* ----------------------------------------------------------------------------------------- */ function givecredits() { icredits += iplayer; icredits += ibank; if (iplayer == 5) { icredits += 3; } if (isblackjack("card")) { icredits += 10; } credits.innerHTML="Credits: "+icredits; } /* ----------------------------------------------------------------------------------------- */ function dealbankcard() { // deal and show card dpos++; ibank++; bank[ibank-1]=deck[dpos];showcard("bank", ibank-1); showscore("bank"); // check for bust if (valuehand("bank") > 21) { alert("Bank Busts - You Win !!!!!\n\nPress deal for a new game"); givecredits(); igame = 0; return; } // check for win if (checkforwin() == 1) { alert("You Lose !!!!!\n\nPress deal for a new game"); igame = 0; return; } if (ibank == 5) { alert("5 card trick - You Win !!!!!\n\nPress deal for a new game"); givecredits(); igame = 0; return; } // deal next banker's card setTimeout("dealbankcard()", 1500); } /* ----------------------------------------------------------------------------------------- */ function stick() { // make sure still in game if (igame == 0) { alert("Press deal to start new game"); return; } // over to bank showcard("bank", 1); showscore("bank"); // check for black jack if (isblackjack("bank") == 1) { alert("Bank has Blackjack - You Lose !!!!!\n\nPress deal for a new game"); igame = 0; return; } if (isblackjack("card") == 1) { alert("Blackjack - You Win !!!!!\n\nPress deal for a new game"); givecredits(); igame = 0; return; } // check for win if (checkforwin() == 1) { alert("You Lose !!!!!\n\nPress deal for a new game"); igame = 0; return; } // deal next banker's card setTimeout("dealbankcard()", 1500); } /* ----------------------------------------------------------------------------------------- */ function buycard() { var iscore=0; // make sure still in game here if (igame == 0) { alert("Press deal to start new game"); return; } // check credits if (icredits < 1) { alert("Not enough credits to buy another card."); return; } else { icredits--; credits.innerHTML="Credits: "+icredits; } // deal a new card iplayer++; dpos++; hand[iplayer-1]=deck[dpos];showcard("card", iplayer-1); showscore("card"); // value hand iscore=valuehand("card"); // if bust show bank cards and lose credits if (iscore > 21) { showcard("bank", 1); showscore("bank"); alert("You are Bust !!!!!\n\nPress deal for a new game"); igame = 0; return; } // stick if on 21 or 5 cards if ( (iscore == 21) || (iplayer == 5) ) { stick(); return; } } // end --!> </script> 2/3. add the onload keyword to the <body> tag as follows: ========================================================= <body onload="javascript:initdeck();"> 3/3. then insert the following html into the body of the html page: =================================================================== <b> <div align="center"> <a href="javascript:deal();">Deal</a> | <a href="javascript:buycard();">Buy</a> | <a href="javascript:stick();">Stick</a> <b> </div> <br><br> <table width=100%> <tr><td width=50%> <b>Player <td width=50% align="right"> <b><span id="credits"></span> </table> <hr> <br> <table width=480> <tr><form name="drwcrd"> <td width=80 align=center bgcolor="#FFF000"><img name="card1" src="cards/cardback.gif" border=0 onClick="Clickit(1);"></td> <td width=80 align=center bgcolor="#FFF000"><img name="card2" src="cards/cardback.gif" border=0 onClick="Clickit(2);"></td> <td width=80 align=center bgcolor="#FFF000"><img name="card3" src="cards/cardback.gif" border=0 onClick="Clickit(3);"></td> <td width=80 align=center bgcolor="#FFF000"><img name="card4" src="cards/cardback.gif" border=0 onClick="Clickit(4);"></td> <td width=80 align=center bgcolor="#FFF000"><img name="card5" src="cards/cardback.gif" border=0 onClick="Clickit(5);"></td> <td width=80 align=center valign=center><span id="playerscore"></span> </tr><tr></form> </table> <br> Bank<hr> <br> <table width=480> <tr><form name="bnkcrd"> <td width=80 align=center bgcolor="#FFF000"><img name="bank1" src="cards/cardback.gif" border=0 onClick="Clickit(1);"></td> <td width=80 align=center bgcolor="#FFF000"><img name="bank2" src="cards/cardback.gif" border=0 onClick="Clickit(2);"></td> <td width=80 align=center bgcolor="#FFF000"><img name="bank3" src="cards/cardback.gif" border=0 onClick="Clickit(3);"></td> <td width=80 align=center bgcolor="#FFF000"><img name="bank4" src="cards/cardback.gif" border=0 onClick="Clickit(4);"></td> <td width=80 align=center bgcolor="#FFF000"><img name="bank5" src="cards/cardback.gif" border=0 onClick="Clickit(5);"></td> <td width=80 align=center valign=center><span id="bankscore"></span> </tr><tr></form> </table>

Page last updated 27th January 2002