Question

我正在编写一个简单的Hangman游戏。从wordBank中选择一个随机单词，然后wordLength确定下划线的占位符字符串。例如，'dog'将显示为'_ _ _'。

我希望这些字母在按下时替换下划线，但出于某种原因，当发生这种情况时，会添加额外的下划线。因此，如果我在键盘上按“d”，占位符将从“_ _ _”变为“d _ _”。然后，当我按'o'时，单词转到'do _ _'。这个额外的下划线是否有理由？

// Game Variables

var remainingGuesses = 12;
var wins = 0;
var losses = 0;
var wordBank = ['caat', 'dog', 'tiger'];

// Select Random Word from Array

var word = wordBank[Math.floor(Math.random(2) * wordBank.length)];
var wordLength = word.length;


// Create Placeholders Based on Word Length

var placeholders = new Array(wordLength + 1).join( '_ ' );

// Captures Key Clicks

document.onkeyup = function(event) {
var userGuess = String.fromCharCode(event.keyCode).toLowerCase();


// Check Word with Letter

    if (word.indexOf(userGuess) > -1) {
        alert('correct!');
        placeholders = placeholders.replace(placeholders[(word.indexOf(userGuess))], userGuess);
}
else {
    alert('wrong');
    remainingGuesses--;
}

console.log(placeholders);
console.log(word);
}

Answer 1

想想你在这里做了什么，

1）创建一个名为placeholders的字符串，由下划线和空格组成 2）检查单词中给定索引处是否存在用户选择 3）根据单词中该字母的索引替换placeholders字符串的一部分。

错误的假设是word字符串中的字符与placeholder字符串中的字符匹配。事实上，它们没有两倍的字符，因此指数将开始不匹配。您将获得第一个字母的预期行为，然后不会是之后的每个字母。

例如：

word = "dog" // 3 characters
placeholders = "_ _ _ " // 6 characters

更好的方法是将逻辑与显示分开。一种方法（没有完全面向对象）将是一个像你一样的字符串，但也有一个相应的显示值数组，你初始化为false

word = "dog"
display = [false, false, false]

// and this is what you return to your user:

function makeDisplayString (word, display) {
  display.map(function(el, idx) { return el ? word[idx] : "_" }).join(" ");
}

makeDisplayString("dog", [false, true, false])
// => "_ o _"

如果用户做出选择，则将false值替换为true并运行相同的函数来更新显示。

Javascript：从keyCode事件替换String中的字符

1 个答案: