时间戳

首页 > 解决方案 > 随机不重复卡片阵列

javascript - 随机不重复卡片阵列

问题描述

我正在制作玩家和电脑之间的战争游戏。当我单击交易按钮时，每个玩家的数组都会被洗牌。单击播放按钮时，卡片数组会在 div 中显示为图像。我遇到的问题是卡片被重复了，我需要帮助来让它们不重复。这是我的 JS：

$(document).ready(function() {
  document.getElementById('play').disabled = true;

  function card(name, suit, value, trump) {
    this.name = name;
    this.suit = suit;
    this.value = value;
    this.trump = trump;
  }

  var deck = [
    new card('Ace', 'Hearts', 11, 142),
    new card('Two', 'Hearts', 2, 22),
    new card('Three', 'Hearts', 3, 32),
    new card('Four', 'Hearts', 4, 42),
    new card('Five', 'Hearts', 5, 52),
    new card('Six', 'Hearts', 6, 62),
    new card('Seven', 'Hearts', 7, 72),
    new card('Eight', 'Hearts', 8, 82),
    new card('Nine', 'Hearts', 9, 92),
    new card('Ten', 'Hearts', 10, 102),
    new card('Jack', 'Hearts', 10, 112),
    new card('Queen', 'Hearts', 10, 122),
    new card('King', 'Hearts', 10, 132),
    new card('Ace', 'Diamonds', 11, 141),
    new card('Two', 'Diamonds', 2, 21),
    new card('Three', 'Diamonds', 3, 31),
    new card('Four', 'Diamonds', 4, 41),
    new card('Five', 'Diamonds', 5, 51),
    new card('Six', 'Diamonds', 6, 61),
    new card('Seven', 'Diamonds', 7, 71),
    new card('Eight', 'Diamonds', 8, 81),
    new card('Nine', 'Diamonds', 9, 91),
    new card('Ten', 'Diamonds', 10, 101),
    new card('Jack', 'Diamonds', 10, 111),
    new card('Queen', 'Diamonds', 10, 121),
    new card('King', 'Diamonds', 10, 131),
    new card('Ace', 'Clubs', 11, 143),
    new card('Two', 'Clubs', 2, 23),
    new card('Three', 'Clubs', 3, 33),
    new card('Four', 'Clubs', 4, 43),
    new card('Five', 'Clubs', 5, 53),
    new card('Six', 'Clubs', 6, 63),
    new card('Seven', 'Clubs', 7, 73),
    new card('Eight', 'Clubs', 8, 83),
    new card('Nine', 'Clubs', 9, 93),
    new card('Ten', 'Clubs', 10, 103),
    new card('Jack', 'Clubs', 10, 113),
    new card('Queen', 'Clubs', 10, 123),
    new card('King', 'Clubs', 10, 133),
    new card('Ace', 'Spades', 11, 144),
    new card('Two', 'Spades', 2, 24),
    new card('Three', 'Spades', 3, 34),
    new card('Four', 'Spades', 4, 44),
    new card('Five', 'Spades', 5, 54),
    new card('Six', 'Spades', 6, 64),
    new card('Seven', 'Spades', 7, 74),
    new card('Eight', 'Spades', 8, 84),
    new card('Nine', 'Spades', 9, 94),
    new card('Ten', 'Spades', 10, 104),
    new card('Jack', 'Spades', 10, 114),
    new card('Queen', 'Spades', 10, 124),
    new card('King', 'Spades', 10, 134)
  ];

  // var test = '!$.inArray(index, used_cards) > -1';
  // console.log('test ' + test);

  var used_cards = new Array();

  // var pTotal = 0;
  // pTotal = pTotal + deck[num1].value + deck[num2].value;

  function getRandom(num) {
    var my_num = Math.floor(Math.random() *num);
    return my_num;
  }

  function playerHit() {
    var good_player_card = false;
    do{
      var index = getRandom(52);
      if ( !$.inArray(index, used_cards) > -1) {
        good_player_card = true;
        var c = deck[index];
        used_cards[used_cards.length] = index;
        $("<img>")
        .attr('src', 'images/' + c.suit + '/' + c.name + '.jpg')
        .appendTo('#pHand')
        .fadeIn('1000');
      }
    }while (!good_player_card);
    good_player_card = false;
  }

  function slickHit() {

    var good_slick_card = false;
    do{
      var index = getRandom(52);
      if ( !$.inArray(index, used_cards) > -1) {
        good_slick_card = true;
        var c = deck[index];
        used_cards[used_cards.length] = index;
        $("<img>")
        .attr('src', 'images/' + c.suit + '/' + c.name + '.jpg')
        .appendTo('#cHand')
        .fadeIn('1500');
      }
    }while (!good_slick_card);
    good_slick_card = false;
  }

  /* function slickHit() {
  var index = getRandom)(52)

  $.inArray(index)

} */

$('#deal').one('click', function(){
  var player = prompt("Please enter your name.")
  if (player != null) {
    document.getElementsByClassName("pName")[0].innerHTML = player;
    document.getElementsByClassName("pName")[1].innerHTML = player;
  }

  document.getElementById('play').disabled = false;

  let card_count = 26;
  $('#cardCount').innerHTML = card_count;
});

$('#play').click(function(){
  $('img').remove();
  playerHit();
  slickHit();
});

$("#newPlayer").click(function(){
  var newPlayer = prompt("Please enter your name.")
  if (newPlayer != null) {
    document.getElementsByClassName("pName")[0].innerHTML = newPlayer;
    document.getElementsByClassName("pName")[1].innerHTML = newPlayer;
  }
  playerHit();
  slickHit();
  $('img').remove();
});
});

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Card Game</title>
    <link href="styles/normalilze.css" rel="stylesheet">
    <link href="styles/my_style.css" rel="stylesheet">
