Simple Blackjack Game

Developer
Charlie Volpe
Size
4,463 Kb
Views
46,552
  1. Simple Blackjack Game Previews
  2. Simple Blackjack Game HTML Codes
  3. Simple Blackjack Game CSS Codes
  4. Simple Blackjack Game JS Codes

How do I make an simple blackjack game?

Try to get as close to 21 without going over as well as getting higher than the computer.Number cards = face value.. What is a simple blackjack game? How do you make a simple blackjack game? This script and codes were developed by Charlie Volpe on 08 November 2022, Tuesday.

Simple Blackjack Game Previews
IQ Test

Simple Blackjack Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Blackjack Game</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div id='cash'>Cash: $1000</div> <div id='bet'>Bet: $100</div> <div class='changeBet clearfix'> <div id='subBet' class='lil button'>-</div> <div id='placeBet' class='big button'>Place Bet</div> <div id='addBet' class='lil button last'>+</div> </div> <div class='hide buttons clearfix'> <div id='playHit' class='button'>Hit</div> <div id='playStay' class='button last'>Stay</div> </div> <div class='fullbar clearfix'> <div id='reset' class='hide button'>Next Round</div> <div id='startover' class='hide button'>Start Over</div> </div> <div class='title clearfix'> <div class='player'>Player:</div> <div class='computer'>Computer:</div> </div> <div id='gameBoard' class='clearfix'> <div class='player-section card-section'></div><div class='computer-section card-section'></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Blackjack Game - Script Codes CSS Codes

* { box-sizing: border-box;
}
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
html { font-size: 8px;
}
body{ padding: 1rem; background: #47a747; color: #f7f7f7; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.container { max-width: 1000px; margin: 0 auto;
}
.buttons { width: 100%; height: 5rem;
}
.button { float: left; background: #f7f7f7; color: #373737; width: 47%; height: 5rem; margin-right: 6%; line-height: 5rem; border: 2px solid #373737; border-radius: .5rem; text-align: center; font-size: 3rem;
}
.fullbar { width: 100%;
}
#reset,
#startover{ width: 100%;
}
.button.last { margin-right: 0;
}
.button:hover { background: #373737; color: #f7f7f7; border: 2px solid #f7f7f7; cursor: pointer;
}
.button.lil { width: 19%;
}
.button.big { width: 50%;
}
.changeBet { margin-bottom: .5rem;
}
.computer-value { text-align: right; font-size: 2.5rem;
}
.player-value { text-align: left; font-size: 2.5rem;
}
.title { font-size: 3rem; margin-bottom: .5rem;
}
.title div { float: left; width: 50%;
}
.result { text-align: center; font-size: 5rem;
}
.hide { display: none;
}
#cash { float: left; text-align: left; width: 50%; margin-bottom: 1rem; font-size: 2rem;
}
#bet { float: left; text-align: right; width: 50%; margin-bottom: 1rem; font-size: 2rem;
}
.card-section { float: left; width: 50%; height: 10rem;
}
.single-left { background: #f7f7f7; color: #373737; float: left; width: 6.5rem; height: 10rem; border: 2px solid #373737; border-radius: .5rem; margin-left: -4.5rem; padding: .35rem;
}
.facevalue { font-size: 1.35rem;
}
.first { margin-left: 0; margin-left: 0;
}
.red { color: #e75757;
}
@media screen and (min-width: 401px) { html { font-size: 10px; }
}
@media screen and (min-width: 590px) { html { font-size: 13px; }
}
@media screen and (min-width: 774px) { html { font-size: 16px; }
}

Simple Blackjack Game - Script Codes JS Codes

