You are currently viewing Word Guessing Game Using HTML, CSS And JavaScript

Word Guessing Game Using HTML, CSS And JavaScript

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 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 we 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.

Word Guessing Game Using HTML, CSS And JavaScript

Hey Coders Welcome back to Codewithrandom In todays blog we’ll see that how we can make the Word guessing game using HTML5, CSS3 & JS. I hope you have got an idea about the project.

HTML Code for Word Guess Game
<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>

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. Now let us style the game so that it doesn’t look so simple that user only surf for once.

100+ Front-end Projects for Web developers (Source Code)

CSS Code for Word Guess Game

* {

}

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 {

}

In this CSS code 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 so that things doesn’t get messy and everything is shown properly.

Now we have build the structure, styled the game, Now to make it responsive and add the words we have to code the JavaScript part to make it communicate with the users via the message which we have defined in the HTML Code.

JavaScript Code for Word Guess

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 alittle 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 we defined it here. Let us see the final output.

 

Final Output

We have Successfully created our Creating Word Guess Game using HTML5, CSS3 & JS | Word Guess 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.

Ecommerce Website Using Html Css And Javascript Source Code

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

Leave a Reply