Question

你好，StackOverflow的人，我正在尝试使用javascript制作二十一点游戏。在我的代码中，我有两个功能。这些功能可以在＆＃34; deal＆＃34;已被按下并在＆＃34; Hit＆＃34;时出现第二张牌值。被压了。我如何添加这两个函数来添加两个卡的值，所以我可以测试玩家是否超过了21的值？感谢您花时间阅读本文，谢谢！这是我的代码：

＆＃13;

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();

＆＃13;

#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;
}

＆＃13;

<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">

＆＃13;

Answer 1

你去@ zer00ne。花了比预期更长的时间。感谢您之前的所有帮助。

<!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>

Answer 2

我得到的数字总值有效，但我还没有得到套装，经销商或轮流。既然你只要求前者，那就足够了。

我使用拼接从牌组中移除已打牌，重命名牌以便更容易解析（我使用了基数16（十六进制）所以＆＃39; a＆＃39; = 10＆＃39; b＆＃39 ; = 11）数值。

＆＃13;

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');

＆＃13;

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;
  }

＆＃13;

<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;">

＆＃13;

将两个函数一起添加到一个值？

2 个答案: