Number guessing game in JavaScript

Learn how to make a number guessing game in simple steps JavaScript. Anyone with a basic understanding of HTML (and/or JavaScript) can follow along:

https://youtube.com/watch?v=cQ7CmSVrReE

JavaScript Snake Game Tutorial - Develop a Simple Snake Game

Work on real-time JavaScript Snake game project and become a pro

Snake game is an interesting JavaScript project for beginners. Snake game is a single-player game, which we’ve been playing for a very long time. The game mainly consists of two components – snake and fruit. And we just need to take our snake to the food so that it can eat and grow faster and as the number of fruits eaten increases, the length of snake increases which makes the game more interesting. While moving if the snake eats its own body, then the snake dies and the game ends. Now let’s see how we can create this.

JavaScript Project Prerequisites

To implement the snake game in JavaScript you should have basic knowledge of:

1. Basic concepts of JavaScript

2. HTML

3. CSS

Download Project Code

Before proceeding ahead please download source code of Snake Game: Snake Game in JavaScript

Steps to Build the Project – JavaScript Snake game

1. Create Html file

HTML builds the basic structure. This file contains some basic HTML tags like div, h1, title, etc. also we’ve used bootstrap (CDN is already included).

index.html:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataFlair Snake game</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="static/style.css">
</head>
<body>
    <div class="container">
        <div class ="Jumbotron">
        <h1>DataFlair Snake game using vanilla JavaScript</h1>

            <h2 class="btn btn-info"> 
                Score:   0 
            </h2>

            <div class="containerCanvas">
                <canvas id="canvas" width="500" height="500" class="canvasmain"> </canvas>
            </div>
        </div>
    </div>
    <script src="static/fruit.js"></script>
    <script src="static/snake.js"></script>
    <script src="static/draw.js"></script>
</body>
</html>

We have used simple HTML tags except

#javascript tutorial #javascript project #javascript snake game #simple snake game #javascript

lakshya world

1664775764

How to Create a Successful Gaming App?

How to create a game app is a comprehensive guide, explaining the entire process of creating and publishing games for iOS and Android. Covering all the essential information a budding game developer needs to know.

#game-engine #game-development #game #games #gaming

Desmond Gerber

1677696300

How to Number Guessing Game using JavaScript

JavaScript Number Guessing Game is a simple JavaScript game for beginners. I have shared many more types of JavaScript game tutorials with you before. However, this design is quite simple.

This Number Guessing Game JavaScript will basically help you to know how to create JavaScript games. The number guessing game project will help you understand how accurate your input number is. That means there is a number limit here.

You have to guess any one of those numbers. If your guess number is equal to the number guessed by the game then you will win.

The javascript guessing game is a simple project that will help you to learn more about javascript. If you want to make a JavaScript game for the first time then you can try to make this Number Guessing Game in JavaScript.

Number Guessing Game JavaScript

Below is a demo that will help you get a preview of this number guessing game HTML. Here I have shared step-by-step tutorials and source code. Use the button below the article if you want to download the source code.

Has created a box on a web page as you can see above. In which a heading is used first then an input space. You will input the number you guessed in that input space.

Then there is a button that will submit the number you guessed. Then there is a display where you can see the results of this game. Below all is a heading that will help you to know if your input number is correct.

I did not use very complex JavaScript to create this Number Guessing Game JavaScript. If you know something about javascript then you can easily create this number guessing game HTML.

How To Make Number Guessing Game JavaScript

Hopefully watching the demo above has aroused your interest in making this project. To build it you must have a basic idea of HTML CSS JavaScript.

But if you are a beginner, there is no reason to worry. Here I have shared step-by-step tutorials and shown possible results with pictures after each step.

Step 1: Basic structure of Guessing Game

A basic structure of this project has been created using the following HTML and CSS codes. Basically, I made a box on the web page.

Here we have used blue as the background color of the webpage and white as the background color of the box. Box min-width: 350px, max-width: 400px used.

