• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

CodingStatus

- Free Source Code for Web Applications

  • HTML
  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL
  • Interview Questions
  • Installation

JavaScript Word Guessing Game

March 10, 2023 By Md Nurullah

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.

Filed Under: JavaScript

Hey there, Welcome to CodingStatus. My Name is Md Nurullah from Bihar, India. I'm a Software Engineer. I have been working in the Web Technology field for 3 years. Here, I blog about Web Development & Designing. Even I help developers to build the best Web Applications.

Primary Sidebar

Latest Tutorials

  • How to Install Express Application Using Express Generator Tool
  • Registration Form using Ajax, PHP & MySQL
  • Filter Data with Checkboxes in PHP & MySQL
  • Filter Data by Category in PHP & MySQL
  • Filter Prices From Low to High in PHP, MySQL

Popular Tutorials

  • JavaScript Word Guessing Game
  • JavaScript Color Picker Chrome Extension
  • How to Create JavaScript Accordion
  • JavaScript Password Strength Checker
  • JavaScript Countdown Timer

Categories

  • Ajax (11)
  • Django (5)
  • HTML (4)
  • Installation (3)
  • Interview Questions (5)
  • JavaScript (20)
  • jQuery (11)
  • Laravel (2)
  • Node.js (23)
  • PHP (42)
  • ReactJS (35)
  • SQL (12)
  • Tips (7)
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved