ADVERTISEMENT

Word Guessing Game Using HTML, CSS And JavaScript

Telegram Group Join Now

ADVERTISEMENT

Word Guessing Game Using HTML, CSS And JavaScript

Hey Coders, Welcome back to Codewithrandom blog. In this article we’ll see that, how to make Word Guessing Game using HTML, CSS, and JS. Hope you guys enjoy it.

ADVERTISEMENT

What is Word Guessing Game?

ADVERTISEMENT

We all have an amazing childhood where we used to play indoor and outdoor games such as chess, carrom, marbles, dice games, cricket, football, hockey, baseball etc. There used be a board game named as word guessing game where two player has set of spellings and they have to create some meaningful words the player you build more words is to be announced as Winner.

But as we know that when technology grows, it updates each and every features or application time-to-time. So in that we human also need to update from board to keyboard. Which means now we as developer can make this game using the Front-End Development tools and enjoy our childhood in an upgraded version with that note. So let’s see How to make Word Guessing Game using HTML, CSS, and JS and read it full.

ADVERTISEMENT

How to make Word Guessing Game using HTML, CSS, and JavaScript

Let’s start the coding to make Word Guessing Game using HTML, CSS, and JavaScript project. Before we started coding, you have to structure your folder. First create a folder named as Word Guessing Game then inside this folder create a HTML file named as index.html then create CSS file named as style.css create a JavaScript file named as main.js, after you completed the folder stucture for Word Guessing Game project let’s start coding.

ADVERTISEMENT

Code By El El
Written By  Harsh Sawant
Language Used HTML, CSS, and JavaScrit
External Link / Dependencies no
Responsive No
Project Download Link Available Below
Word Guessing Game project Information

HTML Code for Word Guessing Game

In this HTML Code we have defined the structure of the game such as play, pause, resume button. Some message such as how many lives are left, after completing the game, some note for entering the word etc. So copy the all HTML code of word guessing game project, and paste it in your index.html file.

<html>

    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>

    <body>

        <div id="chooseDifficulty" style="display: block">

            <h1>Guess a Word</h1>
            <h5>Choose a difficulty</h5>
            <button title="very easy" onclick="chooseDif1()">easy</button>
            <button title="not difficult" onclick="chooseDif2()">normal</button>
            <button title="a challenge" onclick="chooseDif3()">hard</button>

        </div>

        <!--not active yet :(-->
        <!--<div id="chooseTheme" style="display: none">

            <h1>Guess a Word</h1>
            <h5>Choose a Theme</h5>
            <button onclick="chooseTheme1()">random</button>
            <button onclick="chooseTheme2()">2</button>
            <button onclick="chooseTheme3()">3</button>

        </div>-->

        <div id="startButton" style="display: none">

            <h1>Guess a Word</h1>
            <button onclick="start()">Start</button>
            <p>Note: Some words may contain a hyphen(-) ex: X-ray</p>

        </div>

        <div id="mainGame" style="display: none">

        <p id="question"></p>

        <input type="text" id="guess" maxlength="1">

        <div>
            <button onclick="enterGuess()">Enter Guess</button>
        </div>

        </div>

        <div id="RRguess" style="display: block">

        <p id="rightGuess"></p>
        <p id ="wrongGuess"></p>
        <p id ="guessesLeft"></p>

        </div>

        <div id="youLose" style="display: none">

            <h1>You Lose</h1>

            <div>
                <button onclick="restart()">Play again?</button>
            </div>

            <p id="correctWordWas"></p>

        </div>

        <div id="youWin" style="display: none">

            <h2>You Win</h2>

            <div>
                <button onclick="restart()">Play again?</button>
            </div>

        </div>

    </body>

</html>

Now let us style the game so that it doesn’t look so simple that user only surf for once.

Read Also

CSS Code for Word Guessing Game

In this CSS code of word guessing game, we have imported a link for the background effect which contains lined paper template I’m comfortable with that but you are free to choose any template of your choice then we have just padded and aligned the defined elements present in the HTML Code of word guessing game, so that things doesn’t get messy and everything is shown properly. Now we have build the structure, styled the game

ADVERTISEMENT

* {

}

body {
  background-image: url("http://dailyroabox.com/wp-content/uploads/2016/11/Lined-Paper-Template-Google-Docs.jpg");
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%)translateY(-50%);
  text-align: center;
}

h1 {

}