<div class=”container”>
</div>
*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  background: rgb(23, 99, 196);
}
.container{
  position: absolute;
  width: 50%;
  min-width: 350px;
  max-width: 400px;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  background-color: #ffffff;
  padding: 50px 10px;
  border-radius: 5px;
  display: grid;
  justify-items: center;
  font-family: ‘Poppins’,sans-serif;
}

Step 2: Add a heading in the box

Now I have added a heading in this JavaScript Number Guessing Game. This heading is for beauty only.

Blue color and text color white are used in the background. I used font-size: 23px to increase the text size a bit.

<div class=”heading”>Number Guessing Game</div>
.heading{
  background: rgb(10, 56, 110);
  color: white;
  width: 100%;
  text-align: center;
  font-size: 23px;
  height: 35px;
  margin-top: -50px;
}

Now I have added another text. Which will basically help you to know how much input can be put in that box. As I said before in this input box you can input any number from 1 to 15.

<h3>Guess a number between 1-15.</h3>
h3{
  font-size: 20px;
  font-weight: 600;
  color: rgb(12, 130, 200);
  font-family: sans-serif;
}

Step 3: Input box to input the guessing number

Now I have created an input box using the input function. Depending on the width: 200px and height padding: 10px 0 in this box.

A blue border of 2 pixels is used around the input and font-size: 28px is used to increase the text size.

<input type=”text” placeholder=”Input Number” id=”guess”>
input[type=”text”]{
  width: 200px;
  font-weight: 600;
  color: #663399;
  padding: 10px 0;
  text-align: center;
  margin-top: 30px;
  border-radius: 5px;
  border: 2px solid #545050;
  font-size: 28px;
}
input[type=”text”]::placeholder{
  font-size: 20px;
  color: rgb(16, 41, 96);
}

Input box to input the guessing number

Step 4: Create a button for Number Guessing Game

Now I have created a button that will help you to submit the input number. Depending on the width: 160px and height padding: 15px 0 of this button. I used the background color blue and the text color white.

<button onclick=”play()” id=”my_btn”>GUESS</button>
button{
  width: 160px;
  padding: 15px 0;
  border-radius: 5px;
  background-color: #1353d0;
  color: #ffffff;
  border: none;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 30px;
  outline: none;
}

Step 5: Display to see the results of the game

Now I have made a small display in which various information related to your result can be found. This means that you can see here how many numbers you have inputted and how many times you have inputted the number. Min-width of the box is 300px and here shadows have been used to enhance the beauty.

<div class=”display”>
  <p id=”message3″></p>
  <p id=”message2″>Guessed Numbers are: None</p>
</div>
.display{
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
  min-width: 300px;
  padding: 10px;
  text-align: center;
}
p{
  font-weight: 400;
}

Now we have created another heading that will help you to understand the performance of the input number.

<p id=”message1″>No. Of Guesses: 0</p>
#message1{
  margin-top: 30px;
  font-size: 20px;
  color: rgb(17, 53, 182);
}

Step 6: Activate Number Guessing Game with JavaScript

Above we have created various types of input boxes, submit buttons, and displays using HTML CSS. Now is the time to implement this Number Guessing Game with JavaScript.

For this, you need to have a basic idea about JavaScript. First the global constant of some HTML functions has been determined.

 var msg1 = document.getElementById(“message1”);
 var msg2 = document.getElementById(“message2”);
 var msg3 = document.getElementById(“message3”);
 // random value generated
//The result of the game has been stored in ‘answer’.
//This result is created randomly which will be different every time.
 var answer = Math.floor(Math.random()*15) + 1;
 var no_of_guesses = 0;
 var guessed_nums = [];
