Reputation: 35
Hello amazing people of StackOverflow, I am trying to make a blackjack game using javascript. In my code I have two functions. These functions deal out a first card value when "deal" has been pressed and deals out a second card value when "Hit" has been pressed. How would I go about adding these two functions to add the value of both cards, so I can test if the player has gone over the value of 21? I appreciate the time you have spent reading this, thank you! Here is my code:
var score = 0;
var deck = ["ace", "ace", "ace", "ace", 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 7, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, "jack", "jack", "jack", "jack", "queen", "queen", "queen", "queen", "king", "king", "king", "king"];
function deal() {
var random = deck[Math.floor(Math.random() * deck.length)];
document.getElementById('result').innerHTML = random;
}
function hit() {
var random2 = deck[Math.floor(Math.random() * deck.length)];
document.getElementById('result2').innerHTML = random2;
}
var time = new Date();
document.getElementById("time").innerHTML = time.toDateString();
#deal {
position: fixed;
width: 50px;
height: 35px;
top: 500px;
left: 500px;
background-color: silver;
border-radius: 10px;
border-style: ridge;
}
#hit {
position: fixed;
width: 50px;
height: 35px;
top: 500px;
border-style: ridge;
border-radius: 10px;
}
body {
text-align: center;
font-size: 30px;
background: url("http://corporate.fortuna2000.be/imgs/background/red_poker3_xl.jpg");
}
#ace {
position: absolute;
top: 100px;
left: 100px;
}
#time {
position: absolute;
top: 590px;
right: 0px;
border-style: solid;
border-radius: 10px;
background-color: silver;
}
<div id="result"></div>
<div id="result2"></div>
<div id="time"></div>
<input type="button" value="deal" onclick="deal()" id="deal">
<input type="button" value="hit" onclick="hit()" id="hit">
Upvotes: 2
Views: 183
Reputation: 35
Here you go @zer00ne. It took a little longer than expected. Thanks for all the help before.
<!DOCTYPE html>
<html>
<head>
<title>casino game.</title>
<style type="text/css">
html {
box-sizing: border-box;
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight: 900;
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid transparent;
outline: 0;
text-indent: 0;
}
body {
height: 100%; width: 100%; background: #000; color: #FFF; position: relative; text-align: center; font-variant: small-caps; background: url("http://corporate.fortuna2000.be/imgs/background/red_poker3_xl.jpg");
}
#hit, #stay, #reshuffle,#hit2,#hit3, #hit4, #deal{
position: absolute;
width: 50px;
height: 35px;
border: 1px ridge;
border-radius: 6px;
top: 90%;
background:;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#hit{
right: 35%;
visibility: hidden;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#hit2{
right: 35%;
visibility: hidden;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#hit3{
right: 35%;
visibility: hidden;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#hit4{
right: 35%;
visibility: hidden;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#stay {
left: 35%;
visibility: hidden;
font-family: "Comic Sans MS", cursive, sans-serif;
}
input {
line-height: 2;
cursor: pointer;
border: 1px solid #F93;
border-radius: 8px;
background: #900;
color: white;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#msg{
background:;
color:#F93 ;
border: 2px solid #FC3;
border-radius: 8px;
border-color: #F93;
margin: 0 auto;
text-align: center;
font-size: 20px;
height: 90px;
width: 800px;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#deal{
position: absolute;
width: 100px;
height: 35px;
border: 1px ridge;
border-radius: 6px;
top: 50%;
left: 635px;
right:50%;
visibility: visible;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#displayOne{
position: fixed;
left: 70px;
top: 100px;
}
#displayTwo{
position: absolute;
left: 70px;
top: 150px;
}
#displayThree{
position: absolute;
left: 70px;
top: 200px;
visibility: hidden;
}
#displayFour{
position: absolute;
left: 70px;
top: 250px;
visibility: hidden;
}
#label1{
position: fixed;
left: 0px;
top: 100px;
}
#label2{
position: absolute;
left: 0px;
top: 150px;
}
#label3{
position: absolute;
left: 0px;
top: 200px;
visibility: hidden;
}
#label4{
position: absolute;
left: 0px;
top: 250px;
visibility: hidden;
}
#reshuffle{
width: 65px;
height: 35px;
left: 635px;
right:50%;
visibility: hidden;
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
</head>
<body onload="instruction(); ">
<input type="text" id="msg" readonly = "readonly">
<br>
<input type="text" id="displayOne" readonly="readonly">
<br>
<input type="text" id="displayTwo" readonly="readonly">
<br>
<input type="text" id="displayThree" readonly="readonly">
<br>
<input type="text" id="displayFour" readonly="readonly">
<br>
<br>
<div id="label1">
<h3>card 1</h3>
</div>
<div id="label2">
<h3>card 2 </h3>
</div>
<div id="label3">
<h3>card 3</h3>
</div>
<div id="label4">
<h3>card 4</div>
</div>
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<input type="button" value="Deal" id="deal" onclick="deal(); displayOne.value=card1; displayTwo.value=card2;">
<input type="button" value="Hit" id="hit" onclick="add();">
<input type="button" value="Hit2" id="hit2" onclick="add2();">
<input type="button" value="Hit3" id="hit3" onclick="add3();">
<input type="button" value="Hit4" id="hit4" onclick="add4();">
<input type="button" value="Reshuffle" id="reshuffle" onclick="location.reload();">
<input type="button" value="Stay" id="stay" onclick="stay();">
<audio>
<source src="cardPlace4.wav" type="audio/wav">
</audio>
<script type="text/javascript">
///////////////////////////////////////////////////////// beginning of Javascript /////////////////////////////////////////////////////////////////
function instruction(){
alert("INSTRUCTIONS: Dealer will deal player two cards. You have the option to stay with those two cards or hit for an extra card. The goal is to get an added value of you cards closest to 21 without going over 21. If you stay, the dealer will deal itself two cards. If the dealer has a value more than the player, the dealer wins. If you deal a value equal to 21, the dealer will automatically count it as a win. If you hit and you get a value more than 21, the dealer will count it as an automatic loss.")
}
////////////////////////////////////////////////////////////// declaring variables //////////////////////////////////////////////////////////////
var card = [1,2,3,4,5,6,7,8,9,10,11];
var suits = ['diamonds', 'spades', 'hearts', 'clubs'];
////////////////////////////////////////////////////////// player values ////////////////////////////////////////////////////////////////////////
var card1 = card[Math.floor(Math.random()*card.length)];
var card2 = card[Math.floor(Math.random()*card.length)];
var card3 = card[Math.floor(Math.random()*card.length)];
var card4 = card[Math.floor(Math.random()*card.length)];
var card5 = card[Math.floor(Math.random()*card.length)];
var card6 = card[Math.floor(Math.random()*card.length)];
var pTotal = card1 + card2;
//////////////////////////////////////////////////////////// Dealer values /////////////////////////////////////////////////////////////////
var dCard1 = card[Math.floor(Math.random()*card.length)];
var dCard2 = card[Math.floor(Math.random()*card.length)];
var dCard3 = card[Math.floor(Math.random()*card.length)];
var dCard4 = card[Math.floor(Math.random()*card.length)];
var dCard5 = card[Math.floor(Math.random()*card.length)];
var dCard6 = card[Math.floor(Math.random()*card.length)];
var dTotal = dCard1 + dCard2;
////////////////////////////////////////////////////////// player suits ////////////////////////////////////////////////////////////////////
var suit1 = suits[Math.floor(Math.random()*suits.length)];
var suit2 = suits[Math.floor(Math.random()*suits.length)];
var suit3 = suits[Math.floor(Math.random()*suits.length)];
var suit4 = suits[Math.floor(Math.random()*suits.length)];
var suit5 = suits[Math.floor(Math.random()*suits.length)];
var suit6 = suits[Math.floor(Math.random()*suits.length)];
///////////////////////////////////////////////////////// dealer suits /////////////////////////////////////////////////////////////////////
var dSuit1 = suits[Math.floor(Math.random()*suits.length)];
var dSuit2 = suits[Math.floor(Math.random()*suits.length)];
var dSuit3 = suits[Math.floor(Math.random()*suits.length)];
var dSuit4 = suits[Math.floor(Math.random()*suits.length)];
var dSuit5 = suits[Math.floor(Math.random()*suits.length)];
var dSuit = suits[Math.floor(Math.random()*suits.length)];
///////////////////////////////////////////////////////// end of variables/////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////beginning of functions////////////////////////////////////////////////////////////
var deal = function(){
var dealt = card1 + card2;
msg.value = dealt;
document.getElementById('hit').style.visibility = 'visible';
document.getElementById('stay').style.visibility = 'visible';
document.getElementById('deal').style.visibility = 'hidden';
}
////////////////////////////////////////////////////////////////////////////////
var add = function(){
document.getElementById('hit').style.visibility = 'hidden';
document.getElementById('hit2').style.visibility = 'visible';
var hit = card1 + card2 + card3;
var pTotal = hit;
msg.value = hit;
if(hit > 21){
var bet = 90;
msg.value = "You have been dealt a total of " + hit + ". Automatic loss.";
document.getElementById('hit').style.visibility = 'hidden';
document.getElementById('hit2').style.visibility = 'hidden';
document.getElementById('hit3').style.visibility = 'hidden';
document.getElementById('hit4').style.visibility = 'hidden';
document.getElementById('stay').style.visibility = 'hidden';
document.getElementById('reshuffle').style.visibility = 'visible';
}
if(hit === 21){
msg.value = hit + " Automatic Win!";
document.getElementById('hit').style.visibility = 'hidden';
document.getElementById('hit2').style.visibility = 'hidden';
document.getElementById('hit3').style.visibility = 'hidden';
document.getElementById('hit4').style.visibility = 'hidden';
document.getElementById('stay').style.visibility = 'hidden';
document.getElementById('reshuffle').style.visibility = 'visible';
}
}
/////////////////////////////////////////////////////////////////////////////////
var add2 = function(){
document.getElementById('hit2').style.visibility = 'hidden';
document.getElementById('hit3').style.visibility = 'visible';
var hit = card1 + card2 + card3 + card4;
pTotal = hit;
msg.value = hit;
if(hit > 21){
msg.value = "You have been dealt a total of " + hit + ". Automatic loss."
document.getElementById('hit').style.visibility = 'hidden';
document.getElementById('hit2').style.visibility = 'hidden';
document.getElementById('hit3').style.visibility = 'hidden';
document.getElementById('hit4').style.visibility = 'hidden';
document.getElementById('stay').style.visibility = 'hidden';
document.getElementById('reshuffle').style.visibility = 'visible';
}
if(hit === 21){
msg.value = "You have been Dealt a total of " + hit + ". Automatic win!" ;
document.getElementById('hit').style.visibility = 'hidden';
document.getElementById('hit2').style.visibility = 'hidden';
document.getElementById('hit3').style.visibility = 'hidden';
document.getElementById('hit4').style.visibility = 'hidden';
document.getElementById('stay').style.visibility = 'hidden';
document.getElementById('reshuffle').style.visibility = 'visible';
}
}
///////////////////////////////////////////////////////////////////////////////
var add3 = function(){
document.getElementById('hit3').style.visibility = 'hidden';
document.getElementById('hit4').style.visibility = 'visible';
var hit = card1 + card2 + card3 + card4 + card5;
pTotal = hit;
msg.value = hit;
if(hit > 21){
msg.value = "You have been dealt a total of " + hit + ". Automatic loss.";
document.getElementById('hit').style.visibility = 'hidden';
document.getElementById('hit2').style.visibility = 'hidden';
document.getElementById('hit3').style.visibility = 'hidden';
document.getElementById('hit4').style.visibility = 'hidden';
document.getElementById('stay').style.visibility = 'hidden';
document.getElementById('reshuffle').style.visibility = 'visible';
}
if(hit === 21){
msg.value = "You have been Dealt a total of " + hit + ". Automatic win!";
document.getElementById('hit').style.visibility = 'hidden';
document.getElementById('hit2').style.visibility = 'hidden';
document.getElementById('hit3').style.visibility = 'hidden';
document.getElementById('hit4').style.visibility = 'hidden';
document.getElementById('stay').style.visibility = 'hidden';
document.getElementById('reshuffle').style.visibility = 'visible';
}
}
////////////////////////////////////////////////////////////////////////////////
var add4 = function(){
var hit = card1 + card2 + card3 + card4 + card5 + card6;
pTotal = hit;
msg.value = hit;
if(hit > 21){
msg.value = "You have been dealt a total of " + hit + ". Automatic loss.";
document.getElementById('hit').style.visibility = 'hidden';
document.getElementById('hit2').style.visibility = 'hidden';
document.getElementById('hit3').style.visibility = 'hidden';
document.getElementById('hit4').style.visibility = 'hidden';
document.getElementById('stay').style.visibility = 'hidden';
document.getElementById('reshuffle').style.visibility = 'visible';
}
if(hit === 21){
msg.value = "You have been Dealt a total of " + hit + ". Automatic win!";
document.getElementById('hit').style.visibility = 'hidden';
document.getElementById('hit2').style.visibility = 'hidden';
document.getElementById('hit3').style.visibility = 'hidden';
document.getElementById('hit4').style.visibility = 'hidden';
document.getElementById('stay').style.visibility = 'hidden';
document.getElementById('reshuffle').style.visibility = 'visible';
}
}
//////////////////////////////////////////////////////////////////////////////
function dDeal(){
dDealt = dTotal;
}
/////////////////////////////////////////////////////////////////////////////
function stay(){
document.getElementById('hit').style.visibility = 'hidden';
document.getElementById('hit2').style.visibility = 'hidden';
document.getElementById('hit3').style.visibility = 'hidden';
document.getElementById('hit4').style.visibility = 'hidden';
document.getElementById('stay').style.visibility = 'hidden';
document.getElementById('reshuffle').style.visibility = 'visible';
if(pTotal > dTotal){
msg.value = "Player value: " + pTotal + " Dealer Value: " + dTotal + ". Player wins!";
}
if(dTotal > pTotal){
msg.value = "Player value: " + pTotal + " Dealer Value: " + dTotal + ". dealer wins!";
}
if( pTotal === dTotal){
msg.value = "'tis but a tie'.... Player value: " + pTotal + ". Dealer value: " + dTotal;
}
}
//////////////////////////////////////////////////////////////// end of functions ///////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////End of Javascript////////////////////////////////////////////////////////////////
</script>
</body>
</html>
Upvotes: 1
Reputation: 44078
I got the number value total working, but I didn't get the suit, dealer, or turns done yet. Since you requested for only the former, this should suffice.
I used splice to remove played cards from the deck, renamed the cards so they were easier to parse (I used radix 16 (hexidecimal) so 'a'=10 and 'b'=11) the number values.
var score = [];
var status;
var deck = ['c-b', 'h-b', 'd-b', 's-b', 'c-2', 'h-2', 'd-2', 's-2', 'c-3', 'h-3', 'd-3', 's-3', 'c-4', 'h-4', 'd-4', 's-4', 'c-5', 'h-5', 'd-5', 's-5', 'c-6', 'h-6', 'd-6', 's-6', 'c-7', 'h-7', 'd-7', 's-7', 'c-8', 'h-8', 'd-8', 's-8', 'c-9', 'h-9', 'd-9', 's-9', 'ct-a', 'ht-a', 'dt-a', 'st-a', 'cj-a', 'hj-a', 'dj-a', 'sj-a', 'cq-a', 'hq-a', 'dq-a', 'sq-a', 'ck-a', 'hk-a', 'dk-a', 'sk-a'];
var handCards = document.getElementById('hand');
var handScore = document.getElementById('score');
var hitMe = document.getElementById('hit');
function deal(x) {
x = parseInt(x, 10);
if (!x) {
var y = 1;
} else {
y = x;
}
console.log('y: ' + y);
var suit = '';
var hole = 0;
var total = 0;
for (var i = 0; i < y; i++) {
var idx = Math.floor(Math.random() * deck.length);
var card = deck[idx];
deck.splice(idx, 1);
suit = sortCard(card);
console.log('card: ' + card);
var num = card.split('-').pop();
if (num === 'b') {
hole++;
}
console.log('hole: ' + hole);
console.log('num: ' + num);
var val = parseInt(num, 16);
console.log('val: ' + val);
score.push(val);
console.log('score: ' + score[i]);
total = score.reduceRight(function(a, b) {
return a + b;
});
console.log('total: ' + total);
}
handCards.value = suit;
handScore.value = total;
if (total > 21 && hole < 1) {
status = 'bust';
} else if (total > 21 && hole > 0) {
hole = hole - 1;
total = total - 10;
status = 'prompt';
} else if (total < 21) {
status = 'prompt';
} else if (total === 21) {
status = 'stay';
} else return false;
session(status);
}
var sortCard = function(card) {
var face = [];
for (var j = card.length; j < 0; j--) {
var ch = card.charAt(j);
console.log('ch' + j + ': ' + ch);
switch (ch) {
case 'b':
kind = 'Ace of ';
break;
case 'k':
kind = 'King of ';
break;
case 'q':
kind = 'Queen of ';
break;
case 'j':
kind = 'Jack of ';
break;
case '2':
kind = 'Two of ';
break;
case '3':
kind = 'Three of ';
break;
case '4':
kind = 'Four of ';
break;
case '5':
kind = 'Five of ';
break;
case '6':
kind = 'Six of ';
break;
case '7':
kind = 'Seven of ';
break;
case '8':
kind = 'Eight of ';
break;
case '9':
kind = 'Nine of ';
break;
case 't':
kind = 'Ten of ';
break;
case 'c':
kind = 'Clubs';
break;
case 'h':
kind = 'Hearts';
break;
case 'd':
kind = 'Diamonds';
break;
case 's':
kind = 'Spades';
break;
case '0', '-', 'a', '1':
break;
}
face.push(kind);
console.log('face: ' + face);
}
suit = face.join();
return suit;
}
function session(status) {
var dTotal = 0;
var msg = document.getElementById('msg');
var hit = document.getElementById('hit');
var stay = document.getElementById('stay');
if (status === 'bust') {
msg.value = total + " Busted!";
hit.setAttribute('disabled', true);
} else if (status === 'prompt') {
msg.value = total + " Stay or Hit?";
} else if (status === 'stay') {
msg.value = 'Dealer has ' + dTotal;
hit.setAttribute('disabled', true);
} else return false;
}
deal('2');
html {
box-sizing: border-box;
font: 400 16px/2"Trebuchet MS";
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid transparent;
outline: 0;
text-indent: 0;
}
body {
height: 100%; width: 100%; background: #000; color: #FFF; position: relative; text-align: center; font-variant: small-caps; background: url("http://corporate.fortuna2000.be/imgs/background/red_poker3_xl.jpg"); }
#hit, #stay {
position: absolute;
width: 50px;
height: 35px;
border: 1px ridge #633;
border-radius: 6px;
top: 50%;
background: #933;
}
#stay {
left: 35%;
}
#hit {
right: 35%;
}
input {
line-height: 2;
cursor: pointer;
border: 1px solid #F93;
border-radius: 8px;
bacground: #900;
color: #F90;
}
#msg {
line-height: 3;
background: #600;
color: #FC3;
font-size: 2rem;
border: 2px solid #FC3;
border-radius: 8px;
margin: 0 auto;
text-align: center;
}
<input id="msg">
<br/>
<br/>
<label for="hand">Hand:</label>
<input id="hand">
<br/>
<br/>
<label for='score'>Score:</label>
<input id="score">
<br/>
<br/>
<input type="button" value="Hit" id="hit" onclick="deal(1);return false;">
<input type="button" value="Stay" id="stay" onclick="session('stay');return false;">
Upvotes: 0