Web Based Game Using JavaScript

In this tutorial, I will discuss how we can create a web-based small game using HTML, CSS, and JavaScript.

INTRODUCTION

 
Here, I will discuss how can we create a simple web-based game using web technologies, like HTML, CSS, JavaScript, and jQuery.
 

Requirement and specification

 
There is a game called “Catch My Santa”. I will develop the game as per the below designs and rules and steps for the game
  1. Santa Mania is as simple as it gets. All you need to do is tap on boxes that contain the 'Santa hat'.
  2. There are a total of 9 boxes in the 3x3 grid.
  3. There will be Santa hats appearing and disappearing randomly in those boxes.
  4. You will have to tap on the box (or click on the box having the Santa hat, if you're on a desktop or a laptop) containing the Santa hat. Every correct tap will get you 10 points.
  5. Santa Mania runs for 30 seconds so try to tap on as many Santa hats possible and ramp up the points earned.
  6. While playing Santa Mania you will notice a 3x3 grid of boxes. ‘Santa’s hat’ will pop up randomly in these boxes.
  7. In order to gain points, you will have to tap on the box with the ‘Santa hat’ or click on the boxes with the ‘Santa hats’ (if you’re on a desktop or laptop).
  8. Each time you are able to tap on Santa’s hat before it disappears you will gain points.
  9. Every successful tap on Santa's hat gets you 10 points.
  10. You will have a total duration of 30 seconds to try and tap on as many Santa hats as possible.
Coding
 
Open your Notepad++ to create an HTML file, name it index.html, place the below code into this HTML file.
  1. <html>    
  2. <head>    
  3.     <title>Catch My Santa</title>    
  4.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />    
  5.     <link rel="stylesheet" type="text/css" href="CMSCss.css" />    
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>    
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>    
  9.     <script src="CMSJs.js"></script>    
  10. </head>    
  11. <body>    
  12.     <div class="container">    
  13.         <div class="row m_t_2">    
  14.             <div class="col-sm-3">    
  15.                 I am    
  16.                 <Strong><span id="userName"></span></Strong>    
  17.             </div>    
  18.             <div class="col-sm-3">    
  19.                 My score is:    
  20.                 <strong><span id="score_board"></span></strong>    
  21.             </div>    
  22.             <div class="col-sm-3">    
  23.                 Times remaining    
  24.                 <Strong><span id="time_counter"></span></Strong>    
  25.             </div>    
  26.     
  27.         </div>    
  28.         <div class="row" style="padding-top: 2%;">    
  29.             <div class="col-sm-4" onclick="AddScore(this)">    
  30.                 <div class="card">    
  31.                     <div class="card-body m_m_h">    
  32.                     </div>    
  33.                 </div>    
  34.             </div>    
  35.             <div class="col-sm-4" onclick="AddScore(this)">    
  36.                 <div class="card">    
  37.                     <div class="card-body m_m_h">    
  38.                     </div>    
  39.                 </div>    
  40.             </div>    
  41.             <div class="col-sm-4" onclick="AddScore(this)">    
  42.                 <div class="card">    
  43.                     <div class="card-body m_m_h">    
  44.                     </div>    
  45.                 </div>    
  46.             </div>    
  47.         </div>    
  48.         <div class="row m_t_cards">    
  49.             <div class="col-sm-4" onclick="AddScore(this)">    
  50.                 <div class="card">    
  51.                     <div class="card-body m_m_h">    
  52.                     </div>    
  53.                 </div>    
  54.             </div>    
  55.             <div class="col-sm-4" onclick="AddScore(this)">    
  56.                 <div class="card">    
  57.                     <div class="card-body m_m_h">    
  58.                     </div>    
  59.                 </div>    
  60.             </div>    
  61.             <div class="col-sm-4" onclick="AddScore(this)">    
  62.                 <div class="card">    
  63.                     <div class="card-body m_m_h">    
  64.                     </div>    
  65.                 </div>    
  66.             </div>    
  67.         </div>    
  68.         <div class="row m_t_cards">    
  69.             <div class="col-sm-4" onclick="AddScore(this)">    
  70.                 <div class="card">    
  71.                     <div class="card-body m_m_h">    
  72.                     </div>    
  73.                 </div>    
  74.             </div>    
  75.             <div class="col-sm-4" onclick="AddScore(this)">    
  76.                 <div class="card">    
  77.                     <div class="card-body m_m_h">    
  78.                     </div>    
  79.                 </div>    
  80.             </div>    
  81.             <div class="col-sm-4" onclick="AddScore(this)">    
  82.                 <div class="card">    
  83.                     <div class="card-body m_m_h">    
  84.                     </div>    
  85.                 </div>    
  86.             </div>    
  87.         </div>    
  88.         <!-- result modal starts here -->    
  89.         <div class="modal" id="modalCatchMySanta" data-keyboard="false" data-backdrop="static">    
  90.             <div class="modal-dialog">    
  91.                 <div class="modal-content">    
  92.     
  93.                     <!-- Modal Header -->    
  94.                     <div class="modal-header">    
  95.                         <h4 class="modal-title">Catch My Santa</h4>    
  96.                     </div>    
  97.     
  98.                     <!-- Modal body -->    
  99.                     <div class="modal-body">    
  100.                         Your score is <span id="span_Score"></span>    
  101.                     </div>    
  102.     
  103.                     <!-- Modal footer -->    
  104.                     <div class="modal-footer">    
  105.                         <button type="button" class="btn btn-danger" onclick="TryAgain()" data-dismiss="modal">Try Again</button>    
  106.                         <button type="button" class="btn btn-danger" onclick="GameClose()" data-dismiss="modal">Close</button>    
  107.                     </div>    
  108.     
  109.                 </div>    
  110.             </div>    
  111.         </div>    
  112.         <!--result modal ends here -->    
  113.         <!-- login modal starts here -->    
  114.         <div class="modal" id="modalLogin" data-keyboard="false" data-backdrop="static">    
  115.             <div class="modal-dialog">    
  116.                 <div class="modal-content">    
  117.     
  118.                     <!-- Modal body -->    
  119.                     <div class="modal-body" id="modalBodyLogin">    
  120.                         <div class="form-group">    
  121.                             <label for="Name">Name:</label>    
  122.                             <input type="text" placeholder="Enter your first name" class="form-control user_field" id="txtName" autocomplete="off">    
  123.                         </div>    
  124.                         <div class="form-group">    
  125.                             <label for="sel1">Level:</label>    
  126.                             <select class="form-control user_field" id="ddlLevel">    
  127.                                 <option>Beginer</option>    
  128.                                 <option>Intermediate</option>    
  129.                                 <option>Pro</option>    
  130.                             </select>    
  131.                         </div>    
  132.     
  133.                     </div>    
  134.     
  135.                     <!-- Modal footer -->    
  136.                     <div class="modal-footer">    
  137.                         <div class="pull-left">    
  138.                             <span class="pull-left" id="spanError"></span>    
  139.                         </div>    
  140.                         <div class="pull-right">    
  141.                             <button type="button" class="btn btn-danger" id="btnPlay" data-dismiss="modal">Play</button>    
  142.                         </div>    
  143.                     </div>    
  144.                 </div>    
  145.             </div>    
  146.         </div>    
  147.         <!--login modal ends here -->    
  148.     </div>    
  149. </body>    
  150. </html>    
Create a CSS file named CMSCss.css,  place the below code into the css file.
  1. .form-control:focus {  
  2.     border-color#cccccc;  
  3.     -webkit-box-shadow: none;  
  4.     box-shadow: none;  
  5. }  
  6.   
  7. .append_Image {  
  8.     background-imageurl("santa.ico");  
  9.     background-repeatno-repeat;  
  10.     background-positioncenter;  
  11. }  
  12.   
  13. .m_t_2 {  
  14.     margin-top2%;  
  15. }  
  16.   
  17. .m_m_h {  
  18.     min-height206px;  
  19.     max-height206px;  
  20. }  
  21.   
  22. .m_t_cards {  
  23.     margin-top1%;  
  24. }  
  25.   
  26. #modalBodyLogin {  
  27.     background-imageurl("santa.ico");  
  28.     background-repeatno-repeat;  
  29.     background-positioncenter;  
  30. }  
  31.   
  32. .user_field {  
  33.     bordernone;  
  34.     border-bottom1px solid red;  
  35.     border-radius: 10px;  
  36.     opacity: .4;  
  37.     filter: drop-shadow(10px 10px 12px red);  
  38. }  
