JavaScript 卡牌游戏

Question

我正在尝试制作一款纸牌游戏。玩家 1 和玩家 2 获得一张随机牌，拥有最大牌的人获胜。下面是一副牌(黑桃)的简单数组。我已将卡片的图像文件保存在名为“图像”的文件夹中，如下所示。

我的问题是:如何让这个数组显示卡片，并随机将一张卡片分配给两个玩家，并获得最高的卡片获胜？我知道可能需要使用 if/else/else if 语句来确定获胜者，但是我该如何将我的牌组分发给两个玩家呢？它会是某种功能吗？下面是我创建的数组:

var cards = [];   //variable for cards 

cards [0] = 'images/aceofspades.jpg';
cards [1] = 'images/twoofspades.jpg';
cards [2] = 'images/threeofspades.jpg';
cards [3] = 'images/fourofspades.jpg';
cards [4] = 'images/fiveofspades.jpg';
cards [5] = 'images/sixofspades.jpg';
cards [6] = 'images/sevenofspades.jpg';
cards [7] = 'images/eightofspades.jpg';
cards [8] = 'images/nineofspades.jpg';
cards [9] = 'images/tenofspades.jpg';
cards [10] = 'images/jackofspades.jpg';
cards [11] = 'images/queenofspades.jpg';
cards [12] = 'images/kingofspades.jpg';

下面的这段代码是我接下来要做什么的想法，但我不太确定这是否正确:

function choose (cards);
document.image [cards].src = cardsimage [cards];

Answer 1

试试这个代码。阅读评论以获取解释

// All cards:
var cards = [
  'https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_A.svg/2000px-Playing_card_club_A.svg.png',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Playing_card_spade_2.svg/819px-Playing_card_spade_2.svg.png',
  'http://www.clipartbest.com/cliparts/9T4/ezn/9T4eznrjc.png',
];

function play() {
  // get random position. Math.random returns float between 0 and 1
  var p1 = Math.floor(Math.random() * cards.length); // will get integet between 0 and cards.length - 1
  var p2 = Math.floor(Math.random() * cards.length);

  // create new image element
  var img1 = document.createElement('img');
  var img2 = document.createElement('img');

  // set image source to be same as selected card
  img1.src = cards[p1];
  img2.src = cards[p2];

  // select cards holding elements
  var holder1 = document.getElementById('card1');
  var holder2 = document.getElementById('card2');

  // clear images from previous game
  holder1.innerHTML = "";
  holder2.innerHTML = "";

  // add images to it's holders
  holder1.appendChild(img1);
  holder2.appendChild(img2);

  // game logic. Compare array key to see who wins
  if (p1 > p2) {
    alert('Player 1 is winner!');
  } else if (p1 < p2) {
    alert('Player 2 is winner!');
  } else {
    alert('No winner!');
  }
}

.p1,
.p2 {
  float: left;
  width: 200px;
  height: 250px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  text-align: center;
}
img {
  height: 200px;
  display: inline-block;
}
button {
  width: 400px;
  font-size: 16px;
  color: white;
  background-color: #0040ff;
  border: 1px solid #7878ff;
  cursor: pointer;
}

<div class="play">
  <button onClick="play()">PLAY</button>
</div>
<div class="p1">
  <div class="header">Player 1</div>
  <span class="card-holder" id="card1"></span>
</div>
<div class="p2">
  <div class="header">Player 2</div>
  <span class="card-holder" id="card2"></span>
</div>