JavaScript Game from scratch Guess the Number learn how to create a JavaScript DOM game Learn how to create a number guessing game with JavaScript. Guess the hidden number, the range will adjust as you guess random numbers. Providing logic for the game play and scoring.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript </title>
<style>
body{
font-style:normal;
font-family:Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif;
}
.main{
border:1px solid #ddd;
width:80%;
margin:auto;
text-align:center;
}
.mainbutton{
background-color:red;
padding:10px;
color:white;
margin-top:10px;
margin:10px auto;
}
.guessbutton{
background-color:black;
padding:10px;
color:white;
margin:auto;
width:100%;
}
input{
margin:auto;
font-size:2em;
text-align:center;
}
</style>
</head>
<body>
<div class=”main”>
<input type=”text”><br>
<button>Click Me</button>
<div class=”results”></div>
</div>
<script src=”code.js”></script>
</body>
</html>
const myInput = document.querySelector(‘input’);
const btn = document.querySelector(‘button’);
btn.classList.add(‘guessbutton’);
const output = document.querySelector(‘.results’);
const main = document.querySelector(‘.main’);
const message = document.createElement(‘div’);
output.append(message);
const btnStart = document.createElement(‘button’);
output.append(btnStart);
btnStart.textContent = ‘Start Game’;
btnStart.classList.add(‘mainbutton’);
main.prepend(output);
const vals = {min:0,max:10};
const game = {guess:0,score:0,randomNum:numberMaker(vals.min,vals.max)};
myInput.setAttribute(‘type’,’number’);
myInput.style.display = ‘none’;
btn.style.display = ‘none’;
btn.textContent = ‘Guess’;
btnStart.addEventListener(‘click’,starter);
btn.addEventListener(‘click’,guesser);
messageOut(‘Click the start game to begin’);
function guesser(){
const val = myInput.value;
myInput.value = ”;
game.guess++;
if(game.randomNum == val ){
roundOver(val);
}else if(game.randomNum > val ){
vals.min = val;
insetUp(`<b>${val}</b> was too low!`);
}else {
vals.max = val;
insetUp(`<b>${val}</b> was too high!`);
}
}
function roundOver(v){
const rep = game.guess == 1 ? ‘guess’ : ‘guesses’;
messageOut(`You guessed correct <b>${v}</b><br>It took you ${game.guess} ${rep}`);
game.score++;
game.guess = 0;
myInput.style.display = ‘none’;
btn.style.display = ‘none’;
btnStart.style.display = ‘block’;
btnStart.textContent = ‘play again?’;
}
function insetUp(moreMessage){
messageOut(`${moreMessage}<br>Guess a number between ${vals.min} to ${vals.max}`);
myInput.setAttribute(‘min’,vals.min);
myInput.setAttribute(‘max’,vals.max);
}
function starter(e){
vals.min = numberMaker(0,1);
vals.max = numberMaker(vals.min+10,vals.min+100);
game.randomNum = numberMaker(vals.min,vals.max);
insetUp(‘Make a Guess!’);
game.guess = 0;
myInput.style.display = ‘block’;
myInput.focus();
btn.style.display = ‘block’;
btnStart.style.display = ‘none’;
}
function messageOut(mes){
message.innerHTML = mes;
}
function numberMaker(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}