如何显示二十一点牌的洗牌结果？答案

【问题标题】：How to show result of shuffle deck of blackjack card?如何显示二十一点牌的洗牌结果？
【发布时间】：2019-06-03 19:26:03
【问题描述】：

我正在制作一个简单的二十一点游戏。现在，我做一个洗牌功能。为什么点击新游戏按钮后innerText没有出现卡牌抖动的结果？

我已经检查并重复了代码并更正了变量和分号的位置，但它没有任何效果。

/*
  Blackjack Game
*/

//Card Variables
let suits = ['Hearts', 'Clubs', 'Diamonds', 'Spades'],
  values = ['Ace', 'King', 'Queen', 'Jack',
    'Ten', 'Nine', 'Eight', 'Seven', 'Six',
    'Five', 'Four', 'Three', 'Two'
  ];

//DOM Variables
let textArea = document.getElementById('text-area'),
  newGameButton = document.getElementById('new-game-button'),
  hitButton = document.getElementById('hit-button'),
  stayButton = document.getElementById('stay-button');

//Game Variables
let gameStarted = false,
  gameOver = false,
  playerWon = false,
  dealerCard = [],
  playerCard = [],
  dealerScore = 0,
  playerScore = 0,
  deck = [];

hitButton.style.display = 'none';
stayButton.style.display = 'none';
showStatus();

newGameButton.addEventListener('click', function() {
  gameStarted = true;
  gameOver = false;
  playerWon = false;

  deck = createDeck();
  shuffleDeck(deck);
  dealerCards = [getNextCard(), getNextCard()];
  playerCards = [getNextCard(), getNextCard()];

  newGameButton.style.display = 'none';
  hitButton.style.display = 'inline';
  stayButton.style.display = 'inline';
  showStatus();
});

function createDeck() { //Membuat deck dari 52 kartu
  let deck = [];
  for (let suitIdx = 0; suitIdx < suits.length; suitIdx++) {
    for (let valueIdx = 0; valueIdx < values.length; valueIdx++) {
      let card = {
        suit: suits[suitIdx],
        value: values[valueIdx]
      }
      deck.push(card);
    }
  }
  return deck;
}

function shuffleDeck(deck) {
  for (let i = 0; i < deck.length; i++) {
    let swapIdx = Math.trunc(Math.random() * deck.length);
    let tmp = deck[swapIdx];
    deck[swapIdx] = deck[i];
    deck[i] = tmp;
  }
}

function getCardString(card) {
  return card.value + ' of ' + card.suit;
}

function getNextCard() {
  return deck.shift();
}

function showStatus() {
  if (!gameStarted) {
    textArea.innerText = 'Welcome to Blackjack!';
    return;
  }
}

for (var i = 0; i < deck.length; i++) {
  textArea.innerText = "\n" + getCardString(deck[i]);
}

<h1 id="title">Welcome to Blackjack!</h1>
<h4>by Andrean Hendy</h4>

<p id="text-area">Welcome to Blackjack!</p>
<button id="new-game-button">New Game!</button>
<button id="hit-button">Hit!</button>
<button id="stay-button">Stay</button>

在此处查看代码@plunk：http://embed.plnkr.co/rAzcbmTyH8vIRBI3appX/

我期望的是洗牌后显示52副牌的结果。

【问题讨论】：

我看到您将两张牌分配给闲家和庄家，但我没有看到您将它们放在屏幕上的哪个位置？您的最后一个 for 循环仅运行一次（当页面加载时），此时您尚未创建 deck。
for (var i = 0; i < deck.length; i++) { 在底部看起来不会运行。看起来它是在填充 deck 之前执行的，所以没有什么可以循环的。

标签： javascript dom blackjack

【解决方案1】：

在您的“新游戏按钮”按钮单击事件侦听器中，您永远不会更改您的“文本区域”内部文本。唯一可以做到这一点的子方法是showStatus，但if(!gameStarted) 条件在这种情况下保护我们免受innerText 更改。

不确定我是否正确理解了您的逻辑，但后续更新会在您点击“新游戏”按钮后显示结果。

newGameButton.addEventListener('click', function(){
  // ...
  setDeckText();
});

// ...

function setDeckText() {
  for(var i = 0; i < deck.length; i++){
    textArea.innerText = "\n" + getCardString(deck[i]);
  }
}

【讨论】：

大家好，谢谢大家的回答，问题来了，当点击newgame按钮时，我想在屏幕上显示getCardString，哪张牌被洗牌了

【解决方案2】：

问题解决了。最后几行的循环应该放在 showStatus() 函数块中。但我以前没有。

【讨论】：