【问题标题】:Javascript/jQuery war card gameJavascript/jQuery 战争纸牌游戏
【发布时间】:2021-03-05 14:43:35
【问题描述】:

我正在制作一款战争游戏,我需要帮助。规格如下:

交易按钮

当点击发牌按钮时,将开始游戏。

如果这是玩家第一次玩游戏,游戏会提示用户输入他们的名字。 (未来的连续游戏不会提示用户输入他们的名字。)

添加名称后,程序将:

  • 将玩家的名字添加到棋盘(左侧)和得分中 地区。
  • 任何存在的分数都将被清除。
  • 使用随机数功能将牌堆中的牌均匀发牌 在两个玩家之间为每个玩家创建一个手牌阵列。
  • 您需要跟踪从牌堆中发来的牌,以确保 没有重复。

发牌后:

清除可能显示在白板上的任何“卡数”并放入 数字 26 作为新的“卡数”。

播放按钮

当点击播放按钮时,玩家会收到一张卡片。半秒 后来 Slick 收到一张卡片。 注意:从每个玩家手牌的开头开始,并且 系统地在阵列中移动,每回合显示一张牌。 对于每个连续的回合,使用每个手牌中的下一张牌。 每打出一手牌,牌数就会减少 1。 打出该回合的牌后,比较两张牌的最高值 “甲板价值”。 “套牌价值”最高的牌获胜。 两张牌的分数都加到持有牌的玩家的分数上 最高“套牌价值”的卡。 低牌玩家没有得分。 在每位玩家将他/她的 26 张牌全部丢弃后,游戏将结束。这 获胜者将是他们卡片中累积得分最高的人 赢了。 在失败者的方框里打一个红色的 X,在获胜者的方框里打上绿色的复选标记 盒子。 如果您再次与相同的玩家一起玩,请单击“Deal”。 游戏以新交易和零分重新开始。 如果名称已经被“交易”,则不会提示输入新名称 为“玩家”进入游戏。 用于玩家和 Slick 手的代码,以及使用的代码 卡,被清除。 “卡数”设置为 26。 如果您正在使用新玩家的名字进行游戏,请单击“新玩家”。 有关“新玩家”如何使用的说明,请参见下面的“新玩家按钮” 按钮有效。

新播放器按钮

单击此按钮以新交易、零分和 提示输入新玩家的姓名。 (无需点击“交易”。) 用于玩家和 Slick 手的代码,以及使用的代码 卡,被清除。 “卡数”设置为 26。

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

    $(document).ready(function () {

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

  var used_cards = new Array();
  var player_cards = new Array();
  var slick_cards = new Array();
  var P_hand = {
    cards: new Array()
  }
  var S_hand = {
    cards: new Array()
  }
  var Hand = {
    cards: new Array(),
  }

  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)
  ];

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

到目前为止,交易按钮显示了一个提示,当我输入文本时,它不会将类文本更改为输入的内容,并且我在制作手形数组并使它们成为不可重复的随机数组时遇到了麻烦。感谢您的帮助!

【问题讨论】:

    标签: javascript html jquery


    【解决方案1】:

    托尼,

    document.getElementsByClassName() 返回一个类似数组的已找到元素的集合。因此,如果您的集合仅包含 1 个项目 - 类为“pName”,则需要将其作为索引为 0 的数组元素来寻址。

    另外,也许你在 jquery 导入中有错字:

    $(document).ready(function () {
    
      $('#deal').click(function(){
        var player = prompt("Please enter your name.");
        if (player != null) {
          document.getElementsByClassName('pName')[0].innerHTML = player;
        }
      });
    
      var used_cards = new Array();
      var player_cards = new Array();
      var slick_cards = new Array();
      var P_hand = {
        cards: new Array()
      }
      var S_hand = {
        cards: new Array()
      }
      var Hand = {
        cards: new Array(),
      }
    
      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)
      ];
    
      function card(name, suit, value, trump) {
        this.name = name;
        this.suit = suit;
        this.value = value;
        this.trump = trump;
      }
    });
    <!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="scripts/jQ-War.js"></script>
    </body>
    
    </html>

    【讨论】:

    • 我能够显示交易的玩家名称和新玩家按钮。我遇到了数组问题,不知道从哪里开始。
    • 阿列克谢,我需要帮助来得分并让卡片不再重复。我能够弄清楚如何为播放器和计算机制作一个数组,但是显示的卡片是重复的。这是 JS 小提琴:jsfiddle.net/jze79d64
    猜你喜欢
    • 1970-01-01
    • 2023-04-04
    • 2021-12-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多