Web Project
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.
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
For this project we will need three files namely
<!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>
//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();
}
};
*{
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;
}