h2 {

}

Now to make it responsive and add the words we have to code the JavaScript part of word guessing game to make it communicate with the users via the message which we have defined in the HTML Code of Word Guessing Game.

JavaScript Code for Word Guessing Game

var word = "";
var wordGuess = [];
var wrongGuess = [];
var guessBomb = 0;
var winCount = 1;
var guess = "";
var dif = 0;

function chooseDif1() {
    dif = 1;
    document.getElementById('startButton').style.display='block';
    document.getElementById('chooseDifficulty').style.display='none';
}

function chooseDif2() {
    dif = 2;
    document.getElementById('startButton').style.display='block';
    document.getElementById('chooseDifficulty').style.display='none';
}

function chooseDif3() {
    dif = 3;
    document.getElementById('startButton').style.display='block';
    document.getElementById('chooseDifficulty').style.display='none';
}


function wordw() {
    var randomWords = ["humor", "miniature", "amusing", "creepy", "fact", "risk", "verse", "land", "lumpy", "holiday", "glorious", "weigh", "brake", "pretty", "grin", "capricious", "bite-sized", "misty", "ignore", "certain", "sloppy", "dress", "true", "zonked", "observation", "action", "various", "want", "direful", "suck", "dress", "scarecrow", "judge", "madly", "quizzical", "consist", "fierce", "love", "arrest", "serve", "fit", "hug", "tan", "curve", "eatable", "tub", "race", "innocent", "open", "preach", "steady", "acoustics", "lock", "field", "arrange", "rifle", "learned", "toe", "flow", "competition", "ill-fated", "oatmeal", "match", "male", "measure", "loaf", "smile", "wrestle", "dull", "food", "locket", "bell", "beg", "strengthen", "responsible", "enchanting", "loutish", "switch", "idea", "nine", "squeamish", "pig", "bat", "dear", "trains", "owe", "frogs", "assorted", "lonely", "hurry", "natural", "sun", "snow", "obnoxious", "broken", "friend", "bright", "cake", "sour", "permit", "economic", "lovely", "quick", "van", "tempt", "apparel", "decay", "business", "adjustment", "blushing", "makeshift", "slippery", "load", "winter", "exist", "tongue", "country", "roll", "fast", "moor", "possess", "pat", "pass", "books", "impartial", "hospitable", "dust", "naughty", "extra-large", "tacky", "produce", "committee", "fuzzy", "judicious", "nebulous", "stick", "ear", "copy", "friendly", "press", "distinct", "vegetable", "upset", "venomous", "statement", "sulky", "spell", "x-ray", "square", "taste", "great", "thumb", "adjoining", "chilly", "test", "ancient", "green", "badge", "work", "repeat", "free", "elderly", "doctor", "difficult", "grubby", "approval", "turn", "vivacious", "thundering", "cherries", "rest", "plan", "crime", "sticks", "wealthy", "phone", "suspend", "gullible", "fence", "note", "wall", "interest", "coil", "jump", "enchanted", "funny", "racial", "greasy", "polish", "elbow", "smart", "bore", "crowd", "glistening", "oval", "eggs", "nauseating", "detailed", "veil", "coal"]
    var raNum = Math.floor(Math.random() * 70);
    return randomWords[raNum]
    }


function wordStart() {
    var wordLength = word.length;
    var wordL_ = "";
    var count = wordLength;

    while(count > 0) {
        wordGuess.push(" _ ");
        count -= 1;
    }
}

function winCountFunc() {
    var num = 0;
    var lettUsed = "";
    var count = word.length;

    while(count > 0) {
        if(lettUsed.includes(word[count - 1])) {

        }

        else{
            num += 1;
            lettUsed += word[count - 1];
        }

        count -= 1;
    }

    return num;
}

function start() {
    word = wordw();
    winCount = winCountFunc();

    if(dif == 1) {
        guessBomb = word.length + 5;
    }

    else if(dif == 2) {
        guessBomb = word.length;
    }

    else if(dif == 3) {
        if(word.length % 2 == 0) {
           guessBomb = word.length / 2;
        }
      
        else {
           guessBomb = (word.length - 1) / 2;
        }
    }

    console.log(word);
    document.getElementById('mainGame').style.display='block';
    document.getElementById('startButton').style.display='none';

    document.getElementById("question").innerHTML = "Enter your first guess";

    wordStart();

    document.getElementById('RRguess').style.display='block';
    document.getElementById("rightGuess").innerHTML = "word progress: " + wordGuess;
    document.getElementById("wrongGuess").innerHTML = "Wrong guesses: " + wrongGuess;
    document.getElementById("guessesLeft").innerHTML = "Guesses remaining: " + guessBomb;

    var x = document.getElementById("guess").maxLength;
    //document.getElementById("demo").innerHTML = x;
}

