Post
Ask Question

Mind Tickling Riddles Game Using jQuery

In order to work with jQuery, you should be aware of the basics of JavaScript, HTML and CSS. Before I start this tutorial, I assume that you are familiar with HTML, CSS and jQuery. I also assume that you know what jQuery is and how to use it in your pages.

Where to download?

jQuery scripting file can be downloaded from jQuery Official website:

Chapter 1

In this chapter I will show you how you can create interactive game using jQuery, HTML 5 and CSS3 through step by step approch. It consists three major parts.

  1. Creating HTML elements
  2. Styling with CSS
  3. Scripting with JQuery

Process flow diagram

The following figure defines the entire process flow diagram:

Process flow diagram
                                          Figure 1: Process flow diagram

Part 1: HTML

Before I start this tutorial, I assume that you are familiar with HTML, CSS and jQuery. I also assume that you understand what jQuery is and how to use it in your pages.

Use basic HTML code to create the HTML elements. The following is the HTML code I have used in this tutorial.

  1. <!doctype html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7.   
  8. <body <form>  
  9.     <img src="Images/bulb_mind_brain_svg-256.png" alt="hi" style="width:256px;height:256px;">  
  10.     <br>  
  11.     <br>  
  12.     <div style="text-align:center;">  
  13.         <div id="scr">YOUR SCORE : </div>  
  14.         <div id="output">00</div>  
  15.   
  16.     </div>  
  17.     <br>  
  18.     <br>  
  19.     <br>  
  20.     <input type="button" class="styled-button-2" id="btnShowSimple" value="START" />     
  21.     <input type="button" class="styled-button-2" id="btnShowModal" value="RESTART" />  
  22.     <br />  
  23.     <br />  
  24.     <div id="output"></div>  
  25.     <div id="overlay" class="web_dialog_overlay"></div>  
  26.     <div id="dialog" class="web_dialog">  
  27.         <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">  
  28.             <tr>  
  29.                 <td class="web_dialog_title"></td>  
  30.                 <td class="web_dialog_title align_right">  
  31.                     <a href="#" id="btnClose">Close</a>  
  32.                 </td>  
  33.             </tr>  
  34.             <td> </td>  
  35.             <td> </td>  
  36.             <tr>  
  37.                 <td style="text-align: center" ;>  
  38.                     Time Left <b id="countdown"></b> seconds     
  39.                     <img src="Images/Alarm.png" alt="Timer" style="width:48px;height:48px;">  
  40.                 </td>  
  41.             </tr>  
  42.             <tr>  
  43.                 <td> </td>  
  44.             </tr>  
  45.             <tr>  
  46.                 <td colspan="2" style="padding-left: 15px;">  
  47.                 </td>  
  48.             </tr>  
  49.             <tr>  
  50.                 <td> </td>  
  51.                 <td> </td>  
  52.             </tr>  
  53.             <tr>  
  54.                 <td colspan="2" style="padding-left: 15px;">  
  55.                     <div id="shuffle">  
  56.                         <div class="cell"></div>  
  57.                         <div class="cell"></div>  
  58.                         <div class="cell"></div>  
  59.                         <div class="cell"></div>  
  60.                         <div class="cell"></div>  
  61.                         <div class="cell"></div>  
  62.                         <div class="cell"></div>  
  63.                         <div class="cell"></div>  
  64.                         <div class="cell"></div>  
  65.                         <div class="cell"></div>  
  66.                         <div class="cell"></div>  
  67.                         <div class="cell"></div>  
  68.                         <div class="cell"></div>  
  69.                         <div class="cell"></div>  
  70.                         <div class="cell"></div>  
  71.                         <div class="cell"></div>  
  72.                         <div class="cell"></div>  
  73.                         <div class="cell"></div>  
  74.                         <div class="cell"></div>  
  75.                         <div class="cell"></div>  
  76.                         <div class="cell"></div>  
  77.                         <div class="cell"></div>  
  78.                         <div class="cell"></div>  
  79.                         <div class="cell"></div>  
  80.                         <div class="cell"></div>  
  81.                         <div class="cell"></div>  
  82.                         <div class="cell"></div>  
  83.                         <div class="cell"></div>  
  84.                         <div class="cell"></div>  
  85.                         <div class="cell"></div>  
  86.                         <div class="cell"></div>  
  87.                         <div class="cell"></div>  
  88.                         <div class="cell"></div>  
  89.                         <div class="cell"></div>  
  90.                         <div class="cell"></div>  
  91.                         <div class="cell"></div>  
  92.                         <div class="cell"></div>  
  93.                         <div class="cell"></div>  
  94.                         <div class="cell"></div>  
  95.                         <div class="cell"></div>  
  96.                         <div class="cell"></div>  
  97.                         <div class="cell"></div>  
  98.                         <div class="cell"></div>  
  99.                         <div class="cell"></div>  
  100.                         <div class="cell"></div>  
  101.                         <div class="cell"></div>  
  102.                         <div class="cell"></div>  
  103.                         <div class="cell"></div>  
  104.                         <div class="cell"></div>  
  105.                         <div class="cell"></div>  
  106.                         <div class="cell"></div>  
  107.                         <div class="cell"></div>  
  108.                         <div class="cell"></div>  
  109.                         <div class="cell"></div>  
  110.                         <div class="cell"></div>  
  111.                         <div class="cell"></div>  
  112.                         <div class="cell"></div>  
  113.                         <div class="cell"></div>  
  114.                         <div class="cell"></div>  
  115.                         <div class="cell"></div>  
  116.                         <div class="cell"></div>  
  117.                         <div class="cell"></div>  
  118.                         <div class="cell"></div>  
  119.                         <div class="cell"></div>  
  120.                         <div class="cell"></div>  
  121.                         <div class="cell"></div>  
  122.                         <div class="cell"></div>  
  123.                         <div class="cell"></div>  
  124.                         <div class="cell"></div>  
  125.                         <div class="cell"></div>  
  126.                         <div class="cell"></div>  
  127.                         <div class="cell"></div>  
  128.                         <div class="cell"></div>  
  129.                         <div class="cell"></div>  
  130.                         <div class="cell"></div>  
  131.                         <div class="cell"></div>  
  132.                         <div class="cell"></div>  
  133.                         <div class="cell"></div>  
  134.                         <div class="cell"></div>  
  135.                         <div class="cell"></div>  
  136.                         <div class="cell"></div>  
  137.                         <div class="cell"></div>  
  138.                         <div class="cell"></div>  
  139.                         <div class="cell"></div>  
  140.                         <div class="cell"></div>  
  141.                         <div class="cell"></div>  
  142.                         <div class="cell"></div>  
  143.                         <div class="cell"></div>  
  144.                         <div class="cell"></div>  
  145.                         <div class="cell"></div>  
  146.                         <div class="cell"></div>  
  147.                         <div class="cell"></div>  
  148.                         <div class="cell"></div>  
  149.                         <div class="cell"></div>  
  150.                         <div class="cell"></div>  
  151.                         <div class="cell"></div>  
  152.                         <div class="cell"></div>  
  153.                         <div class="cell"></div>  
  154.                         <div class="cell"></div>  
  155.                         <div class="cell"></div>  
  156.                     </div>  
  157.                 </td>  
  158.             </tr>  
  159.             <tr>  
  160.                 <td> </td>  
  161.                 <td> </td>  
  162.             </tr>  
  163.             <tr>  
  164.                 <td colspan="2" style="text-align: center;">  
  165.                     <input id="btnSubmit" class="styled-button-3" type="button" value="Exit" />  
  166.                 </td>  
  167.             </tr>  
  168.         </table>  
  169.     </div>  
  170.     </form>  
  171. </body </html>  
