daily pastebin goal
49%
SHARE
TWEET

【2K用JS】 gmindex.js

basictomonokai Oct 3rd, 2016 54 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 = 16;
  17.         var openings = 0;
  18.         var attempts = 0;
  19.         var can_pick = true;
  20.         var picked_tiles = [];
  21.         var pictures = [
  22.                                     '<img src="kei1.jpg"</img>',
  23.                                     '<img src="kei2.jpg"</img>',
  24.                                     '<img src="kei3.jpg"</img>',
  25.                                     '<img src="kei4.jpg"</img>',
  26.                                     '<img src="kei5.jpg"</img>',
  27.                                     '<img src="kei6.jpg"</img>',
  28.                                     '<img src="kei7.jpg"</img>',
  29.                                     '<img src="kei8.jpg"</img>',
  30.                                     '<img src="kei1.jpg"</img>',
  31.                                     '<img src="kei2.jpg"</img>',
  32.                                     '<img src="kei3.jpg"</img>',
  33.                                     '<img src="kei4.jpg"</img>',
  34.                                     '<img src="kei5.jpg"</img>',
  35.                                     '<img src="kei6.jpg"</img>',
  36.                                     '<img src="kei7.jpg"</img>',
  37.                                     '<img src="kei8.jpg"</img>',
  38.  
  39.  
  40.                                     ];
  41.         //retrieves an img from pictures array
  42.         function givePic(i) {
  43.             return pictures[i];
  44.         }
  45.        
  46.         //loop that creates tiles                                    
  47.         for(var i=0; i<num_tiles; i++) {
  48.             tiles.push(Math.floor(i/2));
  49.         }
  50.  
  51.         //loop that randomizes the tiles within array
  52.         var randomize, temp;
  53.         for(var k=num_tiles-1; k>0; k--) {
  54.             randomize = Math.floor(Math.random()*k);
  55.             temp = tiles[k];
  56.             tiles[k] = tiles[randomize];
  57.             tiles[randomize] = temp;
  58.         }
  59.  
  60.     //loop to place tiles with a random id
  61.         for(var p=0; p<num_tiles; p++) {
  62.             tile = new TileItem();
  63.             var id = Math.floor(Math.random()*300);
  64.             var img = givePic(p);
  65.             tile.tile_type = tiles[p];
  66.             tile.addToScene(id, img);
  67.         }
  68.  
  69.         //tile click
  70.         function clicked() {
  71.  
  72.             if(can_pick) {
  73.                 var picked = $(this);
  74.                 // console.log(picked[0].id.replace(" data-type=",""));
  75.                 picked.find('.tile').addClass('flipped');
  76.  
  77.                 //add tiles selected to picked_tiles array
  78.                 if(picked_tiles.indexOf(picked) === -1) {
  79.                     picked_tiles.push(picked);
  80.                 }
  81.  
  82.                 //checks if 2 tiles have been clicked
  83.                 if(picked_tiles.length === 2) {
  84.                     console.log('2 have been picked');
  85.                     //don't allow more tiles to be picked yet
  86.                     can_pick = false;
  87.                     //keep track of attempts
  88.                     attempts++;
  89.  
  90.                     //checks if 2 tiles match
  91.                     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)) {
  92.                         console.log(picked_tiles[0]);
  93.                         setTimeout(function(){
  94.                             console.log('match');
  95.                             picked_tiles[0].addClass('disabled');
  96.                             picked_tiles[1].addClass('disabled');
  97.                             picked_tiles = [];
  98.                             can_pick = true;
  99.                             //keeps track of pairs 'opened', if all pairs open, resetGame() is called
  100.                             openings++;
  101.                             if(openings === (num_tiles/2)) {
  102.                                 resetGame();
  103.                             }
  104.                         }, 1000);
  105.                         //if 2 selections didn't match
  106.                     } else {
  107.                         setTimeout(function() {
  108.                             // console.log(picked_tiles[0][0].id);
  109.                             // console.log(picked_tiles[1][0].id);
  110.                             console.log('they didnt match');
  111.                             //reset our array that collects the selected tiles
  112.                             picked_tiles[0].children().removeClass('flipped');
  113.                             picked_tiles[1].children().removeClass('flipped');
  114.                             picked_tiles = [];
  115.                             can_pick = true;
  116.                         }, 1000);
  117.                     }
  118.                 }
  119.             }
  120.         }
  121.        
  122.         //shuffle DOM list
  123.         $('ul li').shuffle();
  124.         //add event listeners to tiles
  125.         var elements = $('li');
  126.         for(var q=0; q<elements.length; q++){
  127.             elements[q].addEventListener('click',clicked);
  128.         }
  129.  
  130.         function resetGame(){
  131.             // alert("Congratulations! You took "+attempts+" attempts to complete.");
  132.             doDataLink(attempts);
  133.             $('.tiles').children().remove();
  134.             memory();
  135.         }
  136.     }
  137.  
  138.     memory();
  139.  
  140. });
  141.              
  142.               //http://james.padolsey.com/javascript/shuffling-the-dom/
  143.               //shuffle plugin
  144.              
  145.               (function($){
  146.  
  147.     $.fn.shuffle = function() {
  148.  
  149.         var allElems = this.get(),
  150.             getRandom = function(max) {
  151.                 return Math.floor(Math.random() * max);
  152.             },
  153.             shuffled = $.map(allElems, function(){
  154.                 var random = getRandom(allElems.length),
  155.                     randEl = $(allElems[random]).clone(true)[0];
  156.                 allElems.splice(random, 1);
  157.                 return randEl;
  158.            });
  159.  
  160.         this.each(function(i){
  161.             $(this).replaceWith($(shuffled[i]));
  162.         });
  163.  
  164.         return $(shuffled);
  165.  
  166.     };
  167.  
  168. })(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