javascript - 在学校里尝试创造经典的猜数字游戏。我做错了什么？

Question

这段代码应该是一个猜数字的游戏。目的是让 JS 显示一个警告框，要求用户猜一个数字。当他们猜到一个数字时，代码应该返回他们猜测的值，直到他们猜对为止。

当我运行播放键时，会弹出一个警告框，并显示:

"Enter a guess between 1 and 100"

在那之后，即使我输入了全部 100 个数字，该框也会永远重新加载。

这是我所拥有的:

const game = {
  title: 'Guess the Number!',
  biggestNum: 100,
  smallestNum: 1,
  playerChoice: null,
  secretNum: null,
  //1. Add a prevGuesses property to the game object initialized to an empty array.
  prevGuesses: [],
  //2. Add a getGuess method to game that prompts the player to enter a guess with a message formatted as: Enter a guess between [smallestNum] and [biggestNum]: Hint- Use a template literal for the prompt message.

  //3. Ensure that the getGuess method returns a value that is:
  //-is a number, not a string
  // -is between smallestNum and biggestNum, inclusive
  // -Hints: This is a great use case for a while loop. parseInt returns NaN if the string cannot be parsed into a number
  getGuess: function() {
    while (this.playerChoice !== this.secretNum) {
   var playerChoice = prompt(`Enter a guess between ${this.smallestNum} and ${this.biggestNum}: `);
    var wholeNumber = parseInt(this.playerChoice);
    if (this.wholeNumber > this.biggestNum) {
      var wholeNumber = 100;
    } 
    if (this.wholeNumber < this.smallestNum) {
     var wholeNumber = 1;
    }
    if (typeof this.wholeNumber !== "number")) {
      var wholeNumber = Math.floor(Math.random() * 100)
    }
   } 
  },
//4. From within the play method, invoke the getGuess method and add the new guess to the prevGuesses array
    play: function() {
    this.secretNum = Math.floor(Math.random() * 
      (this.biggestNum - this.smallestNum + 1)) + this.smallestNum;
      game.getGuess();
     this.prevGuesses.push(this.wholeNumber);
        //6 the play method should end(return) when the guess matches the secretNum
      if (typeof(this.wholeNumber) === "number" && this.wholeNumber !== this.secretNum) {
        game.render();
      }
   
      
  },
  // 5. Add a render method to game that play will call after a guess has been made that alerts:
// -if the secret has been guessed: "Congrats! you guessed the number in [x] guesses!"

// otherwise

// -"Your guess is too [high|low]"
// "Previous guesses: x, x, x, x"

// Hints: render wont be able to access any of play's local variables, e.g., guess, so be sure to pass render any arguments as needed. Template literals not only have interpolation, they honor whitespace - including line breaks! The list of previous guesses can be generated using the array join method.
    render: function() {
      if (this.wholeNumber === secretNum) {
          alert(`Congrats! You guessed the number in ${game.prevGuesses.length} guesses!
          Previous guesses: ${prevGuesses}`);
      } else if (this.wholeNumber > this.secretNum) {
          alert(`Your guess is too high!
          Previous guesses: ${this.prevGuesses}`);
          game.guess();
      } else if (this.wholeNumber < this.secretNum) {
          alert(`Your guess is too low!
          Previous guesses: ${this.prevGuesses}`);
          game.guess();
      }
    }
  
};


game.play();
/*
Allow the player to continually be prompted to enter their guess of what the secret number is until they guess correctly
If the player has an incorrect guess, display an alert message that informs the player:

Whether their guess is too high, or too low, and...
A list of all the previously guessed numbers (without showing the square brackets of an array)
If the player has guessed the secret number:

Display an alert message that congrats the player and informs them of how many guesses they took
End the game play*/

/*


Bonus: when play is run, immediately prompt the player to enter the smallest and biggest numbers instead of having them pre-set*/

我所做的研究:我用谷歌搜索了尽可能多的页面和关于函数、播放对象、数组内循环的 youtube 教程，以及我能想到的与本文中的对象类型相关的任何内容代码。

评论文本来自作业。在我处理它的同时，我将注释放在我正在处理的代码旁边。

我真的才开始编码几周，感谢任何反馈。

这是我得到的原始代码:

const game = {
  title: 'Guess the Number!',
  biggestNum: 100,
  smallestNum: 1,
  secretNum: null,
  play: function() {
    this.secretNum = Math.floor(Math.random() * 
      (this.biggestNum - this.smallestNum + 1)) + this.smallestNum;
  }
};

Answer 1

您的代码有几个问题:

• this.wholeNumber 永远不会接收到值，因此这将不起作用。此外，本练习的目的似乎不是拥有这样的属性(property)。您不必将用户的猜测存储在新属性 this.wholeNumber 中。见下一点:
• getGuess 的目标是返回 一个数字，但是没有return 语句。您似乎想将数字存储在属性中，但这不是分配。
• 与此相关:在 play 中，您应该从对 getGuess 的调用中获取猜测的数字作为返回值
• getGuess 的目标不是等待用户猜对，只是让用户做出有效的猜测(在范围内而不是NaN )。所以你的 while 循环条件不正确。
• getGuess 不验证 parseInt 是否返回了 NaN。请注意，NaN 的类型是“number”，因此最后一个 if 的条件永远不会为真。您应该使用 isNaN 函数，或者更好的 Number.isNaN。
• play 应该总是调用render，不仅是在猜测正确的时候。
• render 应该通过传递一个参数(猜测的数字)来调用，因此 render 方法应该为它定义一个参数。
• render 方法应该不调用game.guess()。那不是它的工作。
• play 方法不应将新值放入 secret 中，否则用户将对付移动目标:) secret应该在主程序中设置一次
• 主程序——您目前只有game.play()——应该有循环逻辑，您曾试图在别处实现。您应该在此处重复调用 game.play() 直到猜对为止。您还应在此处显示有关猜测值过低、过高等的警告消息。
• 没有明确的说明主程序应该从哪里得到最新的猜测。它可以从 game.prevGuesses 中获取，但我建议 play 方法也返回最新的猜测，就像 getGuess 应该可以。
• 注意主程序注释中给出的其他说明。例如，当用户猜对时，您应该在他们猜对了多少次后提醒。想一想哪个属性可以帮助您了解此尝试次数。提示:长度。

我不会在这里提供更正后的代码，因为我认为有了以上几点，您就有了足够的 Material 来圆满结束这个练习。快乐编码。