function play(){ 
//The value of the input box is stored in a constant called ‘user guess’.
   var user_guess = document.getElementById(“guess”).value;
//When your input number is less than 1 and more than 15 then you can see the following text
   if(user_guess < 1 || user_guess > 15){
       alert(“Please enter a number between 1 and 15.”);
   }
//The following conditions will work when your input number is between 1 and 15
   else{
       guessed_nums.push(user_guess);
       no_of_guesses+= 1;
//When the random number generated by the game is less than the user’s input number, then the following text can be seen.
       if(user_guess < answer){
          msg1.textContent = “Your guess is too low.😪”;
          msg2.textContent = “No. of guesses: ” + no_of_guesses;
          msg3.textContent = “Guessed numbers are: ” +
            guessed_nums;
       }
//When the random number generated by the game exceeds the user’s input number, the following text can be seen.
       else if(user_guess > answer){
          msg1.textContent = “Your guess is too high.😲”;
          msg2.textContent = “No. of guesses: ” + no_of_guesses;
          msg3.textContent = “Guessed numbers are: ” +
             guessed_nums;
       }
//When the random number generated by the game and the user’s input number are the same then the following text can be seen.
       else if(user_guess == answer){
          msg1.textContent = “Yippie You Win!!😍😍”;
          msg2.textContent = “The number was: ” + answer;
          msg3.textContent = “You guessed it in “+ no_of_guesses + ” guesses”;
          document.getElementById(“my_btn”).disabled = true;
       }
    }
 }

Hopefully, you can learn from the above tutorial how to create a number guessing game project. If there is any problem you can let me know by commenting on Instagram.

Original article source at: https://foolishdeveloper.com/

#javascript #number #game

Nat Grady

1676307000

How to Make Simple Number Guessing Game in JavaScript

In this tutorial you will learn how to make simple number guessing game using html css and javascript. If you know basic javascript then you can make this javascript number guessing game very easily.

There are many number guessing game javascript tutorials on internet. But here I will tell you completely step by step how you can make it.

Simple Number Guessing Game in JavaScript

Have you ever wanted to create a simple and fun game that you can play in your browser? If so, then you might want to try building a number guessing game in JavaScript! This game is a great way to get started with JavaScript and it’s not too difficult to create.

JavaScript Game For Beginners (7 Part Series)

1 Snake Game using HTML CSS JavaScript
2 Simple Number Guessing Game in JavaScript
3 Rock Paper Scissors Game in JavaScript and HTML
4 Simple Math Game In JavaScript & HTML
5 JavaScript Quiz App For Beginners
6 How to build a Simon Game with JavaScript
7 How to build a Tic Tac Toe Game with JavaScript

Number Guessing Game Javascript

A number guessing game is a simple game where the computer randomly generates a number and the player tries to guess what that number is. In this example, I will show you how to implement this game using JavaScript.

The goal of the game is to guess a random number between 1 and 100, and the program will give you hints on whether your guess is too high or too low. You keep guessing until you guess the correct number, and then the program will tell you how many attempts it took to get the right answer.

If you are new to javascript then number guessing game javascript will suit you. This type of number guessing game html will help you learn a lot about javascript.

As you can see in the preview above, I first created a box on a web page to create this number guessing game javascript. Then there is a heading or text used to give you some instructions about the game.

Then there is an input box in which to input your guessed number. Then click on the submit button below and your entered number will be submitted. Then this javascript is arranged to show the result of number guessing game.

How to create a JavaScript Number Guessing Game

Now it’s time to know step by step how to create this project (How to create a number guessing game in JavaScript?).

This Guess a Random Number game doesn’t require much coding knowledge to make. If you know basic html css and javascript then you can easily make number guessing game.

Step 1: Basic structure of number guessing game

I have created the basic structure of this Number Guessing Game Javascript using the following HTML and CSS. Then using some CSS the basic structure and added tests are designed here.

<div class="container">
  <h3>I am thinking of a number between 1-100.</h3>
  <h3>Can you guess it?</h3>
</div>

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background:#033e97;
}
.container{
    position: absolute;
    width: 380px;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    background-color: #ffffff;
    padding: 50px 10px;
    border-radius: 5px;
    display: grid;
    justify-items: center;
    font-family: 'Poppins',sans-serif;
}
h3{
    font-size: 16px;
    font-weight: 600;
}

number guessing game javascript

Step 2: Create input box and submit button

I have created an input box for input and for submit I need to create a submit button. html input is used to create the input box.

In the submit button I have used onclick=”play()” which will basically help to submit the information you input. Then using some CSS we will design it i.e. design this input field and submit button.

<input type="text" placeholder="Num" id="guess"><br>
<button onclick="play()" id="my_btn">GUESS</button>

