无法使用动画键入游戏

Question

我试图构建一个游戏，但我无法正确设置Interval。当我点击开始游戏按钮时，这个词没有打印在屏幕上，5秒后它直接显示GAME OVER。var btn= document.querySelector('#btn');btn.addEventListener("click", myMove);function myMove() {    var word = document.querySelector('#word');        var input=document.querySelector('#written');    var words=['xylophone', 'cat', 'bat', 'chollima'];    var i=0;        var id = setInterval(frame, 5000);    function frame() {                word.innerHTML=words[i];        i = (i < 3) ?( i+1) : 0;              if (input.innerHTML== word.innerHTML) {                clearInterval(id);      } else {        word.innerHTML='GAME OVER';      }    }  }<div id="heading">TYPING GAME</div>       <label>           <div id="word"></div>           <br>           <input type="text" id="written">       </label>       <button id="btn">START</button> </body>

Answer 1

实际上，您当前的解决方案存在一些问题。

1. 首先，您在5秒间隔后首次更改word.innerHTML，因此它将立即被GAME OVER替换，因此在相差几毫秒的情况下，您将无法看到所需的输出。innerHTML

2. 然后，您将用于您的条件，其中innerHTML仅用于包含其中某些内容的HTML元素（获得开始和结束标记），而对于获取输入值，您应该使用input.value。input.innerHTML

因此，为了使您的代码正常工作，您应该在执行setInterval之前首先替换innerHTML。然后，在调用间隔（如果条件满足）后，应递增 i 值，然后以递归方式再次调用间隔。

所以你的最终代码应该是这样的：

var btn = document.querySelector('#btn');

btn.addEventListener("click", myMove);

function myMove() {

  var word = document.querySelector('#word');

  var input = document.querySelector('#written');

  var words = ['xylophone', 'cat', 'bat', 'chollima'];

  var i = 0;

  word.innerHTML = words[i];

  var id = setInterval(frame, 5000);

  function frame() {

    if (input.value == word.innerHTML) {

      clearInterval(id);

      i = (i < 3) ? (i + 1) : 0;

      word.innerHTML = words[i];

      id = setInterval(frame, 5000)

    } else {

      word.innerHTML = 'GAME OVER';

    }

  }

}

<div id="heading">TYPING GAME</div>

<label>

  <div id="word"></div>

  <br>

  <input type="text" id="written">

</label>

<button id="btn">START</button>

Answer 2

不要使用 ，而是使用 input.value：input.innerHTML

var btn= document.querySelector('#btn');

btn.addEventListener("click", myMove);

function myMove() {

    var word = document.querySelector('#word');

    

    var input=document.querySelector('#written');

    var words=['xylophone', 'cat', 'bat', 'chollima'];

    var i=0;

    

    var id = setInterval(frame, 5000);

    function frame() {

        

        word.innerHTML=words[i];

        i = (i < 3) ?( i+1) : 0;

        

      if (input.value == word.innerHTML) {

        

        clearInterval(id);

      } else {

        word.innerHTML='GAME OVER';

      }

    }

  }

<div id="heading">TYPING GAME</div>

       <label>

           <div id="word"></div>

           <br>

           <input type="text" id="written">

       </label>

       <button id="btn">START</button>

 </body>