The preceding HTML code defines the entire page design. Use a different HTML tag to create the entire page design. It contains three major processes. The first process uses a SELECT tag to create a drop down list with data. The second process uses an INPUT tag to create buttons and the third process is an IMG tag to link with the image destination path.

Part 2: CSS

Now I am moving to the second part. The second part process defines CSS code to make the look and feel for all the HTML elements we used before in the HTML part. The following is the CSS code I have used in this tutorial.
  1. <style type="text/css">  
  2.     html {  
  3.         text-align: center;  
  4.     }  
  5.       
  6.     #scr,  
  7.     #output {  
  8.         display: inline;  
  9.         font-size: xx-large  
  10.     }  
  11.       
  12.     body {  
  13.         background-color: Aqua;  
  14.     }  
  15.       
  16.     .styled-button-2 {  
  17.         -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  18.         -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  19.         box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  20.         border-bottom-color: #333;  
  21.         border: 5px solid GreenYellow;  
  22.         background-color: Aqua;  
  23.         border-radius: 10px;  
  24.         -moz-border-radius: 10px;  
  25.         -webkit-border-radius: 10px;  
  26.         color: #333;  
  27.         font-family: 'Verdana', Arial, sans-serif;  
  28.         font-size: 14px;  
  29.         text-shadow: #b2e2f5 0 1px 0;  
  30.         padding: 10px  
  31.     }  
  32.       
  33.     .styled-button-3 {  
  34.         -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  35.         -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  36.         box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  37.         border-bottom-color: #333;  
  38.         border: 1px solid #61c4ea;  
  39.         background-color: Cyan;  
  40.         border-radius: 5px;  
  41.         -moz-border-radius: 5px;  
  42.         -webkit-border-radius: 5px;  
  43.         color: #333;  
  44.         font-family: 'Verdana', Arial, sans-serif;  
  45.         font-size: 14px;  
  46.         text-shadow: #b2e2f5 0 1px 0;  
  47.         padding: 5px  
  48.     }  
  49.       
  50.     #shuffle > div {  
  51.         float: left;  
  52.         line-height: 30px;  
  53.         width: 30px;  
  54.         height: 30px;  
  55.         background-color: SpringGreen;  
  56.         border-radius: 4px;  
  57.         margin: 3px;  
  58.     }  
  59.       
  60.     #shuffle {  
  61.         background-color: HoneyDew;  
  62.         max-width: 360px;  
  63.         line-height: 30px height: 360px;  
  64.         float: left;  
  65.         padding: 5px;  
  66.         max-width: 360px;  
  67.     }  
  68.       
  69.     .highlight {  
  70.         opacity: 0.7;  
  71.         filter: alpha(opacity=5);  
  72.         background-color: #7FFF00;  
  73.     }  
  74.       
  75.     .web_dialog_overlay {  
  76.         position: fixed;  
  77.         top: 0;  
  78.         right: 0;  
  79.         bottom: 0;  
  80.         left: 0;  
  81.         height: 100%;  
  82.         width: 100%;  
  83.         margin: 0;  
  84.         padding: 0;  
  85.         background: #000000;  
  86.         opacity: .15;  
  87.         filter: alpha(opacity=15);  
  88.         -moz-opacity: .15;  
  89.         z-index: 101;  
  90.         display: none;  
  91.     }  
  92.       
  93.     .web_dialog {  
  94.         display: none;  
  95.         position: fixed;  
  96.         width: 390px;  
  97.         height: 600px;  
  98.         top: 15%;  
  99.         left: 50%;  
  100.         margin-left: -190px;  
  101.         margin-top: -100px;  
  102.         background-color: MediumSpringGreen;  
  103.         border: 5px solid Turquoise;  
  104.         padding: 0px;  
  105.         z-index: 102;  
  106.         font-family: Verdana;  
  107.         font-size: 10pt;  
  108.     }  
  109.       
  110.     .web_dialog_title {  
  111.         border-bottom: solid 5px Turquoise;  
  112.         background-color: Turquoise;  
  113.         padding: 5px;  
  114.         color: White;  
  115.         font-weight: bold;  
  116.     }  
  117.       
  118.     .web_dialog_title a {  
  119.         color: White;  
  120.         text-decoration: none;  
  121.     }  
  122.       
  123.     .align_right {  
  124.         text-align: right;  
  125.     }  
  126. </style>  
