JavaScript Game from scratch Guess the Number learn how to create a JavaScript DOM game

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>



 <title>JavaScript </title>




     font-family:Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif;



     border:1px solid #ddd;










     margin:10px auto;

















 <div class=”main”>

  <input type=”text”><br>

  <button>Click Me</button>

  <div class=”results”></div>


 <script src=”code.js”></script>



const myInput = document.querySelector(‘input’);

const btn = document.querySelector(‘button’);


const output = document.querySelector(‘.results’);

const main = document.querySelector(‘.main’);

const message = document.createElement(‘div’);


const btnStart = document.createElement(‘button’);


btnStart.textContent = ‘Start Game’;



const vals = {min:0,max:10};

const game = {guess:0,score:0,randomNum:numberMaker(vals.min,vals.max)};

myInput.setAttribute(‘type’,’number’); = ‘none’; = ‘none’;

btn.textContent = ‘Guess’;



messageOut(‘Click the start game to begin’);

function guesser(){

   const val = myInput.value;

   myInput.value = ”;


   if(game.randomNum == 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.guess = 0; = ‘none’; = ‘none’; = ‘block’;

   btnStart.textContent = ‘play again?’;


function insetUp(moreMessage){

   messageOut(`${moreMessage}<br>Guess a number between ${vals.min} to ${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; = ‘block’;

   myInput.focus(); = ‘block’; = ‘none’;


function messageOut(mes){

   message.innerHTML = mes;


function numberMaker(min,max){

   return Math.floor(Math.random()*(max-min+1)+min);