Javascript blackjack game help.

pengu · 11-20-2011, 03:54 AM

Hey guys I need help on making the images on this game show up. Im not sure how to get the card images to load when hitting the deal button.

Code:

<html>

<head>

<title>
Blackjack </title>

<script LANGUAGE="JavaScript1.1">


var dealer_hand = new Array();

var player_hand = new Array();

var game_over = false;


function Card(num,suit) {

   this.num = num;

   this.suit = suit;

   this.fname = fname;

}

function fname() {

   return this.num + this.suit + ".gif";

}



function Deck() {

   this.cards = new Array(52);

   this.next_card = 0;

   // fill the deck (in order, for now)

   for (i=1; i<14; i++) {

     this.cards[i-1] = new Card(i,"c");

     this.cards[i+12] = new Card(i,"h");

     this.cards[i+25] = new Card(i,"s");

     this.cards[i+38] = new Card(i,"d");

   }

   this.shuffle = shuffle;

   this.dealCard = dealCard;

}

function shuffle() {

   for (i=1; i<1000; i++) {

      // switch two randomly selected cards

      card1 = Math.floor( 52*Math.random() );

      card2 = Math.floor( 52*Math.random() );

      temp = this.cards[card2];

      this.cards[card2] = this.cards[card1];

      this.cards[card1] = temp;

   }

   this.next_card = 0;

}

function dealCard() {

   return this.cards[ this.next_card++ ];

}


var deck = new Deck();

deck.shuffle();


function newGame() {


   if ( deck.next_card > 39 ) {  

      deck.shuffle();            

   }

   dealer_hand = new Array();

   player_hand = new Array();
   
   dealer_hand[ 0 ] = deck.dealCard();   // This is the hole card.

   document.images[0].src = "http://www.litchzen.com/cardback.PNG"; // The hole card is not shown

   dealer_hand[ 1 ] = deck.dealCard();

   document.images[ 1 ].src = dealer_hand[ 1 ].fname();

   for ( i=2; i<6; i++) {

      document.images[i].src = "http://www.litchzen.com/cardback.PNG";

   }
    num = i + 1;     

   player_hand[ 0 ] = deck.dealCard();

   document.images[ 6 ].src = player_hand[ 0 ].fname();

   player_hand[ 1 ] = deck.dealCard();

   document.images[ 7 ].src = player_hand[ 1 ].fname();

   for (i=8; i<12; i++) {

      document.images[i].src = "http://www.litchzen.com/cardback.PNG";

   }


   window.status = "";

   document.form1.dealer.value = "";

   document.form1.result.value = "";

   document.form1.player.value = score( player_hand );

   game_over = false;


} // end function newGame()


function hit() {

   var total = 0;

   var new_card = 0;  // index for the new card position

   if ( game_over ) {

      window.status = "Game over.  Click the Deal button to start a new hand."

   } else {

      new_card = player_hand.length;

      player_hand[ new_card ] = deck.dealCard();

      document.images[ new_card + 6 ].src = player_hand[ new_card ].fname();

      total = score( player_hand );

      if ( total > 21 ) {  // Busted, game over.

         document.form1.player.value = total + "  busted";

         document.images[ 0 ].src = dealer_hand[ 0 ].fname(); 

         document.form1.dealer.value = score( dealer_hand );

         winner();

         game_over = true;

      } else {

         document.form1.player.value = total;

      }

   }

} // end function hit()


function stand() {

   var total = 0;

   var new_card = 0;  

   if ( game_over ) {

      window.status = "Game over.  Click the Deal button to start a new hand."

   } else {

      document.images[ 0 ].src = dealer_hand[ 0 ].fname(); 

      while ( score( dealer_hand ) < 17 ) {  

         new_card = dealer_hand.length;

         dealer_hand[ new_card ] = deck.dealCard();

         document.images[ new_card ].src = dealer_hand[ new_card ].fname();

      }


      total = score( dealer_hand );

      if ( total > 21 ) {  // Busted

         document.form1.dealer.value = total + "  busted";

      } else {

         document.form1.dealer.value = total;

      }



   }

   winner();

   game_over = true; // The game ends after the player stands.



} // end function stand()


function score(hand) {

   var total = 0;

   var soft = 0; // This variable counts the number of aces in the hand.

   var pips = 0; // The trump pictures on a card used to be called pips.

   for ( i=0; i<hand.length; i++ ) {

      pips = hand[i].num;

      if ( pips == 1 ) { 

         soft = soft + 1;

         total = total + 11;

      } else {

         if ( pips == 11 || pips == 12 || pips == 13 ) {

            total = total + 10;

         } else {

            total = total + pips;

         }

      }

   }

   while ( soft > 0 && total > 21 ) {  // Count the aces as 1 instead

      total = total - 10;              // of 11 if the total is over 21

      soft = soft - 1;

   }   

   return total;

}  // end function score


function winner() {

   var player_total = score( player_hand );

   var dealer_total = score( dealer_hand );

   if ( player_total > 21 ) {  // Busted

      document.form1.result.value = "Dealer wins";

   } else {

      if ( dealer_total > 21 ) { // Busted

         document.form1.result.value = "Player wins";

      } else {

         if ( player_total  == dealer_total ) {

            document.form1.result.value = "Tie game";

         } else {

            if ( player_total  > dealer_total ) {

               document.form1.result.value = "Player wins";

            } else {

               document.form1.result.value = "Dealer wins";

            }

         }

      }

   }

}


</script>



</head>



<body>

<h1>Blackjack Javascript Example</h1>

<hr>

<form NAME="form1">

<table>

<tr>

  <td> <B>Dealer: </B>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> </td>

</tr>

<tr>

  <td> <B>Player: <B>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

</tr>

<tr>

  <td> <B>Dealer Score:</B><BR>

       <input TYPE="TEXT" SIZE=12 NAME="Dealer" VALUE="0"></td>

  <td> <B>Player Score:</B><BR>

       <input TYPE="TEXT" SIZE=12 NAME="You" VALUE="0">

  <td> <input TYPE="BUTTON" VALUE="      Stay      " onClick="stand();">

  <td> <input TYPE="BUTTON" VALUE="         Hit         " onClick="hit();">

  <td> <a href="#" onClick="newGame();"

        onMouseOver = "window.status = 'Deal a new hand.'; return true; "

        onMouseOut = "window.status = '';">

       <img border=0 src="http://us.cdn3.123rf.com/168nwm/fuzzbones/fuzzbones1105/fuzzbones110500782/9628185-deal-word-in-male-hand.jpg" height=50 width=106></a>

  <td> <B>Game Result:</B><BR>

       <input TYPE="TEXT" SIZE=10 NAME="result" VALUE=""</td>

</tr>

</table>

</form>

<P>Click the Deal button to start a new game.<BR>

Click the Hit button to get another card.<BR>

Click the Stay button to end your turn.
Try and get as close to 21 as possible to win. Good luck!</P>


</body>

</html>

jmrker · 11-20-2011, 04:18 AM

Two problems to solve first.
Using the error console in FF, the following messages are received.
document.form1.player is "undefined"
document.form1.dealer is "undefined"

The fix is...

Code:

       <input TYPE="TEXT" SIZE=12 NAME="dealer" VALUE="0"></td>

  <td> <B>Player Score:</B><BR>

       <input TYPE="TEXT" SIZE=12 NAME="player" VALUE="0">

There are some other errors, but those need to be fixed before proceeding.

Philip M · 11-20-2011, 10:06 AM