SHARE
TWEET

Untitled

a guest Jun 26th, 2019 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Memory Game</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <script>
  7.         var image_location = "Image_folders\\";
  8.         var image_size = 34; // number of images in the images folder
  9.         var height_matrix = 2, width_matrix = 3;
  10.         var images_clicked = []; // images that the user clicked are stored here
  11.         var single_image_width = Math.max(75, (200 - 4 * width_matrix).toString());
  12.         var single_image_height = Math.max(75, (100 - 2 * height_matrix).toString());
  13.         var is_frozen = false; // determine if the board is frozen temporary
  14.         var completed = 0; //number of pieces the user completed
  15.         var tries_to_finish = 0;
  16.         var time = 0;
  17.         var timer;
  18.         var in_game = 0;
  19.         /*TBD
  20.         1-improve the UI
  21.         2-test more
  22.         */
  23.         function StartTimer()
  24.         {
  25.             CountTime();
  26.         }
  27.         function CountTime()
  28.         {
  29.             var inner_html;
  30.             inner_html = Math.floor(time/60) + " minutes " + time%60 + " seconds";
  31.             time++;
  32.             document.getElementById("Timer").innerHTML = inner_html;
  33.         }
  34.         function imgTag(photo_src, id) {
  35.             var left = "<img alt =\"" + image_location;
  36.             var middle = "img_" + photo_src + ".jpg";
  37.             return left + middle + "\" src = \"Image_folders\\question_mark.jpg\" onclick=\"showImage(this.alt,this.id)\" \
  38.             height =" + '"' + single_image_height + '"' + " width =" + '"' + single_image_width + '"' + "id = " + '"' +  id + '"' + "\">";
  39.         }
  40.         function randomNumber(numberOfPhotos)
  41.         {
  42.             return (Math.floor((Math.random() * numberOfPhotos)) + 1);
  43.         }
  44.         function randomPhoto(numberOfPhotos) {
  45.             var tmp = 0;
  46.             for(var i = 0;i < 5;i++)
  47.                 tmp += randomNumber(numberOfPhotos);
  48.             return ((tmp % numberOfPhotos) + 1).toString();
  49.         }
  50.         function sleep(ms) {
  51.             return new Promise(resolve => setTimeout(resolve, ms));
  52.         }
  53.         function switch_img(id)
  54.         {
  55.             if(document.getElementById(id).alt == "done")
  56.                 return;
  57.             temp = document.getElementById(id).src;
  58.             document.getElementById(id).src = document.getElementById(id).alt;
  59.             document.getElementById(id).alt = temp;
  60.         }
  61.         function showImage(photo_to_show, id) {
  62.             if (photo_to_show == "done" || is_frozen)
  63.                 return;
  64.             for (var i = 0; i < images_clicked.length; i++) {
  65.                 if (images_clicked[i] == id)
  66.                     return;
  67.             }
  68.             images_clicked.push(id);
  69.             document.getElementById(id).src = photo_to_show;
  70.             if (images_clicked.length == 2) {
  71.                 is_frozen = true;
  72.                 sleep(1500).then(() => {
  73.                     var is_match = document.getElementById(images_clicked[0]).src == document.getElementById(images_clicked[1]).src;
  74.                     var new_photo = image_location + (is_match
  75.                         ? "correct_mark.jpg" : "question_mark.jpg");
  76.                     for (var i = 0; i < 2; i++) {
  77.                         document.getElementById(images_clicked[i]).src = new_photo;
  78.                         if (is_match)
  79.                             document.getElementById(images_clicked[i]).alt = "done";
  80.                     }
  81.                     images_clicked.pop();
  82.                     images_clicked.pop();
  83.                     tries_to_finish++;
  84.                     UpdateCounter();
  85.                     if (is_match)
  86.                         completed += 2;
  87.                     is_frozen = false;
  88.                     if (completed == height_matrix * width_matrix)
  89.                     {
  90.                         alert("NICE, Game finished in " + tries_to_finish + " trials.");
  91.                         clearInterval(timer);
  92.                     }
  93.                 })
  94.             }
  95.         }
  96.         function UpdateCounter()
  97.         {
  98.             document.getElementById("counter_text").innerHTML = tries_to_finish;
  99.         }
  100.         function addRandomPhotos() {
  101.             if(time < 2 && in_game)
  102.                 return;
  103.             completed = tries_to_finish = 0;
  104.             var e = document.getElementById("Size");
  105.             height_matrix = e.options[e.selectedIndex].value;
  106.             width_matrix = height_matrix - height_matrix%2;
  107.             in_game = 1;
  108.             UpdateCounter();
  109.             time = 0;
  110.             clearInterval(timer);
  111.             timer = setInterval(StartTimer,1000);
  112.             is_frozen = false;
  113.             while (images_clicked.length)
  114.                 images_clicked.pop();
  115.             var inner_html = "";
  116.             var images = [];
  117.             var photos_amount = (height_matrix * width_matrix) / 2;
  118.             for (var i = 0; i < photos_amount; i++) {
  119.                 var temporary_photo = randomPhoto(image_size);
  120.                 images.push("<td>" + imgTag(temporary_photo, 2 * i + 1) + "</td>");
  121.                 images.push("<td>" + imgTag(temporary_photo, 2 * i + 2) + "</td>");
  122.             }
  123.             for (var i = 0; i < images.length; i++) {
  124.                 var random_position = Math.floor(Math.random() * images.length);
  125.                 var tmp = images[i];
  126.                 images[i] = images[random_position];
  127.                 images[random_position] = tmp;
  128.             }
  129.             for (var i = 0, counter = 0; i < height_matrix; i++) {
  130.                 inner_html += "<tr>";
  131.                 for (var j = 0; j < width_matrix; j++) {
  132.                     inner_html += images[counter];
  133.                     counter++;
  134.                 }
  135.                 inner_html += "</tr>";
  136.             }
  137.             document.getElementById("game_grid").innerHTML = inner_html;
  138.             for(var i = 0;i < photos_amount; i++){
  139.                 switch_img(2*i + 1);
  140.                 switch_img(2*i + 2);
  141.             }
  142.             sleep(2000).then(() => {
  143.             for(var i = 0; i < photos_amount; i++){
  144.                 switch_img(2*i + 1);
  145.                 switch_img(2*i + 2);
  146.             }})
  147.         }
  148.         function Solve(){
  149.             if(completed == height_matrix * width_matrix || in_game == 0 || time < 2)
  150.                 return;
  151.             var photos_amount = (height_matrix * width_matrix) / 2;
  152.             for(var i = 0;i < photos_amount; i++){
  153.                 switch_img(2 * i + 1);
  154.                 switch_img(2 * i + 2);
  155.             }
  156.             alert("Solved.");
  157.             clearInterval(timer);
  158.             completed = height_matrix * width_matrix;
  159.             is_frozen = true;
  160.         }
  161.     </script>
  162.     <style>
  163.         * {
  164.         box-sizing: border-box;
  165.         }
  166.  
  167.         body {
  168.         font-family: 'Times New Roman', Times, serif;
  169.         }
  170.  
  171.         /* Style the header */
  172.         .header {
  173.         background-color: #f1f1f1;
  174.         padding: 30px;
  175.         text-align: center;
  176.         font-size: 4vw;
  177.         }
  178.  
  179.         /* Container for flexboxes */
  180.         .row {
  181.         display: -webkit-flex;
  182.         display: flex;
  183.         }
  184.  
  185.         /* Create three unequal columns that sits next to each other */
  186.         .column {
  187.         padding: 10px;
  188.         }
  189.  
  190.         /* Left and right column */
  191.         .column.side {
  192.         -webkit-flex: 1;
  193.         -ms-flex: 1;
  194.         flex: 1;
  195.         }
  196.  
  197.         /* Middle column */
  198.         .column.middle {
  199.         -webkit-flex: 2;
  200.         -ms-flex: 2;
  201.         flex: 2;
  202.         }
  203.  
  204.         /* Style the footer */
  205.         .footer {
  206.         background-color: #f1f1f1;
  207.         padding: 10px;
  208.         text-align: center;
  209.         }
  210.  
  211.         /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  212.         @media (max-width: 600px) {
  213.         .row {
  214.             -webkit-flex-direction: column;
  215.             flex-direction: column;
  216.         }
  217.         }
  218.     </style>
  219. </head>
  220. <body>
  221.     <h1 class="header">Memory Game</h1>
  222.     <h2>To start a game:</h2>
  223.     <ol>
  224.         <li>Click on the Start button</li>
  225.         <li>Try to memorize the matching images</li>
  226.         <li>Click on an image to show it</li>
  227.         <li>Try to match the images</li>
  228.     </ol>
  229.     <div class="row">
  230.         <div class="column side"> <button onclick="Solve();" id="solve_button">Solve</button><br></div>
  231.         <div class="column middle">
  232.             <table id="game_grid" style="border: 1px solid black"></table>
  233.         </div>
  234.         <div class="column side">
  235.             <button onclick="addRandomPhotos();" id="myButton1">Start</button><br>
  236.             <p1>Tries: <p2 id="counter_text"></p2></p1><br>
  237.             <p3 id="Timer">Timer</p3><br>
  238.             <select name="Size" id="Size">
  239.                     <option value="3">3x2</option>
  240.                     <option value="4">4x4</option>
  241.                     <option value="5">5x4</option>
  242.                     <option value="6">6x6</option>
  243.             </select>
  244.         </div>
  245.     </div>
  246.     <p class="footer">Made by: Amr El-Begawy & Mohanad Ayman.
  247.     </p>
  248. </body>
  249. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top