I'm a javascript noob I began a Bootcamp to improve my knowledge. I was tasked with creating a hangman style guessing game. I pretty much pulled a template repo from GitHub and themed it after Bob Ross. The problem I'm having is the array of words to guess all contain a space.
(CADMIUM YELLOW
, PHTHALO GREEN
, PHTHALO BLUE
, VAN DYKE BROWN
, PRUSSIAN BLUE
, TITANUM WHITE
, YELLOW OCHRE
, ALIZIRIN CRIMSON
)
This space is considered a value and is assigned an _
just like the letters. If anyone could help me solve I would be very grateful.
// 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);