Question

我正在尝试在网页中创建一个简单的“猜数字游戏”，其中用户是想到数字的人，计算机是猜测用户正在思考的数字（不需要用户输入）。我需要为用户创建三个按钮来响应计算机的猜测：猜猜更高，猜猜更低，正确。我不知道如何使GuessHigher（）和GuessLower（）函数工作。这是java脚本代码：

function getFieldValue(target) {
    var elm = document.getElementById(target);
    var val = parseInt(elm.value);
    return val;
}

function getCompGuess() {
    var upper = getFieldValue("UPPER");
    var lower = getFieldValue("LOWER");

    return (parseInt((upper + lower) / 2))
}


/* User starts game. */
function play() {
    var remaining = getFieldValue("REMAINING");

    var compGuess = getCompGuess()
    var compElm = document.getElementById("COMP_GUESS")

    compElm.innerHTML = compGuess
}

function GuessHigher() {

}

function GuessLower() {

}

function correct() {
    alert ("YAY! Thank you for playing");   
}

以下是HTML代码：

<html>

    <head>
       <meta charset="UTF-8">
       <script src="lab1a.js"></script>
    </head> 
<body>
Guess a number game: <br/> <br/>

Upper Bound: <input id="UPPER"  type="text"></input> <br/>
Lower Bound: <input id="LOWER" type="text"></input> <br/>
Guesses Remaining: <input id="REMAINING" type="text"></input> <br/>

<button onclick="play()">Play!</button>  <br/>

Computer's Guess: <span id="COMP_GUESS"></span> <br/>

<button onclick="GuessHigher()">Guess Higher</button>
<button onclick="GuessHigher()">Guess Lower</button>
<button onclick="correct()">Correct!!!</button>


</body>
</html>

Answer 1

GUESS HIGHER：它可能不是很优雅，但是您可以尝试将最后猜测的数字和ADD添加到它上面的任何数字，而不是UPPER BOUND-LAST GUESS。例如，假设我们有一个UPPER = 10且LOWER = 0

的数字行

0 | ---------- | 10

我们猜5是电脑。现在，如果我们想要更高的猜测我们将需要一个占位符用于我们的旧猜测（5），并且需要减少猜测范围，所以我们不会超过我们的上限。

0 | ----＆lt; 5＆gt; ---- | 10，想象一下只放大上半部5＆gt; --- 10：

5个---- | 10。这个新范围我称为availableGuessingRange，它等于10-5或5。

我们现在只让计算机使用Math.random选择1到5之间的新数字。

让我们说它选择3.现在我们可以通过添加它（即5 + 3 = 8）将该数字带回我们的旧猜测，现在8是计算机NEW GUESS。

我认为它可能是这样的：

var lastGuess=document.getElementById("COMP_GUESS").value
var avaliableGuessingRange = upper-lastGuess;
return Math.floor(Math.random()*avaliableGuessingRange)+lastGuess

对于GUESS LOWER：我认为这将是一个类似的设置，除了它使用lastGuess-lower创建新范围，你将从最后一次猜测中减去新的猜测以向下移动数字线。

由于范围可变，我编写代码的方式目前无效，但我认为逻辑应该有效。

Answer 2

我制作了这个小提琴，并且稍微重构了代码tini，内联侦听器被认为是不好的做法。你应该考虑使用一些linter，因为有一些语法错误，主要是你没有终止你的语句; ＆lt; ---看，这实际上是错字，我意外地终止了这句话;而不是。

(function() {
  //getting references to buttons
  var high = document.getElementById('high');
  var lower = document.getElementById('lower');
  var btn_correct = document.getElementById('correct');

  //setting listeners
  high.addEventListener('click', GuessHigher);
  lower.addEventListener('click', GuessLower);
  btn_correct.addEventListener("click", correct);

  function getFieldValue(target) {
    var elm = document.getElementById(target);
    return parseInt(elm.value);
  }

  function getCompGuess() {
    var upper = getFieldValue("UPPER");
    var lower = getFieldValue("LOWER");

    return (parseInt((upper + lower) / 2));
  }


  /* User starts game. */
  function play() {
    var remaining = getFieldValue("REMAINING");

    var compGuess = getCompGuess();
    var compElm = document.getElementById("COMP_GUESS");

    compElm.innerHTML = compGuess;
  }

  function GuessHigher() {
    console.log('higher');
  }

  function GuessLower() {
    console.log('lower');
  }

  function correct() {
    console.log("YAY! Thank you for playing");
  }
}());

<body>
  Guess a number game:
  <br/>
  <br/>Upper Bound:
  <input id="UPPER" type="text">
  <br/>Lower Bound:
  <input id="LOWER" type="text">
  <br/>Guesses Remaining:
  <input id="REMAINING" type="text">
  <br/>

  <button id='play'>Play!</button>
  <br/>Computer's Guess: <span id="COMP_GUESS"></span>
  <br/>

  <button id='high'>Guess Higher</button>
  <button id='lower'>Guess Lower</button>
  <button id='correct'>Correct!!!</button>

</body>

Answer 3

尝试使用下面的代码

 Math.floor(Math.random()*1000) // return a number between 0 and 1000

生成随机数并使用if else语句高，低，正确

计算机猜猜游戏JavaScript

3 个答案: