时间戳

首页 > 解决方案 > 琐事猜谜游戏（删除字符串数组中的空格键）

javascript - 琐事猜谜游戏（删除字符串数组中的空格键）

问题描述

我是一个 javascript 菜鸟，我开始了一个 Bootcamp 来提高我的知识。我的任务是创建一个刽子手风格的猜谜游戏。我几乎从 GitHub 上提取了一个模板 repo，并以 Bob Ross 为主题。我遇到的问题是要猜测的单词数组都包含一个空格。

( CADMIUM YELLOW, PHTHALO GREEN, PHTHALO BLUE, VAN DYKE BROWN, PRUSSIAN BLUE, TITANUM WHITE, YELLOW OCHRE, ALIZIRIN CRIMSON)

_这个空间被认为是一个值，就像字母一样被分配一个。如果有人能帮我解决，我将不胜感激。 

// color list
var words = ["CADMIUM YELLOW", "PHTHALO GREEN", "PHTHALO BLUE", "VAN DYKE BROWN", "PRUSSIAN BLUE", "TITANUM WHITE", "YELLOW OCHRE", "ALIZIRIN CRIMSON"];

var maxNumGuesses = 8; 
var guessedLetters = []; 
var ansWordArr = []; 
var numGuessesRemaining = 0; 
var numWins = 0; 
var numLosses = 0; 
var isFinished = false; 
var ansWord; // word being played


function setup() {
    //random word from words list
    ansWord = words[Math.floor(Math.random() * words.length)];

    ansWordArr = [];


    for (var i = 0; i < ansWord.length; i++) {
        ansWordArr[i] = "_";
    }


    numGuessesRemaining = maxNumGuesses;
    guessedLetters = [];


    document.getElementById("giphy-embed").src = "";

    document.getElementById("numGuesses").style.color = "";

    updateScreen();
};

//updates the HTML from the functions
function updateScreen() {
    document.getElementById("numWins").innerText = numWins;
    document.getElementById("numLosses").innerText = numLosses;
    document.getElementById("numGuesses").innerText = numGuessesRemaining;
    document.getElementById("answerWord").innerText = ansWordArr.join("");
    document.getElementById("guessedLetters").innerText = guessedLetters;

};

//function to check the key that's pressed
function checkGuess(letter) {
    //if letter is not in guessedLetters array then push the letter to the array
    if (guessedLetters.indexOf(letter) === -1) {
        guessedLetters.push(letter);
        //if the letter isn't in the answer word then -1 the numGuessesRemaining
        if (ansWord.indexOf(letter) === -1) {
            numGuessesRemaining--;
            //if numGuessesRemaining is 3 or less then change the color
            if (numGuessesRemaining <=3) {
                document.getElementById("numGuesses").style.color = "#e12d2e";
            }
            //if letter is in answer then replace the positioned "_" with the letter
        } else { 
            for (var i = 0; i < ansWord.length; i++) {
                if (letter === ansWord[i]) {
                    ansWordArr[i] = letter;
                } 
            }                
        }
    }

}; 

//function to check if the player is a winner
function isWinner() {
    //if there are no more "_" in the ansWordArr then +1 to Wins and switch isFinished to true
    if (ansWordArr.indexOf("_") === -1) {
        numWins++;
        isFinished = true;
        //if the answer is guessed then play assigned gif
        if(ansWord === "CADMIUM YELLOW") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/bob-ross-XD0CxeNpDzBsI";
        } else if (ansWord === "PHTHALO GREEN") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/painting-bob-joy-zc9fWRl4DUZ4A";
        } else if (ansWord === "PHTHALO BLUE") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/painting-bob-joy-zc9fWRl4DUZ4A";
        } else if (ansWord === "VAN DYKE BROWN") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/bob-ross-XD0CxeNpDzBsI";
        } else if (ansWord === "PRUSSIAN BLUE") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/bob-ross-FgqvzvlSu3SXm";
        } else if (ansWord === "TITANIUM WHITE") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/bob-ross-FgqvzvlSu3SXm";
        } else if (ansWord === "YELLOW OCHRE") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/bob-ross-XD0CxeNpDzBsI";
        } else if (ansWord === "ALIZIRIN CRIMSON") {
            document.getElementById("giphy-embed").src = "https://giphy.com/gifs/bob-ross-FgqvzvlSu3SXm";
        }

    }
};
//function to check if player is a loser
function isLoser() {
    // if the numGuessesRemaining is 0 then -1 numLosses and switch isFinished to true
    if(numGuessesRemaining <= 0) {
        numLosses++;
        isFinished = true;
        //play the loser gif
        document.getElementById("giphy-embed").src = "https://giphy.com/gifs/rYEAkYihZsyWs/html5";
        document.getElementById("numLosses").style.color = "#e12d2e";
    }

};


//event listener for key pressed
document.onkeyup = function(event) {
    //if isFinished is true then restart the game to the initial setup 
    //and switch isFinished back to false
    if (isFinished) {
        setup();
        isFinished = false;
    } else {
        //check to see if only letters A-Z are pressed
        //functions are executed when user presses A-Z key
        if(event.keyCode >= 46 && event.keyCode <= 90) {
            checkGuess(event.key.toUpperCase()); 
            updateScreen();
            isWinner();
            isLoser();
        }
    }
};


setup();
updateScreen();

console.log(ansWord);

标签： javascript

解决方案

空格键的键码是 32。

因此，对于您检查按下哪个键的部分，可能添加如下内容：

//functions are executed when user presses A-Z key
        if(event.keyCode >= 46 && event.keyCode <= 90) {
            checkGuess(event.key.toUpperCase()); 
            updateScreen();
            isWinner();
            isLoser();
        }
//this part handles spaces
        else if(event.keyCode == 32) {
            checkGuess("_");
            updateScreen();
            isWinner();
            isLoser();
}

您也可以将其添加到上面的 if 语句中。

推荐阅读