Question

我正在尝试制作纸牌游戏。玩家1和玩家2被给予随机卡并且具有最高卡的人获胜。下面是一套卡片（黑桃）的简单数组。我已将卡片的图像文件保存在名为＆＃39; images＆＃39;的文件夹中。如下所示。

我的问题是：如何让这个阵列显示卡片，并随机为两名球员分配一张牌，并获得最高的牌？我理解可能需要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

试试这段代码。阅读评论以获得解释

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

 $(this).css({'color','red'});

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）

最好的问候

JavaScript纸牌游戏

3 个答案: