JavaScript 纸牌游戏

Question

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

我的问题是：如何让这个数组显示牌，并随机分配一张牌给两个玩家，并获得最高牌的胜利？我知道可能需要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

试试这个代码。阅读 cmets 进行解释

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

Answer 2

您使用document.getElementById(id).src = cards[0]; 设置src。 https://jsfiddle.net/stevenkaspar/490zm66v/

function startRound() {
 var p1_card_index = Math.floor(Math.random() * 13);// random bt 0-13
 var p2_card_index = p1_card_index;
 // make sure same card isn't drawn again
 while (p2_card_index == p1_card_index) {
  p2_card_index = Math.floor(Math.random() * 13);
 }
 // set the src and the alt of the <img/>
 document.getElementById('c1').src = cards[p1_card_index];
 document.getElementById('c1').alt = cards[p1_card_index];
 document.getElementById('c2').src = cards[p2_card_index];
 document.getElementById('c2').alt = cards[p2_card_index];

 // determine who won and give them points
 if (p1_card_index > p2_card_index) {
  p1_wins++;
  document.getElementById('w1').innerHTML = p1_wins;
 } else {
  p2_wins++;
  document.getElementById('w2').innerHTML = p2_wins;
 }
}

Answer 3

    <style>
        .cards {
            width: 200px;
            height: 200px;
        }

        img {
            width: 100%;
            height: 100%;
        }

        #showWinner {
            width: 200px;
            height: 30px;   
        }
    </style>

    <script type="javascript/text">
        $(document).ready(function(){
            var cardPlayer1 = 0;
            var cardPlayer2 = 0;
            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';

            $("#startGame").on("click",function(){
                $("#cardPlayer1").attr("src", '');
                $("#cardPlayer2").attr("src", '');
                $("#showWinner").html("");
                getPlayerCards();
            }); 
        });

        function getRandom() {
            var randomNumber = Math.floor(Math.random() * 12) //Get random between 0 and 12
            return randomNumber;
        }

        function getPlayerCards() {
            this.cardPlayer1 = this.getRandom();
            this.cardPlayer2 = this.getRandom();                
        }

        function displayCards() {
            $("#cardPlayer1").attr("src", '"' + cards[this.cardPlayer1] + '"'); //PUT URL PLAYER 1 TO IMG
            $("#cardPlayer2").attr("src", '"' + cards[this.cardPlayer2] + '"'); //PUT URL PLAYER 2 TO IMG

            if(this.cardPlayer1 > this.cardPlayer2) {
                $("#showWinner").html("Player 1 wins!");
            } else if (this.cardPlayer1 < this.cardPlayer2) {
                $("#showWinner").html("Player 2 wins!");
            } else {
                $("#showWinner").html("Player 2 wins!");
            }
        }
    </script>
<head>

<body>
    <img id="cardPlayer1" class="cards">

    <img id="cardPlayer2" class="cards">

    <div id="showWinner"></div>

    <button id="startGame">Get new cards</button>
</body>

也许这样的东西可行..你可以用它来试试（也许有一些错误，我编码得很快，没有检查它是否有效：D）

最好的问候