daily pastebin goal
11%
SHARE
TWEET

【3K用JS】 gmindex2.js

basictomonokai Oct 3rd, 2016 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $(document).ready(function(){
  2.  
  3.     function memory(){
  4.         //tile Constructor function
  5.         function TileItem () {
  6.             this.tile_type;
  7.             this.addToScene = function(id, img) {
  8.                 var tileItem = '<li id="'+id+' data-type="'+this.tile_type+'"><div class="tile"><div class="tile-front"></div><div class="tile-back">'+img+'</div</div</li>';
  9.                 $('.tiles').append(tileItem);
  10.             };
  11.         }
  12.  
  13.         //vars
  14.         var tiles = [];
  15.         var tile = new TileItem();
  16.         var num_tiles = 24;
  17.         var openings = 0;
  18.         var attempts = 0;
  19.         var can_pick = true;
  20.         var picked_tiles = [];
  21.         var pictures = [
  22.                                     '<img src="kei9.jpg"</img>',
  23.                                     '<img src="kei10.jpg"</img>',
  24.                                     '<img src="kei11.jpg"</img>',
  25.                                     '<img src="kei12.jpg"</img>',
  26.                                     '<img src="kei13.jpg"</img>',
  27.                                     '<img src="kei14.jpg"</img>',
  28.                                     '<img src="kei15.jpg"</img>',
  29.                                     '<img src="kei16.jpg"</img>',
  30.                                     '<img src="kei9.jpg"</img>',
  31.                                     '<img src="kei10.jpg"</img>',
  32.                                     '<img src="kei11.jpg"</img>',
  33.                                     '<img src="kei12.jpg"</img>',
  34.                                     '<img src="kei13.jpg"</img>',
  35.                                     '<img src="kei14.jpg"</img>',
  36.                                     '<img src="kei15.jpg"</img>',
  37.                                     '<img src="kei16.jpg"</img>',
  38.                                     '<img src="kei9.jpg"</img>',
  39.                                     '<img src="kei10.jpg"</img>',
  40.                                     '<img src="kei11.jpg"</img>',
  41.                                     '<img src="kei12.jpg"</img>',
  42.                                     '<img src="kei13.jpg"</img>',
  43.                                     '<img src="kei14.jpg"</img>',
  44.                                     '<img src="kei15.jpg"</img>',
  45.                                     '<img src="kei16.jpg"</img>',
  46.  
  47.                                     ];
  48.         //retrieves an img from pictures array
  49.         function givePic(i) {
  50.             return pictures[i];
  51.         }
  52.        
  53.         //loop that creates tiles                                    
  54.         for(var i=0; i<num_tiles; i++) {
  55.             tiles.push(Math.floor(i/2));
  56.         }
  57.  
  58.         //loop that randomizes the tiles within array
  59.         var randomize, temp;
  60.         for(var k=num_tiles-1; k>0; k--) {
  61.             randomize = Math.floor(Math.random()*k);
  62.             temp = tiles[k];
  63.             tiles[k] = tiles[randomize];
  64.             tiles[randomize] = temp;
  65.         }
  66.  
  67.     //loop to place tiles with a random id
  68.         for(var p=0; p<num_tiles; p++) {
  69.             tile = new TileItem();
  70.             var id = Math.floor(Math.random()*300);
  71.             var img = givePic(p);
  72.             tile.tile_type = tiles[p];
  73.             tile.addToScene(id, img);
  74.         }
  75.  
  76.         //tile click
  77.         function clicked() {
  78.  
  79.             if(can_pick) {
  80.                 var picked = $(this);
  81.                 // console.log(picked[0].id.replace(" data-type=",""));
  82.                 picked.find('.tile').addClass('flipped');
  83.  
  84.                 //add tiles selected to picked_tiles array
  85.                 if(picked_tiles.indexOf(picked) === -1) {
  86.                     picked_tiles.push(picked);
  87.                 }
  88.  
  89.  
  90.                 //checks if 2 tiles have been clicked
  91.                 if(picked_tiles.length === 2) {
  92.                     console.log('2 have been picked');
  93.  
  94.                     //checks if 2 tiles match
  95.                     if((picked_tiles[0].find('img').attr('src')===picked_tiles[1].find('img').attr('src')) && (picked_tiles[0][0].id != picked_tiles[1][0].id)) {
  96.                         console.log(picked_tiles[0]);
  97.                         //if 2 selections didn't match
  98.                     } else {
  99.                         //keep track of attempts
  100.                         attempts++;
  101.                         setTimeout(function() {
  102.                             // console.log(picked_tiles[0][0].id);
  103.                             // console.log(picked_tiles[1][0].id);
  104.                             console.log('they didnt match');
  105.                             //reset our array that collects the selected tiles
  106.                             picked_tiles[0].children().removeClass('flipped');
  107.                             picked_tiles[1].children().removeClass('flipped');
  108.                             picked_tiles = [];
  109.                             can_pick = true;
  110.                         }, 1000);
  111.                     }
  112.                 }
  113.  
  114.  
  115.  
  116.                 //checks if 3 tiles have been clicked
  117.                 if(picked_tiles.length === 3) {
  118.                     console.log('3 have been picked');
  119.                     //don't allow more tiles to be picked yet
  120.                     can_pick = false;
  121.                     //keep track of attempts
  122.                     attempts++;
  123.  
  124.                     //checks if 3 tiles match
  125.                     if((picked_tiles[0].find('img').attr('src')===picked_tiles[1].find('img').attr('src')) &&
  126.                        (picked_tiles[1].find('img').attr('src')===picked_tiles[2].find('img').attr('src')) &&
  127.                        ((picked_tiles[0][0].id != picked_tiles[1][0].id) ||
  128.                        (picked_tiles[1][0].id != picked_tiles[2][0].id) ||
  129.                        (picked_tiles[0][0].id != picked_tiles[2][0].id))
  130.                      ) {
  131.                         console.log(picked_tiles[0]);
  132.                         setTimeout(function(){
  133.                             console.log('match');
  134.                             picked_tiles[0].addClass('disabled');
  135.                             picked_tiles[1].addClass('disabled');
  136.                             picked_tiles[2].addClass('disabled');
  137.                             picked_tiles = [];
  138.                             can_pick = true;
  139.                             //keeps track of pairs 'opened', if all pairs open, resetGame() is called
  140.                             openings++;
  141.                             if(openings === (num_tiles/3)) {
  142.                                 resetGame();
  143.                             }
  144.                         }, 1000);
  145.                         //if 2 selections didn't match
  146.                     } else {
  147.                         setTimeout(function() {
  148.                             // console.log(picked_tiles[0][0].id);
  149.                             // console.log(picked_tiles[1][0].id);
  150.                             console.log('they didnt match');
  151.                             //reset our array that collects the selected tiles
  152.                             picked_tiles[0].children().removeClass('flipped');
  153.                             picked_tiles[1].children().removeClass('flipped');
  154.                             picked_tiles[2].children().removeClass('flipped');
  155.                             picked_tiles = [];
  156.                             can_pick = true;
  157.                         }, 1000);
  158.                     }
  159.                 }
  160.             }
  161.         }
  162.        
  163.         //shuffle DOM list
  164.         $('ul li').shuffle();
  165.         //add event listeners to tiles
  166.         var elements = $('li');
  167.         for(var q=0; q<elements.length; q++){
  168.             elements[q].addEventListener('click',clicked);
  169.         }
  170.  
  171.         function resetGame(){
  172.             // alert("Congratulations! You took "+attempts+" attempts to complete.");
  173.             doDataLink(attempts);
  174.             $('.tiles').children().remove();
  175.             memory();
  176.         }
  177.     }
  178.  
  179.     memory();
  180.  
  181. });
  182.              
  183.               //http://james.padolsey.com/javascript/shuffling-the-dom/
  184.               //shuffle plugin
  185.              
  186.               (function($){
  187.  
  188.     $.fn.shuffle = function() {
  189.  
  190.         var allElems = this.get(),
  191.             getRandom = function(max) {
  192.                 return Math.floor(Math.random() * max);
  193.             },
  194.             shuffled = $.map(allElems, function(){
  195.                 var random = getRandom(allElems.length),
  196.                     randEl = $(allElems[random]).clone(true)[0];
  197.                 allElems.splice(random, 1);
  198.                 return randEl;
  199.            });
  200.  
  201.         this.each(function(i){
  202.             $(this).replaceWith($(shuffled[i]));
  203.         });
  204.  
  205.         return $(shuffled);
  206.  
  207.     };
  208.  
  209. })(jQuery);
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