将卡片图像添加到纸牌游戏中，而不是使用数组添加文本答案

【问题标题】：Adding card images into a card game rather than text using arrays将卡片图像添加到纸牌游戏中，而不是使用数组添加文本
【发布时间】：2018-03-02 09:36:13
【问题描述】：

我的程序不断崩溃，这是一个 21 点/21 点游戏（我不确定有什么区别），程序会询问玩家他们想做什么，然后一旦他们选择了摇杆，它就会崩溃我检查了控制台并没有出现任何错误，我已经在 repl 中测试了 javascript，但当我尝试将其合并到 html 页面时它工作正常。

此外，当它起作用时，它只会显示房屋牌或第二个玩家牌，而不是所有玩家牌。

最后，一旦它工作了，我想通过为用户添加卡片图像来改进它，但我不知道如何开始。

<html>
<head>
<h1 align="center">21 Game</h1>
</head>
<body bgcolor="#458B00">

<div align='center'>
    <h3>House Cards</h3>
    <h5 id='housecurrenthand'></h5>
    <h5 id='househand'> </h5>

    <h3>Players Cards</h3>
    <h5 id='playershand1'> </h5>
    <h5 id='playershand2'> </h5>
    <h5 id='playershand3'> </h5>
    <h5 id='playershand4'> </h5>
    <h5 id='playershand5'> </h5>
    <h5 id='playershand6'> </h5>
    <h5 id='playershand7'> </h5>
    <h5 id='playershand8'> </h5>
    <h5 id='playershand9'> </h5>
    <h5 id='playershand10'> </h5>

    <h4 id='winner'> </h4>

    <button onclick="play()" float='bottom'>Play</button>

</div>
<script language='JavaScript'> 

function play() {
  playersQ = prompt('How many people are playing?');
  playershands = [];
  i = 0;
  count = 0;
  var player_cards = 0;

  function player() {
    var player_cards = Math.floor(Math.random() * 21) + 1;
    while (player_cards < 21) {
      Hit = prompt('Players cards are ' + player_cards + ' Would you like stick or twist?(S/T)')
      if (Hit == 'T') {
        player_cards = player_cards + Math.floor(Math.random() * 11) + 1;
      } else if (Hit == 'S') {
        break;
      } else if (player_cards > 21) {
        alert('Player is bust');
        break;
      }
    }
    return player_cards;
  }

  function house() {
    var house_cards = Math.floor(Math.random() * 21) + 1;
    while (house_cards < 18 && house_cards < 22) {
      house_cards = house_cards + Math.floor(Math.random() * 11);
    }
    return house_cards;
  }

  while (i < playersQ) {
    playershands.push(player());
    i = i + 1;
  }

var house_hand = house();



  while (count < playersQ) {
    count2 = count + 1
    document.getElementById('playershand' +i ).innerHTML = ('Player ' + count2 + ' has ' + playershands[count]);
  }

document.getElementById('househand').innerHTML = ('House has ' + house_hand);

count = 0 ;

while (count < playersQ){
    if (playershands[count] > house_hand && playershands[count] < 22) {
      document.getElementById('winner').innerHTML = ('Player wins');
      count = count + 1;
    } else if (house_hand > playershands[count] && house_hand < 22) {
      document.getElementById('winner').innerHTML = ('House wins');
      break;
    } else if (house_hand == playershands[count]) {
      document.getElementById('winner').innerHTML = ('draw');
      break;
    }
  }
}

</script>
</body>
</html>

【问题讨论】：

首先，如果程序崩溃了，你必须知道为什么——错误、异常……？其次，但这仅与玩家体验有关，从技术上讲，您的程序有可能获得一些 A。
它对我有用。顺便说一句，这在非严格模式下应该不是问题，但是您忘记声明您的 Hit 变量。

标签： javascript html arrays playing-cards

【解决方案1】：

要抽牌，你可以：

在canvas 中绘制它们
告诉那张牌“红心王牌”A♥等于“1A.png”
可以使用SVG 生成卡片

祝你开发愉快！

【讨论】：