Question

我是一个构建猜谜游戏的新手，并且在弄清楚如何让我的第二个提交表单工作时遇到了一些麻烦。

首先，我填充一张随机卡片，并让用户猜出有多少张卡片。然后我想让用户猜出牌组中有多少颗心。我的代码如下所示： HTML：

<body>
<h1>Pick a card, any card</h1>
<p id="instructions"> You have two boxes of cards, but you might not be playing with full decks. How many cards do you actually have? </p>  
  <form id="game-input">
    <input type="text" id="guess" />
    <input type="submit" />
  </form>
  <p id="tally"></p>
  <p id="result"></p>
  <h4 id="heartGame"></h4>
  <p id="heart-placeholder"></p>
  <p id="heartResult"></p>
</body>

使用Javascript：

// Variable for a guess tally
var guessTally = 1;

// Let's create arrays for card attributes
var suits = ["H", "D", "S", "C"];
var ranks = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];

// Card class constructor
var Card = function() {
  var randomSuit = Math.floor(Math.random()*suits.length);
  var randomRank = Math.floor(Math.random()*ranks.length);
  var card = {
    suit: suits[randomSuit],
    rank: ranks[randomRank]
  };
  return card;
};

// Now we create a deck object (we'll only need one, so we don't need a constructor here)
var cardDeck = {
  cards: [],
  capacity: 2,
  popDeck: function() {
    var answer = Math.floor(Math.random() * this.capacity + 1);
    while(this.cards.length < answer) {
    this.cards.push(new Card());
    }
  },
  testDeck: function() {
    console.log("Our deck has " + this.cards.length + " cards in it");
  }
};

// Now, let's write a function for the actual guessing game
var game = {
  init: function(){
    $("#game-input").on("submit", function() {
  var message;
      var nextGame = "Now that you've won, guess how many hearts are in the deck:";
      var heartHTML = '<form id="heart-input"><input type="text" id="heartGuess"/><input type="submit" /></form>';
  var tallyMessage = "Total guesses: " + guessTally;
  var guess = $("#guess").val();

// Logic for what to do while guessing
   if (guess == cardDeck.cards.length && guessTally === 1) {
    message = "Good job, you got it! It took you " + guessTally + " guess!";
    $("#heartGame").html(nextGame);
    $("#heart-placeholder").html(heartHTML);

  } else if (guess == cardDeck.cards.length && guessTally > 1) {
    message = "Good job, you got it! It took you " + guessTally + " guesses.";
    $("#heartGame").html(nextGame);
    $("#heart-placeholder").html(heartHTML);

  } else if (guess > cardDeck.cards.length) {
    message = "You guessed " + guess + ". Sorry, your guess was too high, you'll have to try again.";
    guessTally++;

  } else if (guess < cardDeck.cards.length) {
    message = "You guessed " + guess + ". Whoops, looks like you guessed low";
    guessTally++;

  } else if (isNaN(guess)) {
    message = "Please guess using a number.";
  }
  $("#tally").html(tallyMessage);    
  $("#result").html(message);
  return false;
    });
  }
};

//Count for the individual suits
var suitCount = {
  hearts:   0,  
  spades:   0,
  clubs:    0,
  diamonds: 0,
  count:    function(){
    i = 0;
    for (i; i < cardDeck.cards.length; i++) {
      if (cardDeck.cards[i].suit === "H") {
        this.hearts++;
      } else if (cardDeck.cards[i].suit === "S") {
        this.spades++;         
      } else if (cardDeck.cards[i].suit === "C") {
        this.clubs++;
      } else if (cardDeck.cards[i].suit === "D") {
        this.diamonds++;
      }
    }
  }  
};

//Logic for Heart count game
var suitGame = {
  init: function(){
    $("#heart-input").on("submit", function() {
  var heartMessage;
  var heartGuess = $("#heartGuess").val();
  var diff = suitCount.hearts - heartGuess;

 //Logic for guessing heart count
  if (diff < 0) {
    heartMessage = ("Too low");
  } else if (diff > 0) {
    heartMessage = ("Too high");
  } else if (diff === 0) {
    heartMessage = ("Got it");
  }

    $("#heartResult").html(heartMessage);
    return false;
    });
  }
};

cardDeck.popDeck();
suitCount.count();
game.init();
suitGame.init();

请原谅我的冗长，只是想彻底！

Answer 1

您似乎使用===而不是==。我之前没有看过===，而= =表示等于？ =用于设置值，而==检查两个值是否相等，据我所知，===没有用。

如何创建一个正常运行的条件提交框

1 个答案: