Crack-The-Code Game using JavaScript
Last Updated :
29 Jul, 2024
Improve
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.
Filename: index.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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
crossorigin="anonymous">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
crossorigin="anonymous">
</script>
<!-- Bootstrap CDN ends -->
<!-- Font Awesome kit --- for icons -->
<script src="https://kit.fontawesome.com/788fc8cac3.js"
crossorigin="anonymous">
</script>
<!-- Google font CDN for Yeon Sung font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<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
// 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.
When answer is wrong
When you crack it
