匹配或同步两个数组以在 JavaScript 中制作拼写游戏

Question

我是编码新手，目前正在学习使用 Javascript 制作拼写游戏。我正在尝试制作一个就像 Youtube 上的 Coding With Kenny's 一样。这是他的代码和我的一些编辑：

<body>
    <h1 id="heading">Spelling App</h1>
    <div id="container">
      <input id="input">
        <div id="buttons">
          <button id="checkButton">Check</button>
          <button id="getWordButton">get word</button>
          <button id="resetButton">next word</button>
        </div>
        <p id="correct"></p>
        <p id="incorrect"></p>
    </div>
    <script>
      var words = ["easy","apple","idea","key","awesome",
                  "spelling","eligible","cat","dog","firefly"];
      var randomWord = words[Math.floor(Math.random()*words.length)];
      var guessbtn = document.getElementById("checkButton");
      var getwordbtn = document.getElementById("getWordButton");
      var resetbtn = document.getElementById("resetButton");

      var correct = document.getElementById("correct");
      var incorrect = document.getElementById("incorrect");

      resetbtn.addEventListener("click", function() {
        location.reload();
      })

      var speech = new SpeechSynthesisUtterance();

      guessbtn.addEventListener("click", function() {
        var input = document.getElementById("input").value;

        if(input==randomWord) {
          correct.innerHTML = "correct!"
        }
        else if (input!==randomWord) {
          incorrect.innerHTML = "incorrect!"
        }
      })

      getwordbtn.addEventListener("click", function() {
        var input = document.getElementById("input").value;
        speech.text = randomWord;
        speechSynthesis.speak(speech);
      })
    </script>
  </body>

问题是我想为 getWordButton 使用外部音频文件而不是 speech.text。我尝试制作 2 个数组：1 个用于音频文件，另一个用于答案，但它不起作用，因为它们在随机选择时无法同步。这是我尝试添加的数组：

var Sounds= ["easy.mp3","apple.mp3","idea.mp3","key.mp3","awesome.mp3",
                  "spelling.mp3","eligible.mp3","cat.mp3","dog.mp3","firefly.mp3"];
oldSounds = [];
var index = Math.floor(Math.random() * (sounds.length)),
    thisSound = sounds[index];

我希望在点击“获取单词”按钮时播放音频（要拼的单词），另一个数组：

var words = ["easy","apple","idea","key","awesome",
                  "spelling","eligible","cat","dog","firefly"];
      var randomWord = words[Math.floor(Math.random()*words.length)];

作为答案。

有什么建议吗？

Answer 1

因为您是从两个数组中随机选择的。在两个数组中获得相同索引的随机非零机会，但几率非常低。

如果你能保证数组总是相同的长度和相同的顺序，只需选择一个随机值并在两个数组中使用它：

var index = Math.floor(Math.random() * sounds.length);
var randomWord = words[index];
var randomSound = sounds[index];

理想的下一步是完全不使用两个数组，而是使用一个对象数组。例如：

var words = [
  { word: 'easy', sound: 'easy.mp3' },
  { word: 'apple', sound: 'apple.mp3' },
  // etc.
];

然后从该数组中随机选择一个对象：

var randomWord = words[Math.floor(Math.random() * words.length)];

并且您可以使用该对象的 .word 和 .sound 属性。例如比较用户输入时：

if (input == randomWord.word)

因此，与其手动维护多个值数组（它们需要具有相同的长度、相同的顺序等），不如让一个个对象数组相关值放在一起。

匹配或同步两个数组以在 JavaScript 中制作拼写游戏

Match or synchronize two arrays to make a spelling game in JavaScript

javascript

arrays

random