In this activity, you will work with a group to build a game using JavaScript and Web APIs.
The completed application should meet the following criteria:
As a user, I want to start the game by clicking on a button.
As a user, I want to try and guess a word by filling in a number of blanks that match the number of letters in that word.
As a user, I want the game to be timed.
As a user, I want to win the game when I have guessed all the letters in the word.
As a user, I want to lose the game when the timer runs out before I have guessed all the letters.
As a user, I want to see my total wins and losses on the screen.
When a user presses a letter key, the user’s guess should be captured as a key event.
When a user correctly guesses a letter, the corresponding blank “_” should be replaced by the letter. For example, if the user correctly selects “a”, then “a _ _ a _” should appear.
When a user wins or loses a game, a message should appear and the timer should stop.
When a user clicks the start button, the timer should reset.
When a user refreshes or returns to the brower page, the win and loss counts should persist.
Refer to the documentation:
If you have completed this activity, work through the following challenge with your group to further your knowledge:
Use Google or another search engine to research this.
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Styling</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./assets/css/style.css" />
</head>
<body>
<header>
<div class= "large-font">Word Guess Game</div>
<button class="start-button">Start</button>
</header>
<main>
<section>
<div class="card word-guess">
<div class="large-font word-blanks">J _ v _ S c r_ _t</div>
</div>
</section>
<section>
<div class="card results">
<div class = "win-loss-container">
<div>
<h2>Wins: <span class="win">0 </span> </h2>
<h2>Losses: <span class="lose">0</span></h2>
</div>
<button class="reset-button">Reset Score</button>
</div>
<div class= "card timer">
<div class = "timer-text">
<div class="large-font timer-count">10</div>
<h3>seconds remaining</h3>
</div>
</div>
</div>
</section>
</main>
<script src="assets/js/script.js"></script>
</body>
</html>
var wordBlank = document.querySelector(".word-blanks");
var win = document.querySelector(".win");
var lose = document.querySelector(".lose");
var timerElement = document.querySelector(".timer-count");
var startButton = document.querySelector(".start-button");
var chosenWord = "";
var numBlanks = 0;
var winCounter = 0;
var loseCounter = 0;
var isWin = false;
var timer;
var timerCount;
// Arrays used to create blanks and letters on screen
var lettersInChosenWord = [];
var blanksLetters = [];
// Array of words the user will guess
var words = ["variable","array", "modulus", "object", "function", "string", "boolean"];
// The init function is called when the page loads
function init() {
getWins();
getlosses();
}
// The startGame function is called when the start button is clicked
function startGame() {
isWin = false;
timerCount = 10;
// Prevents start button from being clicked when round is in progress
startButton.disabled = true;
renderBlanks()
startTimer()
}
// The winGame function is called when the win condition is met
function winGame() {
wordBlank.textContent = "YOU WON!!!🏆 ";
winCounter++
startButton.disabled = false;
setWins()
}
// The loseGame function is called when timer reaches 0
function loseGame() {
wordBlank.textContent = "GAME OVER";
loseCounter++
startButton.disabled = false;
setLosses()
}
// The setTimer function starts and stops the timer and triggers winGame() and loseGame()
function startTimer() {
// Sets timer
timer = setInterval(function() {
timerCount--;
timerElement.textContent = timerCount;
if (timerCount >= 0) {
// Tests if win condition is met
if (isWin && timerCount > 0) {
// Clears interval and stops timer
clearInterval(timer);
winGame();
}
}
// Tests if time has run out
if (timerCount === 0) {
// Clears interval
clearInterval(timer);
loseGame();
}
}, 1000);
}
// Creates blanks on screen
function renderBlanks() {
// Randomly picks word from words array
chosenWord = words[Math.floor(Math.random() * words.length)];
lettersInChosenWord = chosenWord.split("");
numBlanks = lettersInChosenWord.length;
blanksLetters = []
// Uses loop to push blanks to blankLetters array
for (var i = 0; i < numBlanks; i++) {
blanksLetters.push("_");
}
// Converts blankLetters array into a string and renders it on the screen
wordBlank.textContent = blanksLetters.join(" ")
}
// Updates win count on screen and sets win count to client storage
function setWins() {
win.textContent = winCounter;
localStorage.setItem("winCount", winCounter);
}
// Updates lose count on screen and sets lose count to client storage
function setLosses() {
lose.textContent = loseCounter;
localStorage.setItem("loseCount", loseCounter);
}
// These functions are used by init
function getWins() {
// Get stored value from client storage, if it exists
var storedWins = localStorage.getItem("winCount");
// If stored value doesn't exist, set counter to 0
if (storedWins === null) {
winCounter = 0;
} else {
// If a value is retrieved from client storage set the winCounter to that value
winCounter = storedWins;
}
//Render win count to page
win.textContent = winCounter;
}
function getlosses() {
var storedLosses = localStorage.getItem("loseCount");
if (storedLosses === null) {
loseCounter = 0;
} else {
loseCounter = storedLosses;
}
lose.textContent = loseCounter;
}
function checkWin() {
// If the word equals the blankLetters array when converted to string, set isWin to true
if (chosenWord === blanksLetters.join("")) {
// This value is used in the timer function to test if win condition is met
isWin = true;
}
}
// Tests if guessed letter is in word and renders it to the screen.
function checkLetters(letter) {
var letterInWord = false;
for (var i = 0; i < numBlanks; i++) {
if (chosenWord[i] === letter) {
letterInWord = true;
}
}
if (letterInWord) {
for (var j = 0; j < numBlanks; j++) {
if (chosenWord[j] === letter) {
blanksLetters[j] = letter;
}
}
wordBlank.textContent = blanksLetters.join(" ");
}
}
// Attach event listener to document to listen for key event
document.addEventListener("keydown", function(event) {
// If the count is zero, exit function
if (timerCount === 0) {
return;
}
// Convert all keys to lower case
var key = event.key.toLowerCase();
var alphabetNumericCharacters = "abcdefghijklmnopqrstuvwxyz0123456789 ".split("");
// Test if key pushed is letter
if (alphabetNumericCharacters.includes(key)) {
var letterGuessed = event.key;
checkLetters(letterGuessed)
checkWin();
}
});
// Attach event listener to start button to call startGame function on click
startButton.addEventListener("click", startGame);
// Calls init() so that it fires when page opened
init();
// Bonus: Add reset button
var resetButton = document.querySelector(".reset-button");
function resetGame() {
// Resets win and loss counts
winCounter = 0;
loseCounter = 0;
// Renders win and loss counts and sets them into client storage
setWins()
setLosses()
}
// Attaches event listener to button
resetButton.addEventListener("click", resetGame);