Before adding the CSS code, make sure it covers the entire browser display area. The preceding CSS code defines the entire HTML element design process.

Part 3: JQuery Scripting

Now I am moving to the third part. This is the final important jQuery scripting code that makes the HTML element functionalities, effects and animations. The following is the jQuery scripting code I have used in this tutorial.

The first step in the jQuery scripting part is to include the required jQuery library reference in the head element of your page.
  1. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  2.   
  3. The following is the complete JQuery and JavaScript code I used in this tutorial.  
  4.   
  5. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  6.   
  7. <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  8.   
  9. <script type="text/javascript">  
  10.     $(document).ready(function()  
  11.   
  12.         {  
  13.   
  14.             var $divs = $('.cell').removeClass('highlight');  
  15.   
  16.             rnd = Math.floor(Math.random() * $divs.length);  
  17.   
  18.             $divs.eq(rnd).addClass('highlight');  
  19.   
  20.             var seconds;  
  21.   
  22.             $("#btnShowSimple").click(function(e)  
  23.   
  24.                 {  
  25.   
  26.                     $("#output").html("00");  
  27.   
  28.                     function countdown()  
  29.   
  30.                     {  
  31.   
  32.                         seconds = 60;  
  33.   
  34.                         function tick()  
  35.   
  36.                         {  
  37.   
  38.                             var counter = document.getElementById('countdown');  
  39.   
  40.                             seconds--;  
  41.   
  42.                             counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);  
  43.   
  44.                             if (seconds > 0)  
  45.   
  46.                             {  
  47.                                 setTimeout(tick, 1000);  
  48.   
  49.                             } else  
  50.   
  51.                             {  
  52.                                 alert("Game over");  
  53.   
  54.                                 HideDialog();  
  55.   
  56.                             }  
  57.                         }  
  58.   
  59.                         tick();  
  60.   
  61.                     }  
  62.   
  63.                     countdown();  
  64.   
  65.   
  66.                     ShowDialog(true);  
  67.   
  68.   
  69.                     e.preventDefault();  
  70.   
  71.                 });  
  72.   
  73.   
  74.             $("#btnShowModal").click(function(e)  
  75.   
  76.                 {  
  77.   
  78.                     function countdown()  
  79.   
  80.                     {  
  81.   
  82.                         seconds = 60;  
  83.   
  84.                         function tick()  
  85.   
  86.                         {  
  87.   
  88.                             var counter = document.getElementById('countdown');  
  89.   
  90.                             seconds--;  
  91.   
  92.                             counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);  
  93.   
  94.                             if (seconds > 0)  
  95.   
  96.                             {  
  97.                                 setTimeout(tick, 1000);  
  98.   
  99.                             } else  
  100.   
  101.                             {  
  102.                                 alert("Game over");  
  103.   
  104.                                 HideDialog();  
  105.   
  106.                             }  
  107.                         }  
  108.   
  109.                         tick();  
  110.   
  111.                     }  
  112.   
  113.                     countdown();  
  114.   
  115.                     ShowDialog(true);  
  116.   
  117.                     e.preventDefault();  
  118.                 });  
  119.   
  120.             $("#btnClose").click(function(e)  
  121.   
  122.                 {  
  123.                     HideDialog();  
  124.   
  125.                     location.reload();  
  126.   
  127.                     e.preventDefault();  
  128.   
  129.                 });  
  130.   
  131.             $("#btnSubmit").click(function(e)  
  132.   
  133.                 {  
  134.   
  135.                     ShowDialog(false);  
  136.   
  137.                     location.reload();  
  138.   
  139.                     e.preventDefault();  
  140.   
  141.                 });  
  142.   
  143.   
  144.             $("#shuffle div").hover(function() {  
  145.   
  146.                 $(this).css('cursor', 'pointer');  
  147.   
  148.             }, function() {  
  149.   
  150.                 $(this).css('cursor', 'auto');  
  151.   
  152.             });  
  153.   
  154.   
  155.             $('.cell').click(function(e)  
  156.   
  157.                 {  
  158.   
  159.                     function get_random_color() {  
  160.                         var letters = '0123456789ABCDEF'.split('');  
  161.   
  162.                         var color = '#';  
  163.   
  164.                         for (var i = 0; i < 6; i++)  
  165.   
  166.                         {  
  167.   
  168.                             color += letters[Math.round(Math.random() * 15)];  
  169.   
  170.                         }  
  171.   
  172.                         return color;  
  173.   
  174.                     }  
  175.   
  176.                     var className = $(this).attr('class');  
  177.   
  178.   
  179.                     if (className == "cell highlight")  
  180.   
  181.                     {  
  182.   
  183.                         $('#output').html(function(i, val) {  
  184.                             return val * 1 + 1  
  185.                         });  
  186.   
  187.                     }  
  188.   
  189.                     $('.cell').css("background-color", get_random_color());  
  190.   
  191.                     var rnd;  
  192.   
  193.                     function highlight()  
  194.   
  195.                     {  
  196.   
  197.                         var $divs = $('.cell').removeClass('highlight');  
  198.   
  199.                         rnd = Math.floor(Math.random() * $divs.length);  
  200.   
  201.                         $divs.eq(rnd).addClass('highlight');  
  202.                     }  
  203.   
  204.                     highlight();  
  205.   
  206.                 });  
  207.   
  208.         });  
  209.   
  210.     function ShowDialog(modal)  
  211.   
  212.     {  
  213.         $("#overlay").show();  
  214.   
  215.         $("#dialog").fadeIn(300);  
  216.   
  217.         if (modal)  
  218.   
  219.         {  
  220.   
  221.             $("#overlay").unbind("click");  
  222.   
  223.         } else  
  224.   
  225.         {  
  226.             $("#overlay").click(function(e)  
  227.   
  228.                 {  
  229.   
  230.                     HideDialog();  
  231.   
  232.                 });  
  233.   
  234.         }  
  235.     }  
  236.   
  237.     function HideDialog()  
  238.   
  239.     {  
  240.         $("#overlay").hide();  
  241.   
  242.         $("#dialog").fadeOut(300);  
  243.     }  
  244. </script>  
