HTML5 | How to create Guess the next number Game

Web Project

Share

Guess the next number is a very simple game. The match is between the player and the computer. The computer will pick a number from 1 to 9 and the player has to guess it correctly.

Requirement

For this project we can use any text editor like Notepad++, SublimeText, gEdit, TextMate, Coda, Brackets etc.

In the above video Brackets has been used which is an open source software and can be downloaded from their website brackets.io

Files

For this project we will need three files namely

  • index.html
  • script.js
  • style.css

index.html


<!DOCTYPE html>
<html>
    <head>
        <title>Guess the next number</title>
        <script type="text/javascript" src="script.js"></script>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body onload="reset();">
        <div class="output-container">
            <div>AI: <span id="ai-number"></span></div>
            <div>Your guess: <span id="user-number"></span></div>
            <p id="msg"></p>
            <p id="result"></p>
        </div>
        <div class="button-container">
            <p>
            <button id="btn-1" onclick="user(1);">1</button>
            <button id="btn-2" onclick="user(2);">2</button>
            <button id="btn-3" onclick="user(3);">3</button>
            </p>
            <p>
            <button id="btn-4" onclick="user(4);">4</button>
            <button id="btn-5" onclick="user(5);">5</button>
            <button id="btn-6" onclick="user(6);">6</button>
            </p>
            <p>
            <button id="btn-7" onclick="user(7);">7</button>
            <button id="btn-8" onclick="user(8);">8</button>
            <button id="btn-9" onclick="user(9);">9</button>
            </p>
        </div>
        <div class="score-container">
            <div>Score: <span id="score"></span></div>
            <div>Guess remaining: <span id="guess-remaining"></span></div>
            <button id="reset" onclick="reset();">Reset</button>
        </div>
    </body>
</html>

script.js


//variables
var score, guessRemaining, aiNum;

//functions

function reset(){
    score = 0;
    guessRemaining = 5;
    document.getElementById('score').innerHTML=score;
    document.getElementById('guess-remaining').innerHTML=guessRemaining;
    document.getElementById('ai-number').innerHTML='';
    document.getElementById('user-number').innerHTML='';
    document.getElementById('msg').innerHTML='Start';
    document.getElementById('result').innerHTML='';
    ai();
};

function ai(){
    aiNum = Math.floor(Math.random()*9)+1;
};

function user(n){
    document.getElementById('user-number').innerHTML=n;
    if(n==aiNum){
        score++;
        document.getElementById('msg').innerHTML='Correct 
Make a new guess.'; }else{ document.getElementById('msg').innerHTML='Wrong
Make a new guess.'; } guessRemaining--; displayResult(); }; function displayResult(){ document.getElementById('ai-number').innerHTML=aiNum; document.getElementById('score').innerHTML=score; document.getElementById('guess-remaining').innerHTML=guessRemaining; if(guessRemaining==0){ document.getElementById('result').innerHTML='Your score: '+score+' out of 5
Click RESET to play again.'; }else{ ai(); } };

style.css



*{
    margin:0;
    padding:0;
    font-family:sans-serif;
}

div{
    text-align:center;
    padding:10px;
}

.output-container div{
    width: 150px;
    font-size:24px;
    clear:both;
    display:inline-block;
}

.output-container p{
    font-size:18px;
    padding:5px;
}

.button-container button{
    width:50px;
    height:50px;
    font-size:25px;
    padding:5px;
    background-color:pink;
    border:none;
}

.button-container p{
    padding:5px;
}

.score-container div{
    font-size: 16px;
    padding:15px;
}

.score-container button{
    width:80px;
    height:36px;
    font-size:15px;
    background-color:#0077ff;
    color:#ffffff;
    border:none;
}
Share