var cash = 1000;
var bet = 100;
var faces = ['A','2','3','4','5','6','7','8','9','10','J','Q','K'];
var suits = ['Diamonds','Clubs','Hearts','Spades'];
function card(name, face, suit, value) { this.name = name; this.face = face; this.suit = suit; this.value = value;
}
var deck = [];
function shuffleDeck() { deck = []; for(var i = 0; i<faces.length; i++) { for(var j = 0; j<suits.length; j++) { var temp; if(i > 9) { temp = new card(faces[i] + ' of ' + suits[j], faces[i], suits[j], 10); } else { temp = new card(faces[i] + ' of ' + suits[j], faces[i], suits[j], i + 1); } deck.push(temp); } }
}
shuffleDeck();
function hand() { this.player = 'none'; this.cards = []; this.value = 0;
}
function startGame() { playerHand = new hand(); computerHand = new hand(); playerHand.player = 'player'; computerHand.player = 'computer'; startingHand(); showValue(); if( playerHand.value == 21) { win(); $('.buttons').addClass('hide'); $('#reset').removeClass('hide'); if(deck.length < 10) { shuffleDeck(); } }
}
function startingHand() { for( var i = 0; i<2; i++) { hit(playerHand); } computerHit();
}
function computerHit() { hit(computerHand); showCompValue();
}
function showValue() { $('#gameBoard').append('<div class="player-value">' + playerHand.value.toString() + '</div'); if(playerHand.value > 21){ $('#gameBoard').append('<div class="player-value">You Bust!</div'); showCompValue(); computerTurn(); $('.buttons').addClass('hide'); }
}
function showCompValue() { $('#gameBoard').append('<div class="computer-value">' + computerHand.value.toString() + '</div'); if(computerHand.value > 21){ $('#gameBoard').append('<div class="computer-value">Computer Bust!</div'); }
}
function addCards(addHand) { var total = 0; var list = []; for( var i = 0; i < addHand.cards.length; i++) { if( addHand.cards[i].face != 'A' ) { list.unshift(addHand.cards[i]); } else { list.push(addHand.cards[i]); } } for( var i = 0; i < list.length; i++) { if( list[i].face != 'A' ) { total += list[i].value; } else { if( total < 11) { total += 11; } else { total += 1; } } } return total;
}
function buildCard( buildPlayer, buildColor, buildFace, buildSuit, buildHand ) { var str = '<div class="single-left '; str = str.concat(buildColor); str = str.concat('"><div class="facevalue">'); str = str.concat(buildFace); str = str.concat('</div><div class="facetype">'); str = str.concat(buildSuit); str = str.concat('</div></div>'); if(buildPlayer == 'player') { $('.player-section').append( str ); if(buildHand.cards.length == 1) { $('.player-section .single-left').addClass('first'); } } else { $('.computer-section').append( str ); if(buildHand.cards.length == 1) { $('.computer-section .single-left').addClass('first'); } }
}
function hit(hitHand) { var num = Math.floor((Math.random() * (deck.length - 1))); var temp = deck[num]; hitHand.cards.push(temp); hitHand.value = addCards(hitHand); playSound('hit'); if( deck[num].suit == "Diamonds" ) { if( hitHand.player == 'player') { buildCard('player', 'red', deck[num].face, '&diams;', hitHand ); } else { buildCard('computer', 'red', deck[num].face, '&diams;', hitHand ); } } if( deck[num].suit == "Clubs" ) { if( hitHand.player == 'player') { buildCard('player', 'black', deck[num].face, '&clubs;', hitHand ); } else { buildCard('computer', 'black', deck[num].face, '&clubs;', hitHand ); } } if( deck[num].suit == "Hearts" ) { if( hitHand.player == 'player') { buildCard('player', 'red', deck[num].face, '&hearts;', hitHand ); } else { buildCard('computer', 'red', deck[num].face, '&hearts;', hitHand ); } } if( deck[num].suit == "Spades" ) { if( hitHand.player == 'player') { buildCard('player', 'black', deck[num].face, '&spades;', hitHand ); } else { buildCard('computer', 'black', deck[num].face, '&spades;', hitHand ); } } deck.splice(num,1);
}
function computerTurn() { if(playerHand.value < 22) { if(computerHand.value < 17) { computerHit(); computerTurn(); } else { checkScore(); } } else { checkScore(); }
}
function updateCashBet() { $('#cash').text('Cash: $' + cash.toString()); $('#bet').text('Bet: $' + bet.toString());
}
function win() { $('#gameBoard').append('<div class="result">You win $' + bet.toString() + '!</div'); cash += bet; updateCashBet(); playSound('win');
}
function draw() { $('#gameBoard').append('<div class="result">You Draw!</div'); playSound('draw');
}
function lose() { $('#gameBoard').append('<div class="result">You lose $' + bet.toString() + '!</div'); cash -= bet; updateCashBet(); if( cash < bet ) { bet = 100; } playSound('lose');
}
function checkScore() { if(playerHand.value < 22) { if(playerHand.value > computerHand.value) { win(); } else { if(computerHand.value < 22) { if(computerHand.value == playerHand.value) { draw(); } else { lose(); } } } if(computerHand.value > 21) { win(); } } else{ lose(); } if( cash > 0) { $('#reset').removeClass('hide'); } else { $('#gameBoard').append('<div class="result">Game Over!</div>'); $('#startover').removeClass('hide'); } if(deck.length < 10) { shuffleDeck(); }
}
function reset() { $('#gameBoard').text(''); $('#gameBoard').append('<div class="player-section card-section"></div><div class="computer-section card-section"></div>'); updateCashBet(); $('.changeBet').removeClass('hide');
}
function startover() { cash = 1000; bet = 100; updateCashBet(); shuffleDeck(); reset();
}
$('#playHit').click(function() { hit(playerHand); showValue();
});
$('#playStay').click(function() { computerHit(); computerTurn(); $('.buttons').addClass('hide');
});
$('#addBet').click(function() { if(bet < cash) { bet += 100; updateCashBet(); }
});
$('#subBet').click(function() { if(bet > 100) { bet -= 100; updateCashBet(); }
});
$('#placeBet').click(function() { $('.changeBet').addClass('hide'); $('.buttons').removeClass('hide'); startGame();
});
$('#reset').click(function() { $('#reset').addClass('hide'); reset();
});
$('#startover').click(function() { $('#startover').addClass('hide'); startover();
});
// Sounds found on soundbible.com
function playSound( sound ) { if( sound == 'win' ) { var audio = new Audio('https://goo.gl/RvisKU'); audio.volume = .3; } if( sound == 'draw' ) { var audio = new Audio('https://goo.gl/F4zXc9'); audio.volume = .3; } if( sound == 'lose' ) { var audio = new Audio('https://goo.gl/cnh2hB'); audio.volume = .3; } if( sound == 'hit' ) { var audio = new Audio('https://goo.gl/JuVzLs'); audio.volume = .05; } audio.play();
}
Simple Blackjack Game - Script Codes
Simple Blackjack Game - Script Codes
Home Page Home
Developer Charlie Volpe
Username charlie-volpe
Uploaded November 08, 2022
Rating 3
Size 4,463 Kb
Views 46,552
Do you need developer help for Simple Blackjack Game?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Charlie Volpe (charlie-volpe) Script Codes
Name
Grided Canvas Side-Scroller Game Engine
Podshare
Heart Shaped Games Redesign
RGBA Long Form to Decimal Converter
IPad CSS Template
Switch with Indicator Light
Simple Battle Game
Full Site Redesign
Animated Menu Circles
IPhone 5 CSS Template
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!