In this tutorial, You will learn to get the JavaScript word guessing game with complete source code and also you will get step by step guide to develop it using HTML, CSS & Js.
Word Guessing game is a powerful mind & sensible game that helps us to develop memory power. using this game, You can guess the random words appearing in the game dashboard in the form of questions or hints.
In this game, A hints sentence will start while you start the game and you will also get an option to reset the hints. You will get changes based on the length of the game. If you guess all the correct words then you will win the game.
How to Create Word Guessing Game in JavaScript
Now, let’s start to develop the js word guessing game with some simple steps.
Also learn –
JavaScript Color Picker Chrome Extension
JavaScript Password Strength Checker
Now follow the next all steps –
1. Create Word Guessing Game Directory
First of all, Create the directory structure to create the word guessing game
word-guessing/
|__index.html
|__style.css
|__guessing-words.js
|__script.js
|
2. Create Word Guessing UI in HTML
To create word guessing UI, you have to follow the following points –
- First of all, Write a basic HTML code
- Include the css file style.css in the head section
- Also, include the boostrap5 CDN in the head section
- Also, include the custom.js and guessing-words.js files just above the body tag
- Create the first heading tag with a title
- Create a third heading tag and write the ‘guess the word
- Create a <p> tag with class correct-result to display the final result
- Create another tag with class help to display the hints sentence
- Create a div with class word inputs to display the guess words
- Create an input field with class type-word to type the guessing word.
- Create a parent with the class result and implement the next all steps within it
- Create two paragraphs and write a message ‘wrong guessing word’ and ‘remaining guessing word’
- Create a <p> tag with class wrong-guess to display word words
- Create another <p> tag with the class remaining-chance to display the remaining chances to play the game.
- Out the parent div, Create a reset button with class reset-now to reset the game.
File Name – index.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Word Guessing - CodingStatus</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<!---====== word guessing game================-->
<div class="game">
<h1 class="text-success">Word Guessing Game</h1>
<h3>Guess the Word!</h3>
<p class="correct-result text-success"></p>
<p class="help text-danger"></p>
<div class="word-inputs">
</div>
<input type="text" class="type-word">
<div class="result">
<p><b>Wrong Guess Letters</b></p>
<p class="wrong-guess"></p>
<p><b>Remaining chances</b></p>
<p class="remaining-chance"></p>
</div>
<button class="btn btn-success reset-now">Reset Now</button>
</div>
<!-----============word guessing game ==========----->
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<script src="guessing-words.js"></script>
<script src="script.js"></script>
</body>
</html>
3. Design Word Guessing UI in CSS
Now you can use the following CSS code to design the word guessing game –
.game{
border: 1px solid lightgray;
padding: 20px;
margin: 20px;
text-align: center;
}
.game input{
width: 20%;
text-align: center;
height: 55px;
font-size: 25px;
text-transform: uppercase;
margin: 5px !important;
}
4. Create Words Guessing Object in Js
Now create an object wordList with const keyword and write some words & hints with two properties word and hint respectively.
File Name – gueesing-words.js
const wordList = [
{
word: "head",
hint: "Invisible part of web page"
},
{
word: "body",
hint: "Visible Part of Web page"
},
{
word: "html",
hint: "HyperText Markup Language"
},
{
word: "css",
hint: "Styling Language"
},
{
word: "angular",
hint: "Single page Application language"
},
{
word: "programmer",
hint: "A person who writes Program"
},
{
word: "coder",
hint: "A person who codes"
},
{
word: "coding",
hint: "CodingStatus contains a programming word"
},
{
word: "ecommerce",
hint: "Shopping Website"
},
{
word: "github",
hint: "code hosting platform"
}
]
5. Create Word Guessing Script in js
To create a js Word guessing script, you have to implement the following things –
First of all access the elements and store in variable –
- Access the element that has class word-inputs
- Access the element that has class help
- Access the element that has class remaining-chance
- Acess the element that has class wrong-guess
- Access the element that has class reset-now
- Access the element that has class type-word
Now, Create the following functions –
randomWord() – This function will execute on the loading page and click the reset button to display the random hints and words.
startGame() – This function executes when you type the word with the keyboard and display the correct words or wrong words & remaining chances
File Name – script.js
let wordInputs, help, remainingChance, wrongLetter, resetNow, typeWord, word, maxGuesses, incorrectLetters = [], correctLetters = [];
wordInputs = document.querySelector(".word-inputs");
help = document.querySelector(".help");
remainingChance = document.querySelector(".remaining-chance");
wrongLetter = document.querySelector(".wrong-guess");
resetNow = document.querySelector(".reset-now");
typeWord = document.querySelector(".type-word");
let randomWord = function() {
let ranItem = wordList[Math.floor(Math.random() * wordList.length)];
word = ranItem.word;
maxGuesses = word.length >= 4 ? 6 : 8;
correctLetters = [];
incorrectLetters = [];
help.innerText = ranItem.hint;
remainingChance.innerText = maxGuesses;
wrongLetter.innerText = incorrectLetters;
let inputField = "";
for (let i = 0; i < word.length; i++) {
inputField += `<input type="text" disabled>`;
wordInputs.innerHTML = inputField;
}
}
let startGame = function(e) {
console.log("yyyyy",e.target.value);
let key = e.target.value.toLowerCase();
if(key.match(/^[A-Za-z]+$/) && !incorrectLetters.includes(` ${key}`) && !correctLetters.includes(key)) {
if(word.includes(key)) {
for (let i = 0; i < word.length; i++) {
if(word[i] == key) {
correctLetters += key;
wordInputs.querySelectorAll("input")[i].value = key;
}
}
} else {
maxGuesses--;
incorrectLetters.push(` ${key}`);
}
remainingChance.innerText = maxGuesses;
wrongLetter.innerText = incorrectLetters;
}
typeWord.value = "";
setTimeout(() => {
if(correctLetters.length === word.length) {
help.innerText = `Congrats! You have guessed right word`;
// return randomWord();
} else if(maxGuesses < 1) {
help.innerText = `You have failed! You have 0 chance to guess`;
for(let i = 0; i < word.length; i++) {
wordInputs.querySelectorAll("input")[i].value = word[i];
}
}
}, 100);
}
randomWord();
resetNow.addEventListener("click", randomWord);
wordInputs.addEventListener("click", () => typeWord.focus());
document.addEventListener("keydown", () => typeWord.focus());
document.addEventListener("keyup", startGame);
6. Play Word Guessing Game
Open the Game in your web browser, Then first of all hints will be appeared on the game dashboard. Now you can type the guess word related to the hints or click the reset button to get the next hints.
When you type the guess word, If it is correct then it will display in the input box, If it is wrong the it will display in the wrong words section and reduce your chances to guess the word.
When you type all the correct guessing word then you will win the game and get the congritulation meaages.