function enterGuess() {
    var lett = document.getElementById("guess").value;
    document.getElementById("guess").value = "";

    if (lett.length === 1){
        var rightOnot = isRightOnot(lett);
        if (rightOnot == true) {

            NewCW(lett);
        }

        else {
            if(!wrongGuess.includes(lett)) {
                console.log("hi");
                wrongGuess.push(lett);
            }
            guessBomb -= 1;
        }
    }

    else if (lett.length < 1) {

    }

    else {
        guessBomb -= 1;
    }

    if (guessBomb <= 0) {
        gameLose()
    }

    if (winCount <= 0) {
        gameWin()
    }
    document.getElementById("rightGuess").innerHTML = "word progress: " + wordGuess;
    document.getElementById("wrongGuess").innerHTML = "Wrong guesses: " + wrongGuess;
    document.getElementById("guessesLeft").innerHTML = "Guesses remaining: " + guessBomb;
}

function isRightOnot(a) {
    var n = word.includes(a);
    return n;
}

function NewCW(letter) {
    var count = 0;
    winCount -= 1

    while (count <= word.length - 1) {
        if (letter === word[count]) {
            if(wordGuess[count] === letter) {
            }
            else {
            }

            wordGuess[count] = letter;
            count += 1;
        }

        else {
            count += 1;
        }

    }

}

function gameLose() {
    document.getElementById('mainGame').style.display='none';
    document.getElementById('RRguess').style.display='none';
    document.getElementById('youLose').style.display='block';
    document.getElementById("correctWordWas").innerHTML = "The correct word was " + word;
}

function gameWin() {
    document.getElementById('mainGame').style.display='none';
    document.getElementById('RRguess').style.display='none';
    document.getElementById('youWin').style.display='block';
}

function restart() {
    document.getElementById('mainGame').style.display='none';
    document.getElementById('RRguess').style.display='none';
    document.getElementById('youLose').style.display='none';
    document.getElementById('youWin').style.display='none';
    document.getElementById('chooseDifficulty').style.display='block';

    word = "";
    wordGuess = [];
    wrongGuess = [];
    guessBomb = 0;
    winCount = 1;
    guess = "";
    dif = 0;
}

Well I know after seeing the code you have got a little bit confused or scared but don’t worry I’m here to solve your queries and explain you with simplicity so in the above code we have created a function and in that we add some words and used a function called random where it will be randomly give the spaces when the game will start and the user have to fill it.

We have define if-else statement for each function so that it reduces the chances of error and the message should be displayed which was defined in the Structure Code i.e., HTML5. And then in last we have defined three functions for Lose, Win, Restart and the id which was there in the HTML code of word guessing game project, we defined it here. Let us see the final output.

ADVERTISEMENT

Final Output of Word Guessing Game usign HTML, CSS, and JavaScript

ADVERTISEMENT

We have Successfully created our Word Guessing Game using HTML, CSS and JavaScript | Word Guessing Game. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

Read more related post

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – El el

What Is Word Guessing Game?

We all have an amazing childhood where we used to play indoor and outdoor games such as chess, carrom, marbles, dice games, cricket, football, hockey, baseball etc. There used be a board game named as word guessing game where two player has set of spellings and they have to create some meaningful words the player you build more words is to be announced as Winner.

ADVERTISEMENT

How to make Word Guessing Game using HTML, CSS, and JavaScript

Let’s start the coding to make Word Guessing Game project. Before we started coding, you have to structure your folder. First create a folder named as Word Guessing Game then inside this folder create a HTML file named as index.html then create CSS file named as style.css create a JavaScript file named as main.js, after you completed the folder stucture for Word Guessing Game project let’s start coding.

ADVERTISEMENT

HTML Code for Word Guessing Game

In this HTML Code we have defined the structure of the game such as play, pause, resume button. Some message such as how many lives are left, after completing the game, some note for entering the word etc. So copy the all HTML code of word guessing game project, and paste it in your index.html file.

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT