It is quite easy to develop with some simple mathematics. A 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, and Bootstrap.
View of Crack-The-Code
Filename: index.html
HTML
<!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 href=
"https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" 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>
|
Filename: script.js
Javascript
// 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');
}
} |
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!