The preceding jQuery scripting code improves the performance of the application and it defines the entire HTML element UI functionality and effects.

Complete code

The following are the complete HTML, CSS and jQuery scripting codes I used in this tutorial.
  1. <!doctype html>  
  2.   
  3.   
  4. <html lang="en">  
  5.   
  6.   
  7. <head>  
  8.   
  9.     <meta charset="utf-8">  
  10.   
  11.     <style type="text/css">  
  12.         html {  
  13.             text-align: center;  
  14.         }  
  15.           
  16.         #scr,  
  17.         #output {  
  18.             display: inline;  
  19.             font-size: xx-large  
  20.         }  
  21.           
  22.         body {  
  23.             background-color: Aqua;  
  24.         }  
  25.           
  26.         .styled-button-2 {  
  27.             -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  28.             -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  29.             box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  30.             border-bottom-color: #333;  
  31.             border: 5px solid GreenYellow;  
  32.             background-color: Aqua;  
  33.             border-radius: 10px;  
  34.             -moz-border-radius: 10px;  
  35.             -webkit-border-radius: 10px;  
  36.             color: #333;  
  37.             font-family: 'Verdana', Arial, sans-serif;  
  38.             font-size: 14px;  
  39.             text-shadow: #b2e2f5 0 1px 0;  
  40.             padding: 10px  
  41.         }  
  42.           
  43.         .styled-button-3 {  
  44.             -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  45.             -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  46.             box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;  
  47.             border-bottom-color: #333;  
  48.             border: 1px solid #61c4ea;  
  49.             background-color: Cyan;  
  50.             border-radius: 5px;  
  51.             -moz-border-radius: 5px;  
  52.             -webkit-border-radius: 5px;  
  53.             color: #333;  
  54.             font-family: 'Verdana', Arial, sans-serif;  
  55.             font-size: 14px;  
  56.             text-shadow: #b2e2f5 0 1px 0;  
  57.             padding: 5px  
  58.         }  
  59.           
  60.         #shuffle > div {  
  61.             float: left;  
  62.             line-height: 30px;  
  63.             width: 30px;  
  64.             height: 30px;  
  65.             background-color: SpringGreen;  
  66.             border-radius: 4px;  
  67.             margin: 3px;  
  68.         }  
  69.           
  70.         #shuffle {  
  71.             background-color: HoneyDew;  
  72.             max-width: 360px;  
  73.             line-height: 30px height: 360px;  
  74.             float: left;  
  75.             padding: 5px;  
  76.             max-width: 360px;  
  77.         }  
  78.           
  79.         .highlight {  
  80.             opacity: 0.7;  
  81.             filter: alpha(opacity=5);  
  82.             background-color: #7FFF00;  
  83.         }  
  84.           
  85.         .web_dialog_overlay {  
  86.             position: fixed;  
  87.             top: 0;  
  88.             right: 0;  
  89.             bottom: 0;  
  90.             left: 0;  
  91.             height: 100%;  
  92.             width: 100%;  
  93.             margin: 0;  
  94.             padding: 0;  
  95.             background: #000000;  
  96.             opacity: .15;  
  97.             filter: alpha(opacity=15);  
  98.             -moz-opacity: .15;  
  99.             z-index: 101;  
  100.             display: none;  
  101.         }  
  102.           
  103.         .web_dialog {  
  104.             display: none;  
  105.             position: fixed;  
  106.             width: 390px;  
  107.             height: 600px;  
  108.             top: 15%;  
  109.             left: 50%;  
  110.             margin-left: -190px;  
  111.             margin-top: -100px;  
  112.             background-color: MediumSpringGreen;  
  113.             border: 5px solid Turquoise;  
  114.             padding: 0px;  
  115.             z-index: 102;  
  116.             font-family: Verdana;  
  117.             font-size: 10pt;  
  118.         }  
  119.           
  120.         .web_dialog_title {  
  121.             border-bottom: solid 5px Turquoise;  
  122.             background-color: Turquoise;  
  123.             padding: 5px;  
  124.             color: White;  
  125.             font-weight: bold;  
  126.         }  
  127.           
  128.         .web_dialog_title a {  
  129.             color: White;  
  130.             text-decoration: none;  
  131.         }  
  132.           
  133.         .align_right {  
  134.             text-align: right;  
  135.         }  
  136.     </style>  
  137.   
  138.     <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  139.   
  140.     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  141.   
  142.     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  143.   
  144.     <script type="text/javascript">  
  145.         $(document).ready(function()  
  146.   
  147.             {  
  148.   
  149.                 var $divs = $('.cell').removeClass('highlight');  
  150.   
  151.                 rnd = Math.floor(Math.random() * $divs.length);  
  152.   
  153.                 $divs.eq(rnd).addClass('highlight');  
  154.   
  155.                 var seconds;  
  156.   
  157.                 $("#btnShowSimple").click(function(e)  
  158.   
  159.                     {  
  160.   
  161.                         $("#output").html("00");  
  162.   
  163.                         function countdown()  
  164.   
  165.                         {  
  166.   
  167.                             seconds = 60;  
  168.   
  169.                             function tick()  
  170.   
  171.                             {  
  172.   
  173.                                 var counter = document.getElementById('countdown');  
  174.   
  175.                                 seconds--;  
  176.   
  177.                                 counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);  
  178.   
  179.                                 if (seconds > 0)  
  180.   
  181.                                 {  
  182.                                     setTimeout(tick, 1000);  
  183.   
  184.                                 } else  
  185.   
  186.                                 {  
  187.                                     alert("Game over");  
  188.   
  189.                                     HideDialog();  
  190.   
  191.                                 }  
  192.                             }  
  193.   
  194.                             tick();  
  195.   
  196.                         }  
  197.   
  198.                         countdown();  
  199.   
  200.   
  201.                         ShowDialog(true);  
  202.   
  203.   
  204.                         e.preventDefault();  
  205.   
  206.                     });  
  207.   
  208.   
  209.                 $("#btnShowModal").click(function(e)  
  210.   
  211.                     {  
  212.   
  213.                         function countdown()  
  214.   
  215.                         {  
  216.   
  217.                             seconds = 60;  
  218.   
  219.                             function tick()  
  220.   
  221.                             {  
  222.   
  223.                                 var counter = document.getElementById('countdown');  
  224.   
  225.                                 seconds--;  
  226.   
  227.                                 counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);  
  228.   
  229.                                 if (seconds > 0)  
  230.   
  231.                                 {  
  232.                                     setTimeout(tick, 1000);  
  233.   
  234.                                 } else  
  235.   
  236.                                 {  
  237.                                     alert("Game over");  
  238.   
  239.                                     HideDialog();  
  240.   
  241.                                 }  
  242.                             }  
  243.   
  244.                             tick();  
  245.   
  246.                         }  
  247.   
  248.                         countdown();  
  249.   
  250.                         ShowDialog(true);  
  251.   
  252.                         e.preventDefault();  
  253.                     });  
  254.   
  255.                 $("#btnClose").click(function(e)  
  256.   
  257.                     {  
  258.                         HideDialog();  
  259.   
  260.                         location.reload();  
  261.   
  262.                         e.preventDefault();  
  263.   
  264.                     });  
  265.   
  266.                 $("#btnSubmit").click(function(e)  
  267.   
  268.                     {  
  269.   
  270.                         ShowDialog(false);  
  271.   
  272.                         location.reload();  
  273.   
  274.                         e.preventDefault();  
  275.   
  276.                     });  
  277.   
  278.   
  279.                 $("#shuffle div").hover(function() {  
  280.   
  281.                     $(this).css('cursor', 'pointer');  
  282.   
  283.                 }, function() {  
  284.   
  285.                     $(this).css('cursor', 'auto');  
  286.   
  287.                 });  
  288.   
  289.   
  290.                 $('.cell').click(function(e)  
  291.   
  292.                     {  
  293.   
  294.                         function get_random_color() {  
  295.                             var letters = '0123456789ABCDEF'.split('');  
  296.   
  297.                             var color = '#';  
  298.   
  299.                             for (var i = 0; i < 6; i++)  
  300.   
  301.                             {  
  302.   
  303.                                 color += letters[Math.round(Math.random() * 15)];  
  304.   
  305.                             }  
  306.   
  307.                             return color;  
  308.   
  309.                         }  
  310.   
  311.                         var className = $(this).attr('class');  
  312.   
  313.   
  314.                         if (className == "cell highlight")  
  315.   
  316.                         {  
  317.   
  318.                             $('#output').html(function(i, val) {  
  319.                                 return val * 1 + 1  
  320.                             });  
  321.   
  322.                         }  
  323.   
  324.                         $('.cell').css("background-color", get_random_color());  
  325.   
  326.                         var rnd;  
  327.   
  328.                         function highlight()  
  329.   
  330.                         {  
  331.   
  332.                             var $divs = $('.cell').removeClass('highlight');  
  333.   
  334.                             rnd = Math.floor(Math.random() * $divs.length);  
  335.   
  336.                             $divs.eq(rnd).addClass('highlight');  
  337.                         }  
  338.   
  339.                         highlight();  
  340.   
  341.                     });  
  342.   
  343.             });  
  344.   
  345.         function ShowDialog(modal)  
  346.   
  347.         {  
  348.             $("#overlay").show();  
  349.   
  350.             $("#dialog").fadeIn(300);  
  351.   
  352.             if (modal)  
  353.   
  354.             {  
  355.   
  356.                 $("#overlay").unbind("click");  
  357.   
  358.             } else  
  359.   
  360.             {  
  361.                 $("#overlay").click(function(e)  
  362.   
  363.                     {  
  364.   
  365.                         HideDialog();  
  366.   
  367.                     });  
  368.   
  369.             }  
  370.         }  
  371.   
  372.         function HideDialog()  
  373.   
  374.         {  
  375.             $("#overlay").hide();  
  376.   
  377.             $("#dialog").fadeOut(300);  
  378.         }  
  379.     </script>  
  380.   
  381. </head>  
  382.   
  383. <body <form>  
  384.   
  385.     <img src="Images/bulb_mind_brain_svg-256.png" alt="hi" style="width:256px;height:256px;">  
  386.   
  387.     <br>  
  388.   
  389.     <br>  
  390.     <div style="text-align:center;">  
  391.         <div id="scr">YOUR SCORE : </div>  
  392.         <div id="output">00</div>  
  393.     </div>  
  394.     <br>  
  395.     <br>  
  396.     <br>  
  397.   
  398.     <input type="button" class="styled-button-2" id="btnShowSimple" value="START" />     
  399.   
  400.     <input type="button" class="styled-button-2" id="btnShowModal" value="RESTART" />  
  401.   
  402.     <br />  
  403.     <br />  
  404.   
  405.     <div id="output"></div>  
  406.   
  407.     <div id="overlay" class="web_dialog_overlay"></div>  
  408.   
  409.     <div id="dialog" class="web_dialog">  
  410.   
  411.         <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">  
  412.   
  413.             <tr>  
  414.   
  415.                 <td class="web_dialog_title"></td>  
  416.   
  417.                 <td class="web_dialog_title align_right">  
  418.   
  419.                     <a href="#" id="btnClose">Close</a>  
  420.   
  421.                 </td>  
  422.   
  423.             </tr>  
  424.   
  425.             <td> </td>  
  426.   
  427.             <td> </td>  
  428.             <tr>  
  429.                 <td style="text-align: center" ;>  
  430.   
  431.                     Time Left <b id="countdown"></b> seconds     
  432.   
  433.                     <img src="Images/Alarm.png" alt="Timer" style="width:48px;height:48px;">  
  434.   
  435.                 </td>  
  436.   
  437.             </tr>  
  438.   
  439.             <tr>  
  440.   
  441.                 <td> </td>  
  442.   
  443.             </tr>  
  444.   
  445.             <tr>  
  446.   
  447.                 <td colspan="2" style="padding-left: 15px;">  
  448.   
  449.                 </td>  
  450.   
  451.             </tr>  
  452.             <tr>  
  453.                 <td> </td>  
  454.                 <td> </td>  
  455.             </tr>  
  456.             <tr>  
  457.                 <td colspan="2" style="padding-left: 15px;">  
  458.                     <div id="shuffle">  
  459.                         <div class="cell"></div>  
  460.                         <div class="cell"></div>  
  461.                         <div class="cell"></div>  
  462.                         <div class="cell"></div>  
  463.                         <div class="cell"></div>  
  464.                         <div class="cell"></div>  
  465.                         <div class="cell"></div>  
  466.                         <div class="cell"></div>  
  467.                         <div class="cell"></div>  
  468.                         <div class="cell"></div>  
  469.                         <div class="cell"></div>  
  470.                         <div class="cell"></div>  
  471.                         <div class="cell"></div>  
  472.                         <div class="cell"></div>  
  473.                         <div class="cell"></div>  
  474.                         <div class="cell"></div>  
  475.                         <div class="cell"></div>  
  476.                         <div class="cell"></div>  
  477.                         <div class="cell"></div>  
  478.                         <div class="cell"></div>  
  479.                         <div class="cell"></div>  
  480.                         <div class="cell"></div>  
  481.                         <div class="cell"></div>  
  482.                         <div class="cell"></div>  
  483.                         <div class="cell"></div>  
  484.                         <div class="cell"></div>  
  485.                         <div class="cell"></div>  
  486.                         <div class="cell"></div>  
  487.                         <div class="cell"></div>  
  488.                         <div class="cell"></div>  
  489.                         <div class="cell"></div>  
  490.                         <div class="cell"></div>  
  491.                         <div class="cell"></div>  
  492.                         <div class="cell"></div>  
  493.                         <div class="cell"></div>  
  494.                         <div class="cell"></div>  
  495.                         <div class="cell"></div>  
  496.                         <div class="cell"></div>  
  497.                         <div class="cell"></div>  
  498.                         <div class="cell"></div>  
  499.                         <div class="cell"></div>  
  500.                         <div class="cell"></div>  
  501.                         <div class="cell"></div>  
  502.                         <div class="cell"></div>  
  503.                         <div class="cell"></div>  
  504.                         <div class="cell"></div>  
  505.                         <div class="cell"></div>  
  506.                         <div class="cell"></div>  
  507.                         <div class="cell"></div>  
  508.                         <div class="cell"></div>  
  509.                         <div class="cell"></div>  
  510.                         <div class="cell"></div>  
  511.                         <div class="cell"></div>  
  512.                         <div class="cell"></div>  
  513.                         <div class="cell"></div>  
  514.                         <div class="cell"></div>  
  515.                         <div class="cell"></div>  
  516.                         <div class="cell"></div>  
  517.                         <div class="cell"></div>  
  518.                         <div class="cell"></div>  
  519.                         <div class="cell"></div>  
  520.                         <div class="cell"></div>  
  521.                         <div class="cell"></div>  
  522.                         <div class="cell"></div>  
  523.                         <div class="cell"></div>  
  524.                         <div class="cell"></div>  
  525.                         <div class="cell"></div>  
  526.                         <div class="cell"></div>  
  527.                         <div class="cell"></div>  
  528.                         <div class="cell"></div>  
  529.                         <div class="cell"></div>  
  530.                         <div class="cell"></div>  
  531.                         <div class="cell"></div>  
  532.                         <div class="cell"></div>  
  533.                         <div class="cell"></div>  
  534.                         <div class="cell"></div>  
  535.                         <div class="cell"></div>  
  536.                         <div class="cell"></div>  
  537.                         <div class="cell"></div>  
  538.                         <div class="cell"></div>  
  539.                         <div class="cell"></div>  
  540.                         <div class="cell"></div>  
  541.                         <div class="cell"></div>  
  542.                         <div class="cell"></div>  
  543.                         <div class="cell"></div>  
  544.                         <div class="cell"></div>  
  545.                         <div class="cell"></div>  
  546.                         <div class="cell"></div>  
  547.                         <div class="cell"></div>  
  548.                         <div class="cell"></div>  
  549.                         <div class="cell"></div>  
  550.                         <div class="cell"></div>  
  551.                         <div class="cell"></div>  
  552.                         <div class="cell"></div>  
  553.                         <div class="cell"></div>  
  554.                         <div class="cell"></div>  
  555.                         <div class="cell"></div>  
  556.                         <div class="cell"></div>  
  557.                         <div class="cell"></div>  
  558.                         <div class="cell"></div>  
  559.                     </div>  
  560.                 </td>  
  561.             </tr>  
  562.             <tr>  
  563.                 <td> </td>  
  564.                 <td> </td>  
  565.             </tr>  
  566.             <tr>  
  567.                 <td colspan="2" style="text-align: center;">  
  568.                     <input id="btnSubmit" class="styled-button-3" type="button" value="Exit" />  
  569.                 </td>  
  570.             </tr>  
  571.         </table>  
  572.     </div>  
  573.     </form>  
  574. </body </html>  
Output

This simple puzzle game will test the quality of your color vision. You need to identify one tile which is not the same color with the other tiles.

1. Open the HTML file in your web browser.

Game Main Page
                                             Figure 2: Mind Tickling Riddles Game Main Page

2. Start the game

3. You need to identify one tile which is not the same color with the other tiles.

Mind Tickling Riddles
                                                   Figure 3: Mind Tickling Riddles Color Tiles

Riddles Color Tiles
                                                Figure 4: Mind Tickling Riddles Color Tiles

Tickling Riddles Color Tiles
                                                Figure 5: Mind Tickling Riddles Color Tiles

Mind Tickling Riddles Color Tiles
                                             Figure 6: Mind Tickling Riddles Color Tiles

Game over alert
                                                            Figure 7: Game over alert

Score board
                                                                  Figure 8: Score board

Conclusion

I hope you liked this useful article. It will be useful for jQuery beginners and developers. Please provide your valuable feedback and suggestions.

Live demo

Game Link: Jsfiddle

References 


Similar Articles