Create a JavaScript file, name it CMSJs.js, and place the below code into the JS file.
  1. var score = 0;  
  2. window.onload = function () {  
  3.     $("#modalLogin").modal('show');  
  4.     $("#txtName").focusout(function () {  
  5.         ValidateUser($("#txtName").val());  
  6.     })  
  7.  $("#txtName").focusin(function () {  
  8.         $("#txtName").val('');  
  9.  $("#spanError").text('');  
  10.     })  
  11.     document.getElementById("score_board").innerHTML = score;  
  12.     $("#btnPlay").click(function () {  
  13.         if (ValidateUser($("#txtName").val()) == true) {  
  14.             $("#userName").text($("#txtName").val().toUpperCase());  
  15.             $("#modalLogin").modal('hide');  
  16.             var timeLeft = 30;  
  17.             var elem = document.getElementById("time_counter");  
  18.             var timerId = setInterval(countdown, 1000);  
  19.             function countdown() {  
  20.                 if ((Number(timeLeft) < 31 && Number(timeLeft) > 0)) {  
  21.                     elem.innerHTML = timeLeft;  
  22.                     randomNumberGenerate();  
  23.                     timeLeft--;  
  24.                 }  
  25.                 if (Number(timeLeft) == 0) {  
  26.                     GetResult();  
  27.                 }  
  28.                 else {  
  29.   
  30.                     return false;  
  31.                 }  
  32.             }  
  33.             function randomNumberGenerate() {  
  34.                 var min = 0;  
  35.                 var max = 8;  
  36.                 var random = Math.floor(Math.random() * (+max - +min)) + +min;  
  37.                 $(".card-body").eq(random).addClass("append_Image");  
  38.                 $(".col-sm-4").eq(random).addClass("score");  
  39.                 setTimeout(function () {  
  40.                     $(".card-body").eq(random).removeClass('append_Image');  
  41.                     $(".col-sm-4").eq(random).removeClass("score");  
  42.                 }, 1000);  
  43.             }  
  44.         }  
  45.         else {  
  46.             return false;  
  47.         }  
  48.     })  
  49. }  
  50. function AddScore(elem) {  
  51.     if ($(elem).hasClass("score")) {  
  52.         score += 10;  
  53.         document.getElementById("score_board").innerHTML = score;  
  54.     }  
  55. }  
  56. function GetResult() {  
  57.   
  58.     $("#span_Score").text(score);  
  59.     setTimeout(function () {  
  60.         $("#modalCatchMySanta").modal('show');  
  61.     }, 1300);  
  62. }  
  63. function GameClose() {  
  64.     window.close();  
  65. }  
  66. function TryAgain() {  
  67.     location.reload();  
  68. }  
  69. function ValidateUser(name) {  
  70.     var returnVal = false;  
  71. $("#spanError").text("");  
  72.     var name_regex = /^[a-zA-Z]+$/;  
  73.     if (!name.match(name_regex)) {  
  74.         $("#spanError").text("Enter a valid first name");  
  75.     }  
  76.     else {  
  77.         returnVal = true;  
  78.     }  
  79.     return returnVal;  
  80. }  
After completing the above things, download a Santa hat icon and name it Santa.ico.
 

Summary

 
Using the above code, we can create a simple web-based game application. I hope it will help the beginners.