Question

<script>
    
    
    //when user clicks start button this function ensures all fields //are set to 0 and it
    //sets the timer for the game (90seconds) and the second timer to //call showWord() every four seconds to display a new word
   
function startGame() {
    numBadWordsField.innerHTML = '';
    numGoodWordsField.innerHTML = '';
    numWordsRight = 0;
    numWordsWrong = 0;
    correctWords = [];
    showWord();
    gameTimer = setInterval(gameTime, 1000);
    timedWordDisplay = setInterval(showWord, 4000);
    }
    
    
    
    //this function is set to repeat every four seconds unless the user //types the word
    //correctly in which case code in the checkWord() function resets setInterval then and a new word appears 
    
    function showWord() {
    let randomNum = Math.floor(Math.random()*wordsLevelOne.length);
    currentWord = wordsLevelOne[randomNum];
        //i put all correctly typed words in an array to avoid them being repeated
        //if the random word has been typed correctly and is in the array then i tell the
        //program to repeat the function until a new word is found. 
    if (correctWords.includes(currentWord)) {
        showWord();
    } else {
        wordDisplayBox.innerHTML = currentWord;
        setInterval(changeBar, 500);
        answerBox.focus();
    }
   
}
   
    //this function is called oninput as user types in the word. it works perfectly (i think it does anyways) 
    //however i cannot figure out how to give instructions in the event the user does not type the
    //word correctly before the four seconds are up and the setInterval repeats. I would like to 
    //in that case increment the words wrong score and reset the fields to be ready for the next 
    //word to be displayed
    function checkWord() {
    let currentWordLen = answerBox.value.length;
    if (wordDisplayBox.innerHTML === answerBox.value) {
        clearInterval(timedWordDisplay);
        numWordsRight++;
        correctWords.push(currentWord);
        numGoodWordsField.innerHTML = numWordsRight;
        answerBox.value = '';
        answerBox.focus();
        wordDisplayBox.innerHTML = '';
        showWord();
        timedWordDisplay = setInterval(showWord, 4000);
    } else if (answerBox.value === currentWord.substring(0, currentWordLen)) {
             answerBox.style.borderColor = 'green';
    } else  {
             answerBox.style.borderColor = 'red';
    } 
}
 
    
    //different topic than above but i also researched how to make my progress bar fill slowly over the course
    //of the four seconds. i have written the following function identically to that on 
    //w3schools and other code yet it does not work. 
        //Any ideas?
   function changeBar() {
   let proBar = document.querySelector('#progressBar');
    var width = 1;
   var id = setInterval(frame, 10);
    function frame() {
    if (width >= 100) {
        clearInterval(id);
    } else {
        width++;
        proBar.style.width =  width + '%';
    }
    }
    }
    
    </script>

我正在研究的项目是一个初学者级的快速打字游戏，它会在不到四秒钟的时间内显示一个不同的单词供用户输入。我有一个setInterval，每四秒钟显示一个不同的单词，除非用户正确输入了该单词然后计时器开始计时。我感到很困惑的是如何做到这一点，以便如果在间隔重置之前（四秒结束时）未输入正确的答案，程序将知道增加“错误答案”分数并重置输入框对于下一个单词，就像正确键入时一样。我已经附上了我认为可能相关的代码部分。如果有人有任何建议，请告诉我。我渴望学习。 **我还不熟悉JQuery。请描述使用香草JS的任何建议

Answer 1

此功能应在showWord函数中实现。

showWord是在时间到了4秒钟后执行的。执行此功能意味着用户未能及时输入单词。

我会做这样的事情：

function showWord() {
  // At this point, the user has lost. We perform the according operations
  numWordsWrong++;
  answerBox.value = '';
  // etc.

  // What follows is the rest of the function you've already implemented
  let randomNum = Math.floor(Math.random()*wordsLevelOne.length);
  // etc.
}

Answer 2

要回答有关进度条的问题，您设置了一个间隔，每500毫秒运行一次changeBar，这将导致进度条每半秒重置一次。如果要在启动进度栏之前延迟，请使用setTimeout。

此外，您正在运行进度栏，以每10毫秒移动1％，这将导致进度条在1秒钟内完成。如果您希望栏在4秒内完成，请将ID间隔设置为每40毫秒运行一次。

没有看到您的CSS和html，我必须假设您在代码中使用了正确的ID名称，但是如果什么也没有发生，那也可能是原因。

我查看了您引用的W3Shools代码，并尝试复制您要执行的操作并使它起作用：

<html>
<head>
<style>
  #myProgress {
  width: 100%;
  background-color: #ddd;
  }

  #myBar {
    width: 1%;
    height: 30px;
    background-color: #4CAF50;
  }
</style>
</head>
<body>
<div id="myProgress">
  <div id="myBar"></div>
</div>
</body>
<script>
  function changeBar() {
   let proBar = document.querySelector('#myBar');
    var width = 1;
   var id = setInterval(frame, 40);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        proBar.style.width =  width + '%';
      }
    }
  }
  setTimeout(changeBar, 100);
</script>
</html>

Answer 3

一种解决方案是创建一个新函数（例如：showWordBecauseTimeout），然后在您的setInterval中而不是showWord中调用它。然后在showWord fct中而不是在startGame fct中调用该函数。

所以新代码将类似于：

    function showWord() {
        clearInterval(timedWordDisplay);
        timedWordDisplay = setInterval(showWordBecauseTimeout, 4000);
        // you also need to move the cleaning of the input in the showWord fct
        // ...
    }

    function showWordBecauseTimeout() {
        numWordsWrong++;
        showWord()
    }

希望对您有所帮助：）。

if / else和setInterval

3 个答案: