无法使用动画键入游戏

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

实际上，您当前的解决方案存在一些问题。首先，您在5秒间隔后首次更改word.innerHTML，因此它将立即被GAME OVER替换，因此在相差几毫秒的情况下，您将无法看到所需的输出。innerHTML然后，您将用于您的条件，其中innerHTML仅用于包含其中某些内容的HTML元素（获得开始和结束标记），而对于获取输入值，您应该使用input.value。input.innerHTML因此，为了使您的代码正常工作，您应该在执行setInterval之前首先替换innerHTML。然后，在调用间隔（如果条件满足）后，应递增&nbsp;i&nbsp;值，然后以递归方式再次调用间隔。所以你的最终代码应该是这样的：var btn = document.querySelector('#btn');btn.addEventListener("click", myMove);function myMove() {&nbsp; var word = document.querySelector('#word');&nbsp; var input = document.querySelector('#written');&nbsp; var words = ['xylophone', 'cat', 'bat', 'chollima'];&nbsp; var i = 0;&nbsp; word.innerHTML = words[i];&nbsp; var id = setInterval(frame, 5000);&nbsp; function frame() {&nbsp; &nbsp; if (input.value == word.innerHTML) {&nbsp; &nbsp; &nbsp; clearInterval(id);&nbsp; &nbsp; &nbsp; i = (i < 3) ? (i + 1) : 0;&nbsp; &nbsp; &nbsp; word.innerHTML = words[i];&nbsp; &nbsp; &nbsp; id = setInterval(frame, 5000)&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; word.innerHTML = 'GAME OVER';&nbsp; &nbsp; }&nbsp; }}<div id="heading">TYPING GAME</div><label>&nbsp; <div id="word"></div>&nbsp; <br>&nbsp; <input type="text" id="written"></label><button id="btn">START</button>

Answer 2

不要使用 ，而是使用 input.value：input.innerHTMLvar btn= document.querySelector('#btn');btn.addEventListener("click", myMove);function myMove() {&nbsp; &nbsp; var word = document.querySelector('#word');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var input=document.querySelector('#written');&nbsp; &nbsp; var words=['xylophone', 'cat', 'bat', 'chollima'];&nbsp; &nbsp; var i=0;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var id = setInterval(frame, 5000);&nbsp; &nbsp; function frame() {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; word.innerHTML=words[i];&nbsp; &nbsp; &nbsp; &nbsp; i = (i < 3) ?( i+1) : 0;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; if (input.value == word.innerHTML) {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; clearInterval(id);&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; word.innerHTML='GAME OVER';&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }<div id="heading">TYPING GAME</div>&nbsp; &nbsp; &nbsp; &nbsp;<label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div id="word"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="text" id="written">&nbsp; &nbsp; &nbsp; &nbsp;</label>&nbsp; &nbsp; &nbsp; &nbsp;<button id="btn">START</button>&nbsp;</body>