Guessing Game with Map and Set - Exercise

Contact Us or call 1-877-932-8228
Guessing Game with Map and Set - Exercise

Guessing Game with Map and Set

Duration: 20 to 30 minutes.

In this exercise, you will create a guessing game using the Map and Set objects.

  1. Open AdvancedObjects/Exercises/guessinggame.html for editing.
  2. The game selects a random word (from the possibleWords array), creates wordToGuess as a Map from the word, creates userGuess as a Map (of the same size) with all elements initially as a space, and creates a Set (lettersNotGuessed) of all 26 alphabet letters.
  3. Users play the game by clicking on a letter from the displayed list. Correct guesses show in the blank-character spaces for the word to guess; guessed letters (correct or incorrect) disappear from the list.
  4. The HTML markup, CSS styling, and event-handling JavaScript code is done for you.
  5. Your tasks are to complete the displayWord function (which displays the word to guess), isWin function (which returns true when the user has won), and doGuess function (which processes each guess).
  6. Test your solution in a browser.

Solution:

AdvancedObjects/Solutions/guessinggame.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Guessing Game</title>
	<style>
		body {
			background:#ccc;
		}
		#main {
			background:#eee;
			width:79%;
			padding:2% 5%;
			margin:20px auto;
		}
		h1 {
			margin:0 0 10px 0;
		}
		div#word {
			float:left;
			width:30%;
		}
		div#word div  {
			background:#fff;
			height:35px;
			width:30px;
			line-height:30px;
			font-size:30px;
			float:left;
			margin-right:5px;
			border:1px solid #000;
			text-align: center;
		}
		div#letters {
			float:right;
			width:69%;
		}

		div#letters a {
			display:block;
			padding:5px;
			font-size:28px;
			color:#000;
			text-decoration: none;
			float:left;
		}
		footer {
			clear:both;
			text-align: center;
			font-size:30px;
		}
	</style>
	<script>
		var lettersNotGuessed, wordToGuess, userGuess;

		function displayWord(userGuessMap) {
			var wordHTML = '';
			userGuessMap.forEach(function (value, key, map) {
				wordHTML += '<div>' + value + '</div>';
			});
			document.getElementById('word').innerHTML = wordHTML;
		}

		function displayLettersToGuess(lettersNotGuessedSet) {
			var lettersHTML = '';
			for (let letter of lettersNotGuessedSet) {
				lettersHTML += '<a href="#" id="' + letter + '" class="letter">' + letter + '</a>';
			}
			document.getElementById('letters').innerHTML = lettersHTML;
		}

		function isWin(userGuessMap) {
			var is_winner = true;
			userGuessMap.forEach(function (value, key, map) {
				if (value == " ") {
					is_winner = false;
				}
			});
			return is_winner;
		}

		function doGuess(e) {
			e.preventDefault();
		    var letter = e.target.getAttribute("id");

		   lettersNotGuessed.delete(letter);
		    displayLettersToGuess(lettersNotGuessed);

		    wordToGuess.forEach(function (value, key, map) {
				if (value == letter) {
					userGuess.set(key, letter);
				}
			});
			displayWord(userGuess);

			if (isWin(userGuess)) {
				document.getElementById('footer').innerHTML = 'You Win!';
			}
		};

		window.onload = function() {
			var possibleWords = ['apple','banana','pear'];
			var wordToGuessString = possibleWords[Math.floor(Math.random()*possibleWords.length)];
			wordToGuess = new Map(Array.from(wordToGuessString).entries());
			userGuess = new Map();
			for(let i=0; i<wordToGuess.size; i++) {
				userGuess.set(i, ' ');
			}
			displayWord(userGuess);
			lettersNotGuessed = new Set('abcdefghijklmnopqrstuvwxyz');
			displayLettersToGuess(lettersNotGuessed);

			document.querySelector('body').addEventListener('click', function(e) {
				if (e.target.tagName.toLowerCase() === 'a') {
					doGuess(e);
				}
			});
		}
	</script>
</head>
<body>
	<div id="main">
		<h1>Guessing Game</h1>
		<div id="word"></div>
		<div id="letters"></div>
		<footer id="footer"></footer>
	</div>
</body>
</html>

Code Explanation

We use forEach in the displayWord function to build a series of divs containing, initially, just spaces; this displays the empty boxes representing the word to guess.

Similarly, we iterate over userGuess to check if there are any spaces (the ' ' character) left; if so, the user has not yet won and we return false.

In function doGuess, we remove the guessed letter from the lettersNotGuessed set, call displayLettersToGuess to update the set of letters still available, iterate over wordToGuess and update userGuess if the user has guessed a letter (or multiple instances of the same letter) correctly, and call displayWord to update any already-guessed letters.

Next