Skip to content
Related Articles

Related Articles

Crack-The-Code Game using JavaScript
  • Last Updated : 31 Dec, 2020

How to implement a Crack-The-Game game using JavaScript?

It is quite easy to develop with some simple mathematics. Player has to guess the 3 numbers in order to win this game by using 5 simple hints. This is going to be a very interesting game. This game is built using simple mathematics in JavaScript.

Prerequisites: Basic knowledge of some front-end technologies like HTML, CSS, JavaScript, Bootstrap 4.

View of Crack-The-Code

Filename: index.html

HTML



filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
        initial-scale=1, shrink-to-fit=no">
  
    <title>Crack-The-Code Game</title>
  
    <!-- Bootstrap CDN starts-->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
  
        crossorigin="anonymous">
    </script>
  
    <script src=
        crossorigin="anonymous">
    </script>
      
    <script src=
        crossorigin="anonymous">
    </script>
    <!-- Bootstrap CDN ends -->
  
    <!-- Font Awesome kit --- for icons -->
        crossorigin="anonymous">
    </script>
  
    <!-- Google font CDN for Yeon Sung font -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href=
        rel="stylesheet">
    <!-- Google font CDN ends -->
  
    <!-- Internal CSS -->
    <style>
        * {
            font-family: 'Yeon Sung', cursive;
        }
  
        input {
            width: 60px;
            height: 40px;
            border-radius: 5px;
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <!--Popup Modal -->
    <div class="modal fade" id="popup" tabindex="-1" 
        role="dialog" aria-labelledby="popupLabel" 
        aria-hidden="true">
          
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger 
                        font-weight-bold" id="popupLabel">
                        Pop Up
                    </h5>
                      
                    <button type="button" class="close" 
                        data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h3 id="result" class="text-center"></h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn 
                        btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Popup Modal -->
  
    <div class="container my-4">
        <h1 class="text-center my-4"><i class="fas 
                fa-unlock-alt"></i> Crack The Code</h1>
  
        <!-- 3 input fields -->
        <div class="text-center">
            <input type="text" id="b1">
            <input type="text" id="b2">
            <input type="text" id="b3">
            <br />
            <!-- Button to check result -->
            <button class="btn btn-secondary mt-4" 
                onclick="myfunc();">
                <i class="fas fa-key"></i> Check
            </button>
        </div>
        <hr>
  
        <!-- Hints starts -->
        <div id="hints" class="row m-auto">
            <div id="hintOne">
                <div class="card m-4" style="width: 18rem;">
                    <div class="card-header card-title">
                        <h5 class="card-title text-center">
                            <i class="far fa-lightbulb"></i>
                            Hint #1
                        </h5>
                    </div>
                    <div class="card-body">
                        <p id="h1" class="text-center"></p>
  
                        <h5 class="text-center">
                            One Number is correct and 
                            well placed
                        </h5>
                    </div>
                </div>
  
            </div>
            <div id="hintTwo">
                <div class="card m-4" style="width: 18rem;">
                    <div class="card-header card-title">
                        <h5 class="card-title text-center">
                            <i class="far fa-lightbulb"></i
                            Hint #2
                        </h5>
                    </div>
                    <div class="card-body">
                        <p id="h2" class="text-center"></p>
  
                        <h5 class="text-center">
                            One Number is correct but wrong placed
                        </h5>
                    </div>
                </div>
            </div>
            <div id="hintThree">
                <div class="card m-4" style="width: 18rem;">
                    <div class="card-header card-title">
                        <h5 class="card-title text-center">
                            <i class="far fa-lightbulb"></i
                            Hint #3
                        </h5>
                    </div>
                    <div class="card-body">
                        <p id="h3" class="text-center"></p>
  
                        <h5 class="text-center">
                            Two numbers are correct but 
                            wrong placed
                        </h5>
                    </div>
                </div>
            </div>
            <div id="hintFour">
                <div class="card m-4" style="width: 18rem;">
                    <div class="card-header card-title">
                        <h5 class="card-title text-center">
                            <i class="far fa-lightbulb"></i
                            Hint #4
                        </h5>
                    </div>
                    <div class="card-body">
                        <p id="h4" class="text-center"></p>
  
                        <h5 class="text-center">
                            Nothing is Correct
                        </h5>
                    </div>
                </div>
            </div>
            <div id="hintFive">
                <div class="card m-4" style="width: 18rem;">
                    <div class="card-header card-title">
                        <h5 class="card-title text-center">
                            <i class="far fa-lightbulb"></i
                            Hint #5
                        </h5>
                    </div>
                    <div class="card-body">
                        <p id="h5" class="text-center"></p>
  
                        <h5 class="text-center">
                            One Number is correct but 
                            wrong placed
                        </h5>
                    </div>
                </div>
            </div>
        </div>
        <!-- Hints ends -->
  
    </div>
</body>
<!-- JavaScript file included -->
<script src="script.js"></script>
  
</html>

chevron_right


Filename: script.js

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

// Number to decide the game digit i.e. 
// game work on 2 digit, 3 digit or n
// digit of number.
const digit = 100;
  
// Set random numbers. The task of user 
// is to find these numbers.
let num1 = Math.floor(Math.random() * digit);
let num2 = Math.floor(Math.random() * digit);
let num3 = Math.floor(Math.random() * digit);
  
// Hints are generated here onwards.
// Hint 1
let h1_a = Math.floor(Math.random() * digit);
let h1_b = Math.floor(Math.random() * digit);
let h1_c = num3;
  
// Hint 2
let h2_a = Math.floor(Math.random() * digit);
let h2_b = Math.floor(Math.random() * digit);
let h2_c = num2;
  
//Hint 3
let h3_a = num2;
let h3_b = num1;
let h3_c = Math.floor(Math.random() * digit);
  
// Hint 4
let h4_a = Math.floor(Math.random() * digit);
let h4_b = Math.floor(Math.random() * digit);
let h4_c = Math.floor(Math.random() * digit);
  
// Hint 5
let h5_a = Math.floor(Math.random() * digit);
let h5_b = Math.floor(Math.random() * digit);
let h5_c = num1;
  
// Hint generation ends
  
// Putting hints to index.html page
document.getElementById('h1').innerHTML = 
    `<input type="text" id="b1" value="${h1_a}
    " readonly> <input type="text" id="b1" value="
    ${h1_b}" readonly> <input type="text" id="b1" 
    value="${h1_c}" readonly>  `;
  
document.getElementById('h2').innerHTML = 
    `<input type="text" id="b1" value="${h2_a}
    " readonly> <input type="text" id="b1" 
    value="${h2_b}" readonly> <input type="text" 
    id="b1" value="${h2_c}" readonly>  `;
  
document.getElementById('h3').innerHTML = 
    `<input type="text" id="b1" value="${h3_a}
    " readonly> <input type="text" id="b1" 
    value="${h3_b}" readonly> <input type="text" 
    id="b1" value="${h3_c}" readonly>  `;
  
document.getElementById('h4').innerHTML = 
    `<input type="text" id="b1" value="${h4_a}
    " readonly> <input type="text" id="b1" 
    value="${h4_b}" readonly> <input type="text" 
    id="b1" value="${h4_c}" readonly>  `;
  
document.getElementById('h5').innerHTML = 
    `<input type="text" id="b1" value="${h5_a}
    " readonly> <input type="text" id="b1" 
    value="${h5_b}" readonly> <input type="text" 
    id="b1" value="${h5_c}" readonly>  `;
  
// Function to check whether game is solved or not
function myfunc() {
  
    // Getting value of user though input fields.
    let a = document.getElementById('b1').value;
    let b = document.getElementById('b2').value;
    let c = document.getElementById('b3').value;
  
    // Checking whether input fields is blank or not
    if (a != '' && b != '' && c != '') {
        if (a == num1 && b == num2 && c == num3) {
  
            // Outputting this message to index.html
            // page with id result.
            $('#result').html('You Crack it.????');
  
            // Opening popup modal
            $('#popup').modal('toggle');
        } else {
  
            // Outputting this message to index.html
            // page with id result.
            $('#result').html('Try once again.????');
  
            // Opening popup modal
            $('#popup').modal('toggle')
        }
    }
    else {
          
        // Outputting this message to index.html
        // page with id result.
        $('#result').html('Fill all fields.????');
  
        // Opening popup modal
        $('#popup').modal('toggle');
    }
}

chevron_right


Step to run the program:

Run the index.html file by opening it in any browser.

Output:

When player left the input field blank.

Input Fields is Blank

When answer is wrong

Wrong Answer!

When you crack it

You Crack it!

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :