匹配或同步两个数组以在 JavaScript 中制作拼写游戏
Posted
技术标签:
【中文标题】匹配或同步两个数组以在 JavaScript 中制作拼写游戏【英文标题】：Match or synchronize two arrays to make a spelling game in JavaScript 【发布时间】：2022-01-22 05:43:55 【问题描述】：我是编码新手，目前正在学习使用 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)];
成为答案的关键。
有什么建议吗？
【问题讨论】：
我不清楚你的意思。您在显示的代码中的哪个位置尝试使用音频文件？ “他们无法同步”是什么意思？您能否澄清您在测试显示的代码时观察到的具体问题？ 抱歉，我刚刚编辑了我的问题。现在够清楚了吗？ 你要不要随机化？ 是的，我希望它选择随机音频。 【参考方案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)
因此，与其手动维护多个值数组（它们需要相同的长度、相同的顺序等），您可以只拥有 一个 对象数组，其中相关值是保持在一起。
【讨论】：
我从没想过使用那些更清晰的方法..谢谢！尽管如此，仍然试图掌握这些新事物。另一个快速的问题：如何从对象数组中调用声音？是..words.sound？
@Kate: words 是一个数组，它没有 sound 属性。但是此特定数组中的任何给定 元素确实 具有sound 属性。在此示例中，randomWord 是对数组中元素的引用。所以randomWord.word 是那个元素的“词”，randomWord.sound 是那个元素的“声音”。
好的，知道了。但是它是否需要其他东西才能播放音频？这是我之前提到的 getWordBtn：getwordbtn.addEventListener("click", function() randomWord.sound; ) 我错过了什么吗？
@Kate：如何真正播放音频听起来完全是一个单独的问题，并不真正属于上述问题的范围。问题特别是关于为什么代码从两个数组中选择不匹配的元素。您可以尝试在 Google 上搜索如何在 JavaScript 中播放音频文件。以上是关于匹配或同步两个数组以在 JavaScript 中制作拼写游戏的主要内容，如果未能解决你的问题，请参考以下文章
Powershell 问题 - 寻找最快的方法来遍历 500k 个对象以在另一个 500k 对象数组中寻找匹配项
比较 2 个对象以在 javascript 中创建一个新的对象数组
如何使用 Node.js/JavaScript 合并两个按键值匹配的数组值