input[type="text"]{
    width: 90px;
    font-weight: 600;
    color: #663399;
    padding: 20px 0;
    text-align: center;
    margin-top: 30px;
    border-radius: 5px;
    border: 2px solid #202020;
    font-size: 28px;
}
button{
    width: 160px;
    padding: 15px 0;
    border-radius: 5px;
    background-color: #663399;
    color: #ffffff;
    border: none;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 30px;
    outline: none;
}

Create input box and submit button

Step 3: Result of number guessing game

Now we have to create the place to show the result in this Number Guessing Game Javascript. For this I added three tests using paragraphs. The results of this game can be found in those texts which we will activate by javascript.

<p id="message1">No. Of Guesses: 0</p>
<p id="message2">Guessed Numbers are: None</p>
<p id="message3"></p>

p{
    font-weight: 400;
}

Result of number guessing game

Step 4: Activate the guessing game with JavaScript

Now it’s time to activate this JavaScript Random Number Guessing Game with JavaScript. Very simple JavaScript code is used here. Even if you know basic JavaScript, you can easily create Number Guessing Game In JavaScript.

Below I have given the code and necessary explanation so you won’t have much trouble.

var msg1 = document.getElementById("message1");
var msg2 = document.getElementById("message2");
var msg3 = document.getElementById("message3");

var answer = Math.floor(Math.random()*100) + 1;
var no_of_guesses = 0;
var guessed_nums = [];

This code appears to be defining some JavaScript variables for a number guessing game. msg1, msg2, and msg3 are variables that refer to elements in an HTML document with the id attribute of “message1”, “message2”, and “message3” respectively.

answer is a randomly generated number between 1 and 100, generated using the Math.random() function and Math.floor() method.

no_of_guesses is a variable that will keep track of the number of guesses made by the player.

guessed_nums is an array that will keep track of all the numbers guessed by the player so far.

function play(){
    var user_guess = document.getElementById("guess").value;
    if(user_guess < 1 || user_guess > 100){
        alert("Please enter a number between 1 and 100.");
    }
    else{
        guessed_nums.push(user_guess);
        no_of_guesses+= 1;

        if(user_guess < answer){
            msg1.textContent = "Your guess is too low.";
            msg2.textContent = "No. of guesses: " + no_of_guesses;
            msg3.textContent = "Guessed numbers are: " +
            guessed_nums;
        }
        else if(user_guess > answer){
            msg1.textContent = "Your guess is too high.";
            msg2.textContent = "No. of guesses: " + no_of_guesses;
            msg3.textContent = "Guessed numbers are: " +
            guessed_nums;
        }
        else if(user_guess == answer){
            msg1.textContent = "Yippie You Win!!";
            msg2.textContent = "The number was: " + answer;
            msg3.textContent = "You guessed it in "+ no_of_guesses + " guesses";
            document.getElementById("my_btn").disabled = true;
        }
    }
}

This code defines the play() function, which is likely to be called when the player submits their guess. The function does the following:

Get the value of the user’s guess by accessing the “guess” element in the HTML document and retrieving its value.

Check if the user’s guess is outside the valid range (1 to 100). If it is, an alert is displayed to ask the user to enter a number within the range.

If the guess is within the valid range, the following steps are performed:

The guess is added to the guessed_nums array using the push() method.
The number of guesses is incremented by 1 using the no_of_guesses variable.
The code checks if the user’s guess is less than, greater than, or equal to the answer. Based on the result, one of three messages are displayed to the user: “Your guess is too low.”, “Your guess is too high.”, or “Yippie You Win!!”. The messages are displayed by setting the textContent property of the msg1, msg2, and msg3 elements respectively.
If the user wins, the “my_btn” element’s disabled property is set to true, which will likely disable the button used to submit guesses.

Simple Number Guessing Game in JavaScript

Hopefully from this tutorial you have learned how I created this JavaScript Game Number Guessing. Earlier I have shared many more JavaScript game tutorials with you.

Please comment how you like this number guessing game javascript tutorial. Use the download button below for the complete source code of this javascript guessing game.

Original article source at: https://foolishdeveloper.com/

#javascript #game #number