</head>

<body>
    <div id="main">
        <h1> Card Game </h1>
        <div id="left">

            <div id="pHand">
                <br />
                <!-- Using JavaScript replace the word 'Player' with the name of
            the person playing the game-->
                <h2 class="pName">Player</h2>
            </div>
            <div id="cHand">
                <h2>Slick</h2>
            </div>
            <div id="but">
                <button id="newPlayer">New player</button>
                <button id="deal">Deal</button>
                <button id="play">Play</button>
            </div>
        </div>

        <div id='right'>
            <h2>Card Count:</h2>
            <!-- Using JavaSCript enter the number of remaining cards in the 'Players' hand
            in the p tag below-->
            <p id="cardCount"></p>
            <br />
            <!-- Using JavaSCript replace the word 'Player' with the name of
            the person playing the game-->
            <h2 class="pName">Player</h2>
            <h2 id="pName2">:</h2>
            <!-- Using jQuery insert the current 'Player' score in the p tag
             below -->
            <p id="pScore"></p>
            <br />
            <h2 id="cName">Slick:</h2>
            <!-- Using jQuery insert the current 'Slick' score in the p tag
             below -->
            <p id="cScore"></p>

            <!-- add and style winning message in the
             following div -->
            <div id="win"> </div>
        </div>
    </div>

    <script src="scripts/jquery-3.2.1.min.js"></script>
    <script src="scripts/jQ-War.js"></script>
</body>

</html>

帮助表示赞赏！

标签： javascripthtmljquery

解决方案

"use strict";
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    method1();
    console.log('----------');
    method2();
}

class cardT
{
    constructor(name, suit, value, trump)
    {
        this.name = name;
        this.suit = suit;
        this.value = value;
        this.trump = trump;
    }
}

function method1()
{
    // Method 1, yours
    var cards = [
        new cardT('Ace', 'Hearts', 11, 142),
        new cardT('Two', 'Hearts', 2, 22),
        new cardT('Three', 'Hearts', 3, 32),
        new cardT('Four', 'Hearts', 4, 42),
        new cardT('Five', 'Hearts', 5, 52),
        new cardT('Six', 'Hearts', 6, 62),
        new cardT('Seven', 'Hearts', 7, 72),
        new cardT('Eight', 'Hearts', 8, 82),
        new cardT('Nine', 'Hearts', 9, 92),
        new cardT('Ten', 'Hearts', 10, 102),
    ];
    // keep record of the randomly chosen indices
    var indices = [];
    for (var i=0; i<cards.length; i++)
    {
        let curIndex = Math.floor(Math.random()*cards.length);
        indices.push(curIndex);
        console.log( cards[curIndex].name, cards[curIndex].suit );
    }
    console.log(indices);
}

function method2()
{
    var cards = [
        new cardT('Ace', 'Hearts', 11, 142),
        new cardT('Two', 'Hearts', 2, 22),
        new cardT('Three', 'Hearts', 3, 32),
        new cardT('Four', 'Hearts', 4, 42),
        new cardT('Five', 'Hearts', 5, 52),
        new cardT('Six', 'Hearts', 6, 62),
        new cardT('Seven', 'Hearts', 7, 72),
        new cardT('Eight', 'Hearts', 8, 82),
        new cardT('Nine', 'Hearts', 9, 92),
        new cardT('Ten', 'Hearts', 10, 102),
    ];
    
    for (var index=0; index<cards.length; index++)
    {
        // pick a position at random
        var randIndex = Math.floor(Math.random()*cards.length);
        
        // swap the current card with the randomly chosen one
        var tmp = cards[index];
        cards[index] = cards[randIndex];
        cards[randIndex] = tmp;
    }
    // display them all
    for (var i=0; i<cards.length; i++)
    {
        console.log(cards[i].name, cards[i].suit);
    }
}

推荐阅读