Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: Blackjack Game

  1. #1
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts

    Blackjack Game

    Attached is a zip file containing fully working Blackjack card game using a mixture of OOP and procedural functions. There is a 20k chars limit on posts and the code is about 24.7k chars so I can't post the actual code.

    Also there is a 50kb upload limit for zip files so I can't upload the card images the demo uses by default. But there are lots of sets of card images that can be downloaded on the interweb.

    If anyone would like to play with the demo or offer suggestions for improvements, please feel free to do so. To use the demo "as is", extract the code into a html file and substitute the card image file names in cardPics with your own 52 card images and use your own back of card image in backCardO.src = imgBaseURL+'back-blue-150-1.png';

    imgBaseURL is the relative path to your card images folder from the folder your html file is in.

    You can have as many decks of cards as you like in the card stack. The demo is set up for 2 decks.

    deck = new cardStack(cardPicsO,backCardO,2);

    The 3rd parameter, 2, tells the cardStack constructor how many decks to include in the stack.

    I have included some, but not all, of the player betting options. Atm you have the option to double your bet if your first card has a face value of 10 or is an Ace. You win double if you have 5 cards under 21 or a blackjack, provided the computer doesn't have the same. If the computer gets a blackjack, you lose no matter what you have.

    On page load, enter the amount of cash you want to start with and the minimum bet per hand. Then click "Get chips". Then enter the amount you want to bet on this hand and click "New hand" to deal the cards. When you want to "sit", click the "sit" button and the computer will play its hand automatically.

    There is a progress bar showing the % of cards that have been dealt from the stack so you can see roughly how many cards are left before the automatic reshuffle.

    The card images are automatically resized to fit within

    Code:
    this.cardMaxWidth = 100;
    this.cardMaxHeight = 145;
    You can change the card thumb dimensions to whatever you like.

    The next version will allow multiple players to play against the computer.
    Attached Files Attached Files
    Last edited by bullant; 05-24-2011 at 05:49 AM.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,298
    Thanks
    10
    Thanked 584 Times in 565 Posts
    please make a single-file version:

    ♠ ♣ ♦ ♥
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    not sure what you mean

    A single file version of what?

    The zip file contains the complete standalone html file, including the css and javascript. All you need to do if you want to play with the code is supply your own card images. With a 50kb upload limit for zip files, I can't get the images I use to downsize and compress to less than 50kb unless I upload multiple zip files of the 53 images (52 face up images and 1 back of card image)

    If anyone is interested, you can get a truckload of card images from here.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,298
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Quote Originally Posted by bullant View Post
    not sure what you mean

    A single file version of what?
    your app; use the unicode card graphics to provide a basic "large print" design so that it can be used without setup.

    along that line, inlining the css and javascript would be nice too, so that one may save an "icon" on the desktop that plays the game, even without an internet connection. the icon being simply the html file...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by rnd me View Post
    your app; use the unicode card graphics to provide a basic "large print" design so that it can be used without setup.

    along that line, inlining the css and javascript would be nice too, so that one may save an "icon" on the desktop that plays the game, even without an internet connection. the icon being simply the html file...
    There is no setting up involved apart from supplying your own 53 card images - 52 face up images and 1 back of card image.

    The zip file contains just a single html file with just html, css and javascript in it so you don't need an internet connection to play the game.

    If there was a larger upload limit (currently 50kb for zip files) I would zip the 53 images I used and upload them as well. But there is a truckload of card images on the interweb for downloading anyone interested could use.

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I think rnd me is talking about using ♥ ♠ ♦ and ♣ to create html/css-based cards.

    The problem there would be the Jack-King of each suit.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    oh ok, thanks - but I'm not sure how to do that so I'll just stick with the card images for now and look into that later on.

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    attached is a zip file containing the card images the code in blackjack.zip in post 1 uses.

    The only thing I have changed is the attached images are low-res gif images and so if you want to play/tinker with the demo and don't want to download or use your own images, you can do a global replacement of .png with .gif
    Attached Files Attached Files

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hope it's OK if I modify this. I made some changes to the base script...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Blackjack</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{font-family:tahoma,verdana,arial,sans-serif;font-size:0.9em;color:burlywood;}
    #btnNewGame{visibility:hidden;}
    #tabletop{width: 900px;border: 3px solid black;background-color: darkgreen;margin: 20px auto 0px auto;padding: 20px 20px 20px 20px;overflow: hidden;}
    #computerBox{float: right;margin: 0px 0px 20px 0px;padding-bottom:59px;}
    #computerControlsBox{margin-top:1px;}
    #playerBox{float: left;margin: 0px 0px 20px 0px;}
    #playerCardsBox,#computerCardsBox{margin:0px 0px 10px 0px;padding:0px 0px 0px 0px;min-height:145px;}
    .playerBoxes{width:47%;padding:10px 10px 10px 10px;background-color:green;border:1px solid red;}
    #tblChipsInput{clear:both;height:82px;padding-bottom:27px;/*18px;*/}
    legend{font-size:0.8em;color:burlywood;margin:0px 0px 0px 0px;padding:0px 10px 0px 10px;}
    #tblCurbalance{clear:both;display:none;height:109px;/*100px;*/}
    #tblCurbalance table{width:49%;float:left;}
    #deckProgressBox{width:40%;float:right;border:2px solid black;margin-bottom:10px;}
    #deckprogressbar{height:40px;width:0px;background-color:burlywood;}
    .totals{height:1.2em;font-weight:bold;margin:0px 0px 20px 0px;padding:0px 0px 0px 0px;}
    #playerControlsBox{visibility:hidden;}
    #message_box{width:60%;text-align:center;clear:both;padding:10px 20%;font-size:20px;color:#eee;font-weight:normal;border:2px solid #ddd;display:none;visibility:hidden;}
    </style>
    <script type="text/javascript">
    var cardPics = [
    	['clubs-a.png',1],
    	['clubs-2.png',2],
    	['clubs-3.png',3],
    	['clubs-4.png',4],
    	['clubs-5.png',5],
    	['clubs-6.png',6],
    	['clubs-7.png',7],
    	['clubs-8.png',8],
    	['clubs-9.png',9],
    	['clubs-10.png',10],
    	['clubs-j.png',10],
    	['clubs-q.png',10],
    	['clubs-k.png',10],
    	['diamonds-a.png',1],
    	['diamonds-2.png',2],
    	['diamonds-3.png',3],
    	['diamonds-4.png',4],
    	['diamonds-5.png',5],
    	['diamonds-6.png',6],
    	['diamonds-7.png',7],
    	['diamonds-8.png',8],
    	['diamonds-9.png',9],
    	['diamonds-10.png',10],
    	['diamonds-j.png',10],
    	['diamonds-q.png',10],
    	['diamonds-k.png',10],
    	['hearts-a.png',1],
    	['hearts-2.png',2],
    	['hearts-3.png',3],
    	['hearts-4.png',4],
    	['hearts-5.png',5],
    	['hearts-6.png',6],
    	['hearts-7.png',7],
    	['hearts-8.png',8],
    	['hearts-9.png',9],
    	['hearts-10.png',10],
    	['hearts-j.png',10],
    	['hearts-q.png',10],
    	['hearts-k.png',10],
    	['spades-a.png',1],
    	['spades-2.png',2],
    	['spades-3.png',3],
    	['spades-4.png',4],
    	['spades-5.png',5],
    	['spades-6.png',6],
    	['spades-7.png',7],
    	['spades-8.png',8],
    	['spades-9.png',9],
    	['spades-10.png',10],
    	['spades-j.png',10],
    	['spades-q.png',10],
    	['spades-k.png',10]
    ];
    var imgBaseURL = './cards/';
    //preload the face down image
    var backCardO = new Image();
    backCardO.src = imgBaseURL+'back-blue.png';
    // ** Start of Object
    function cardStack(cardPicsO,backCardO,numDecks){
    	this.cardPics = cardPicsO;
    	this.backCard = backCardO;
    	this.cardMaxWidth = 100;
    	this.cardMaxHeight = 145;
    	this.numDecks = numDecks;
    	this.shuffledIndxs = [];
    	this.curCardIndx = 0;
    	this.numDealtCards = 0;
    	this.numCardsInStack = this.numDecks*52;
    	this.shuffle=function(){
    		this.curCardIndx = 0;
    		var s = [];
    		while (this.shuffledIndxs.length) s.push(this.shuffledIndxs.splice(Math.random() * this.shuffledIndxs.length, 1));
    		while (s.length) this.shuffledIndxs.push(s.pop());
    		this.numDealtCards = 0;
    	};
    	this.init=function(){
    		for(i=0; i < this.numDecks*52; i++){
    			this.shuffledIndxs.push(i);
    			if(i > 51){ //extend this.cardPics if more than 1 deck in the stack
    				this.cardPics.push(this.cardPics[i-52]);
    			}
    		}
    		this.shuffle();
    	};
    	this.init();
    	this.getCards=function(num,faceDown){
    		var cards = [];
    		for(i=0; i < num; i++){
    			if(this.curCardIndx > (this.shuffledIndxs.length-1)){ //reached end of stack
    				this.shuffle();
    				this.curCardIndx = -1;
    				--i;
    			}
    			else{ //deal the cards
    				if(faceDown){ //send back face down cards
    					var dealtBackCard = new Image();
    					dealtBackCard.src =  this.backCard.src;
    					dealtBackCard.value = this.cardPics[this.shuffledIndxs[this.curCardIndx]].value;
    					dealtBackCard.facedown = true;
    					dealtBackCard.cardSrc = this.cardPics[this.shuffledIndxs[this.curCardIndx]].src;
    					dealtBackCard.maxWidth = this.cardMaxWidth;
    					dealtBackCard.maxHeight = this.cardMaxHeight;
    					cards.push(dealtBackCard);
    				}
    				else{ //send back face up cards
    					this.cardPics[this.shuffledIndxs[this.curCardIndx]].maxWidth = this.cardMaxWidth;
    					this.cardPics[this.shuffledIndxs[this.curCardIndx]].maxHeight = this.cardMaxHeight;
    					cards.push(this.cardPics[this.shuffledIndxs[this.curCardIndx]]);
    					cards[cards.length-1].facedown = false;
    				}
    			}
    			++this.curCardIndx;
    		}
    		return cards;
    	}
    }
    //End of Object
    //-----------------------------------------------------
    var computer_total_visible=false;
    function startGame(){
    	clearMessage();
    	computer_total_visible=false;
    	document.getElementById('playerHandTotal').innerHTML = '';
    	document.getElementById('computerHandTotal').innerHTML = '';
    	clearPlayerCards(computerCardsBoxO);
    	clearPlayerCards(playerCardsBoxO);
    	curBet = txtCurBetO.value;
    	curBalance = new Number(tdCurbalanceO.innerHTML);
    	if(!/^\d+$/.test(curBet) || (new Number(curBet) > curBalance) || (new Number(curBet)) < minimumBet){
    		alert("Current bet is invalid or more than your current balance\nor less than the minimum bet of $"+minimumBet);;
    		txtCurBetO.focus();
    		return;
    	}
    	txtCurBetO.disabled = true;
    	btnNewGameO.disabled = true;
    	//deal 2 cards face up to the player
    	dealCards(2,false,'player');
    	//deal 1 card face down to the computer
    	dealCards(1,true,'computer');
    	//deal 1 card face up to the computer
    	dealCards(1,false,'computer');
    	document.getElementById('playerControlsBox').style.visibility = 'visible';
    	btnPlayerTakeCardO.disabled = false;
    //	btnSitO.disabled = true;
    	btnSitO.disabled = false;
    	//check if player can double their bet or not
    	if(getNumCardsInHand('player') == 1 && (getHandtotalPoints('player') == 1 || getHandtotalPoints('player') == 10)){
    		var ans = window.confirm("Would you like to double your bet and receive only 1 more card?");
    		var ans = window.confirm("Would you like to double your bet and receive only 1 more card?");
    		if(ans) {
    			curBet = curBet * 2;
    			txtCurBetO.value = curBet;
    			setTimeout(function(){
    				dealCards(1,false,'player');
    				playComputerHand();
    			},1000);
    		}
    	}
    }
    function clearPlayerCards(obj){
    	var imgsO = obj.getElementsByTagName('img');
    	while(imgsO.length > 0){
    		imgsO[0].parentNode.removeChild(imgsO[0]);
    		imgsO = obj.getElementsByTagName('img');
    	}
    }
    function turnComputersCards(player){
    	obj = (player == 'player')? playerCardsBoxO : computerCardsBoxO;
    	var imgsO = obj.getElementsByTagName('img');
    	for(i=0; i < imgsO.length; i++){
    		if(imgsO[i].facedown){
    			imgsO[i].src = imgsO[i].cardSrc;
    		}
    	}
    }
    var numCardsDealt = 0;
    function dealCards(numCards,faceDown,player){
    	switch (faceDown){
    		case true : //deal cards face down
    			var newCards = deck.getCards(numCards,true);
    			for(i=0; i < newCards.length; i++){
    				var newImg = document.createElement('img');
    				newImg.src = newCards[i].src;
    				newImg.facedown = newCards[i].facedown;
    				newImg.cardSrc = newCards[i].cardSrc;
    				newImg.value = newCards[i].value;
    				thumbDims = calcNewDimensions(newCards[i].width, newCards[i].height, newCards[i].maxWidth, newCards[i].maxHeight);
    				newImg.width = thumbDims['width'];
    				newImg.height = thumbDims['height'];
    				if(player == 'player'){
    					playerCardsBoxO.appendChild(newImg);
    				}
    				else{
    					computerCardsBoxO.appendChild(newImg);
    				}
    			}
    			if(player == 'computer' && getNumCardsInHand('computer') == 1){break;}
    			showHandtotalPoints(player);
    			break;
    		case false : //deal cards face up
    			var newCards = deck.getCards(numCards,false);
    			for(i=0; i < newCards.length; i++){
    				var newImg = document.createElement('img');
    				newImg.src = newCards[i].src;
    				newImg.facedown = newCards[i].facedown;
    				newImg.value = newCards[i].value;
    				thumbDims = calcNewDimensions(newCards[i].width, newCards[i].height, newCards[i].maxWidth, newCards[i].maxHeight);
    				newImg.width = thumbDims['width'];
    				newImg.height = thumbDims['height'];
    				if(player == 'player'){
    					playerCardsBoxO.appendChild(newImg);
    				}
    				else{
    					computerCardsBoxO.appendChild(newImg);
    				}
    			}
    //			showHandtotalPoints(player);
    			if(player=="computer"){
    				if(computer_total_visible==true){
    					showHandtotalPoints(player);
    				}
    			}
    			else{
    				showHandtotalPoints(player);
    			}
    			break;
    	}
    	if(player == 'player' && getHandtotalPoints('player') > 11){btnSitO.disabled = false;}
    	//check if player busts or not
    	if(player == 'player' && getHandtotalPoints('player') > 21) {
    		btnPlayerTakeCardO.disabled = true;
    		btnSitO.disabled = true;
    		btnNewGameO.disabled = false;
    		curBalance -= new Number(curBet);
    		tdCurbalanceO.innerHTML = (curBalance < 0)? 0 : curBalance;
    		curBet = minimumBet;
    		txtCurBetO.value = minimumBet;
    		txtCurBetO.disabled = false;
    		txtCurBetO.focus();
    		turnComputersCards('computer');
    		showHandtotalPoints('computer');
    		//alert('You busted...!!!');
    		showMessage('You busted...!!!');
    	}
    	//update the deck progress bar
    	deckprogressbarO.style.width = (deck.numDealtCards += numCards)/deck.numCardsInStack*100+'%';
    	//update the card counter
    	document.getElementById('progressBarLabel').innerHTML = 'Number of cards in stack is: '+(deck.numCardsInStack-deck.numDealtCards);
    }
    function getNumCardsInHand(player){
    	var handImgsDivO = (player == 'player')? playerCardsBoxO : computerCardsBoxO;
    	var handImgsO = handImgsDivO.getElementsByTagName('img');
    	return handImgsO.length;
    }
    function showHandtotalPoints(player){
    	var totalsDivId = (player == 'player')? 'playerHandTotal' : 'computerHandTotal';
    	var handImgsDivO = (player == 'player')? playerCardsBoxO : computerCardsBoxO;
    	var handImgsO = handImgsDivO.getElementsByTagName('img');
    	var total = 0, cardValue, gotAce = false;
    	switch (player){
    		case 'computer':
    		case 'player':
    			for(i=0; i < handImgsO.length; i++){
    				cardValue = new Number(handImgsO[i].value)
    				if(cardValue == 1) {gotAce = true;}
    				total += cardValue;
    			}
    	}
    	if(gotAce && total <= 21 && total + 10 <= 21){
    		total = total + ' or ' + (new Number(total) + 10);
    	}
    	document.getElementById(totalsDivId).innerHTML = 'Total = '+total;
    }
    function getHandtotalPoints(player){
    	var handImgsDivO = (player == 'player')? playerCardsBoxO : computerCardsBoxO;
    	var handImgsO = handImgsDivO.getElementsByTagName('img');
    	var total = 0, cardValue, gotAce = false;
    	for(i=0; i < handImgsO.length; i++){
    		cardValue = new Number(handImgsO[i].value)
    		if(cardValue == 1) {gotAce = true;}
    		total += cardValue;
    	}
    	if(gotAce && total+10 <= 21 && getNumCardsInHand(player) > 1){total = total+10;}
    	return total;
    }
    var computerHandTimer;
    function playComputerHand(){
    	computer_total_visible=true;
    	showHandtotalPoints('computer');
    	document.getElementById('playerHandTotal').innerHTML = 'Total = '+getHandtotalPoints('player');
    	btnPlayerTakeCardO.disabled = true;
    	btnSitO.disabled = true;
    	turnComputersCards('computer');
    	if(getHandtotalPoints('computer') >= 16){
    		clearInterval(computerHandTimer);
    		document.getElementById('computerHandTotal').innerHTML = 'Total = '+getHandtotalPoints('computer');
    		payOut();
    	}
    	else{
    		computerHandTimer = setInterval(function(){
    			dealCards(1,false,'computer');
    			if(getHandtotalPoints('computer') >= 16){
    				clearInterval(computerHandTimer);
    				document.getElementById('computerHandTotal').innerHTML = 'Total = '+getHandtotalPoints('computer');
    				payOut();
    			}
    		},1500);
    	}
    }
    function getChips(){
    	var startBal = document.getElementById('txtStartAmt').value;
    	var minBet = document.getElementById('txtMinBet').value;
    	var isDataValid = true;
    	var errors = new Array();
    	if(!/^\d+$/.test(startBal)){
    		isDataValid = false;
    		errors.push('Starting amount.')
    	}
    	if(!/^\d+$/.test(minBet) || (new Number(startBal)) < (new Number(minBet))){
    		isDataValid = false;
    		errors.push('Minimum bet.')
    	}
    	if(!isDataValid){
    		var str = "The following values are invalid:\n\n";
    		for(i=0; i < errors.length; i++){
    			str += errors[i]+"\n";
    		}
    		alert(str);
    	}
    	else{
    		document.getElementById('tblChipsInput').style.display = 'none';
    		tdCurbalanceO.innerHTML = startBal;
    		document.getElementById('tblCurbalance').style.display = 'block';
    		document.getElementById('message_box').style.display="block";
    		btnNewGameO.style.visibility = 'visible';
    		minimumBet = minBet;
    		txtCurBetO.focus();
    		txtCurBetO.value = minimumBet;
    		btnNewGameO.disabled=false;
    	}
    }
    function payOut(){
    	var playerTotal = getHandtotalPoints('player')
    	var numPlayerCards = getNumCardsInHand('player');
    	var computerTotal = getHandtotalPoints('computer')
    	var numComputerCards = getNumCardsInHand('computer');
    	curBet = new Number(curBet);
    	if(numComputerCards == 2 && computerTotal == 21){//computer has Blackjack
    		curBet = -curBet;
    		//alert('Dealer blackjack. You lose!!');
    		showMessage('Dealer blackjack. You lose!!');
    	}
    	else if(numPlayerCards == 2 && playerTotal == 21){//player has Blackjack
    		curBet = curBet * 2;
    		//alert('Blackjack. You win!!');
    		showMessage('Blackjack. You win!!');
    	}
    	else if(numComputerCards >= 5 && computerTotal <= 21){//computer has 5 and under
    		curBet = -curBet;
    		//alert('Computer has 5 and under. You lose!!');
    		showMessage('Computer has 5 and under. You lose!!');
    	}
    	else if(numPlayerCards >= 5 && playerTotal <= 21){//player has 5 and under
    		curBet = curBet * 2;
    		//alert('You have 5 and under. You win!!');
    		showMessage('You have 5 and under. You win!!');
    	}
    	else if(playerTotal > computerTotal){//player has higher total
    		//alert('You beat the dealer. You win!!');
    		showMessage('You beat the dealer. You win!!');
    	}
    	else if(computerTotal > playerTotal && computerTotal <= 21){ //computer has higher total
    		curBet = -curBet;
    		//alert('The dealer beat you. You lose!!');
    		showMessage('The dealer beat you. You lose!!');
    	}
    	else if(computerTotal > 21){
    		//alert('Whoops! Dealer busted. You win!!');
    		showMessage('Whoops! Dealer busted. You win!!');
    	}
    	else{ //standoff
    		//alert('Push!!');
    		showMessage('Push!!');
    		curBet = 0;
    	}
    	tdCurbalanceO.innerHTML = ((curBalance += curBet) < 0)? 0 : curBalance;
    	btnNewGameO.disabled = false;
    	curBet = minimumBet;
    	txtCurBetO.value = minimumBet;
    	txtCurBetO.disabled = false;
    	txtCurBetO.focus();
    }
    function calcNewDimensions(width, height, maxWidth, maxHeight){
    	newDims = new Array();
    	var xRatio = maxWidth / width;
    	var yRatio = maxHeight / height;
    	//calculate the new width and height
    	if(width <= maxWidth && height <= maxHeight)  {    //image does not need resizing
    		newDims["width"]     = width;
    		newDims["height"]     = height;
    	}
    	else if(xRatio * height < maxHeight){
    		newDims["height"] = Math.round(xRatio * height);
    		newDims["width"]  = maxWidth;
    	}
    	else{
    		newDims["width"]  = Math.round(yRatio * width);
    		newDims["height"] = maxHeight;
    	}
    	return newDims;
    }
    function showMessage(text){
    	document.getElementById('message_box').innerHTML=text;
    	document.getElementById('message_box').style.visibility='visible';
    }
    function clearMessage(){
    	document.getElementById('message_box').innerHTML='';
    	document.getElementById('message_box').style.visibility='hidden';
    }
    function init(){
    	preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
    	var cardPicsO = new Array();
    	for(i=0; i < preloadedImgs.length; i++){
    		cardPicsO[i] = new Image();
    		cardPicsO[i].src = preloadedImgs[i].src;
    		cardPicsO[i].value = cardPics[i][1];
    	}
    	document.body.removeChild(document.getElementById('preloadedPics'));
    	computerCardsBoxO = document.getElementById('computerCardsBox');
    	playerCardsBoxO = document.getElementById('playerCardsBox');
    	btnSitO = document.getElementById('btnSit');
    	btnPlayerTakeCardO = document.getElementById('btnPlayerTakeCard');
    	btnNewGameO = document.getElementById('btnNewGame');
    	btnNewGameO.onclick=startGame;
    	txtCurBetO = document.getElementById('txtCurBet');
    	tdCurbalanceO = document.getElementById('tdCurbalance');
    	btnPlayerTakeCardO.onclick=function(){dealCards(1,false,'player');}
    	btnSitO.onclick = playComputerHand;
    	deckprogressbarO = document.getElementById('deckprogressbar');
    	deck = new cardStack(cardPicsO,backCardO,2);
    	document.getElementById('btnGetChips').onclick=getChips;
    	document.getElementById('txtStartAmt').focus();
    	document.getElementById('progressBarLabel').innerHTML = 'Number of cards in stack is: '+deck.numCardsInStack;
    }
    window.onload=function(){
    	setTimeout('init()',50);
    }
    </script>
    </head>
    <body>
    <!-- preload the images so we can use their actual width and height property to scale the thumbnails -->
    <div id="preloadedPics" style="display: none"></div>
    <script type="text/javascript">
    for(i=0; i < cardPics.length; i++){
    	var newImg = document.createElement('img');
    	newImg.src = imgBaseURL+cardPics[i][0];
    	document.getElementById('preloadedPics').appendChild(newImg);
    }
    </script>
    <!-- End of image preloads -->
    <div id="tabletop">
      <fieldset id="computerBox" class="playerBoxes">
        <legend>Computer</legend>
        <div class="totals" id="computerHandTotal"></div>
        <div id="computerCardsBox"></div>
      </fieldset>
      <fieldset id="playerBox" class="playerBoxes">
        <legend>Player</legend>
        <div class="totals" id="playerHandTotal"></div>
        <div id="playerCardsBox"></div>
        <div id="playerControlsBox">
          <button id="btnPlayerTakeCard">Hit</button>
          <button id="btnSit">Stay</button>
        </div>
        <div id="computerControlsBox">
          <button id="btnNewGame">Deal new hand</button>
        </div>
      </fieldset>
      <table id="tblChipsInput" cellspacing="2" border="0">
        <tbody>
          <tr>
            <td align="right">How much do you want to start with: $</td>
            <td><input type="text" id="txtStartAmt" /></td>
          </tr>
          <tr>
            <td align="right">Minimum bet: $</td>
            <td><input type="text" id="txtMinBet" /></td>
          </tr>
          <tr>
            <td></td>
            <td><button id="btnGetChips">Get chips</button></td>
          </tr>
        </tbody>
      </table>
      <div id="tblCurbalance">
        <table cellspacing="2" border="0">
          <tbody>
            <tr>
              <td align="right">Your current balance: $</td>
              <td id="tdCurbalance"></td>
            </tr>
            <tr>
              <td align="right">Input your bet: $</td>
              <td><input type="text" id="txtCurBet" /></td>
            </tr>
          </tbody>
        </table>
        <div id="deckProgressBox">
          <div id="progressBarLabel"></div>
          <div id="deckprogressbar"></div>
        </div>
        <div id="message_box"></div>
      </div>
    </div>
    </body>
    </html>
    I haven't fully tested it, but this version deals two cards to the player and two to the dealer (one of them face down) and then progresses from there. This is the variety of blackjack that I am used to seeing. I have also taken a lot of the alerts and turned them into in-page text so there isn't so much beeping going on while you play.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by Rowsdower! View Post
    Hope it's OK if I modify this. I made some changes to the base script...
    yes of course it is

    One, I think that is part of the purpose of this forum and two, I have posted on several occasions that everyone is free to take any code I post and do what they like with it. I'm not into any "please leave this credit/source blah blah in the code......" malarkey.

    Your version also shows how easy it is for anyone to customise the original version to their preferences.

    In a later version I will include the option to split hands and have multiple players.
    Last edited by bullant; 06-01-2011 at 02:48 AM.

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    In an effort to avoid doing any real work today (hey, it's Friday) I created some "CF"-themed playing card backs...

    Cut 'em up and use them if you like, folks.
    Attached Thumbnails Attached Thumbnails Blackjack Game-card_backs_cf.png  
    Last edited by Rowsdower!; 06-03-2011 at 05:06 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    ...and some cards fronts in the same size...
    Attached Thumbnails Attached Thumbnails Blackjack Game-clubs.png   Blackjack Game-spades.png   Blackjack Game-hearts.png   Blackjack Game-diamonds.png  
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •