尝试将字母推入数组以显示在页面上

时间:2018-09-12 23:29:58

标签: javascript

var secretWord = [];
var underScoreWord = [];
var wins = 0;
var guessesRemaining = 10;
var alreadyGuessed = [];
var wordLetter = true;

//Assign HTML elements to variables
var cityText = document.getElementById("city-text");
var winsNum = document.getElementById("wins-num");
var guessesNum = document.getElementById("guesses-num")
var lettersGuessed = document.getElementById("letters-guessed")


//Array of cities
var city = ["Paris", "Wellington", "Hanoi", "Perth", "Marseille", "London", "Ottawa", "Zurich", "Boston", "Tokyo", "Detroit"];

//console.log(city);

//Pick random word from the team array and push the result to an empty array. 
function pickRandomCity() {
    var randomCity = city[Math.floor(Math.random() * city.length)];
    secretWord = randomCity.split('');
    return randomCity;
}

var cityPicked = pickRandomCity();




//Get length of secretWord and push as underscores to am empty array
for (var i = 0; i < cityPicked.length; i++) {
    underScoreWord.push("_");

}

console.log('secretWord : ' + secretWord);
// console.log('underScoreWord : ' + underScoreWord);
// console.log('------------------');
// console.log('cityPicked : ' + cityPicked);



//Check for letters
//Listen for key press and check to see if its a match
document.onkeyup = function letterCheck(event) {
    var userGuess = event.key;

    for (var j = 0; j < secretWord.length; j++) {
        if (userGuess.toUpperCase() === secretWord[j].toUpperCase()) {
            wordLetter = true;
            underScoreWord[j] = userGuess;
            guessesRemaining--;
        }

        else if (!wordLetter) {
            alreadyGuessed.push();

            // guessesRemaining--;
        }
    }


    console.log("Already guessed: " + alreadyGuessed);

    lettersGuessed.textContent = ("Letters already guessed: " + alreadyGuessed);


    // Write to page
    cityText.textContent = underScoreWord.join(" ");
    winsNum.textContent = ("Wins: " + wins);
    guessesNum.textContent = ("Guesses Remaining: " + guessesRemaining);





    console.log(underScoreWord);




}

有人知道如何将userGuess推入一个空数组然后显示吗?如您所见,我设法将userGuess推送到已经被Guessed的数组,但是它一次只在页面上显示一个字符。

最终目标是让hasGuessed数组像这样显示-LettersGuiseed:一个很好的

3 个答案:

答案 0 :(得分:0)

在事件监听器的elseif语句中尝试alreadyGuessed.push(userGuess);

编辑: 根据@foxinatardis的建议,您需要更改循环内的wordLetter修改和检查方式:

    if (userGuess.toUpperCase() === secretWord[j].toUpperCase()) {
        wordLetter = true;
        underScoreWord[j] = userGuess;
        guessesRemaining--;
    } else {
        wordLetter = false;
        alreadyGuessed.push(userGuess);

        // guessesRemaining--;
    }

除非进行了其他更改,否则您实际上不再需要wordLetter变量,除非您将其用于其他用途。

答案 1 :(得分:0)

看起来wordLetter是一个初始化为true的全局变量。而且看起来它永远不会设置为false,所以由于alreadyGuessed.push(userGuess);始终为false,因此永远不会到达您对!wordLetter的呼叫。

答案 2 :(得分:0)

您可以存储对象按下了哪些键,并在每次键入事件开始时检查用户是否按下了该键。
我也将for循环切换为map

 var guessedLetters = {};
 document.onkeyup = function letterCheck(event) {
    var userGuess = event.key;
    if (!guessedLetters[userGuess.toUpperCase()]) { // check if user pressed this key
        alreadyGuessed.push(userGuess.toUpperCase());
        guessedLetters[userGuess.toUpperCase()] = true;
        guessesRemaining--;
    } else { // this key has been pressed before, dont do anything
        return;
    }
    secretWord.map((n, i) => {
        if (userGuess.toUpperCase() === n.toUpperCase()) {
            underScoreWord[i] = n;
        }
    })
    console.log("Already guessed: " + alreadyGuessed);
    lettersGuessed.textContent = ("Letters already guessed: " + alreadyGuessed);
    // Write to page
    cityText.textContent = underScoreWord.join(" ");
    winsNum.textContent = ("Wins: " + wins);
    guessesNum.textContent = ("Guesses Remaining: " + guessesRemaining);
    console.log(underScoreWord);
}